Performance budget
Budget the journey across six sources of delay
A useful budget names the user moment, measurement population, threshold, owner and action when the threshold is missed.
Initial content
Make the primary purpose visible without waiting for optional work.
- Measure
- Largest visible content and server response
- Inspect
- Blocking CSS, fonts, rendering and backend latency
- Protect
- Route-level loading budget
Interaction response
Keep controls responsive during client and server work.
- Measure
- Interaction latency and long tasks
- Inspect
- Hydration, handlers, main-thread work and network
- Protect
- Representative interaction budget
Visual stability
Reserve space and avoid unexpected movement.
- Measure
- Layout shifts across page lifecycle
- Inspect
- Images, fonts, banners and inserted content
- Protect
- Dimensions and stable component states
JavaScript
Ship only code needed for the current route and moment.
- Measure
- Transferred, parsed and executed code
- Inspect
- Large libraries, client boundaries and duplicate bundles
- Protect
- Route bundle and long-task budget
Media and fonts
Match bytes and formats to rendered use.
- Measure
- Resource size, priority and decode
- Inspect
- Intrinsic dimensions, responsive sources and subsets
- Protect
- Asset pipeline and review budget
Backend and providers
Keep remote work bounded and observable.
- Measure
- Latency distribution, cache and dependency time
- Inspect
- Sequential calls, queries and cold paths
- Protect
- Service-level threshold and timeout
Operating principle
Measure before and after one controlled change
A performance audit can list dozens of opportunities. Fixing all of them together makes it difficult to know which change helped, which regressed behavior and whether the improvement survives real traffic.
Choose the most consequential journey, collect a repeatable baseline, change one limiting factor and compare the same measurement. Then add a budget so future generated features cannot silently spend the gain.
- Measure distributions, not one lucky run
- Use representative devices and data
- Tie budgets to journeys
- Recheck functionality and accessibility
Applied example
Optimization example: the decorative dependency
A landing page imports a full animation library for one small hero effect. The library and its client boundary delay interaction on every visit.
- The visual effect is not part of the core task
- The dependency increases transfer and execution
- A CSS transition can preserve intent
- The route budget can prevent reintroduction
Plain answers
Questions to resolve before shipping
Should I aim for a perfect laboratory score?+
Use lab tools diagnostically, but prioritize real user experience, accessibility and product correctness over a universal vanity number.
Does static generation guarantee speed?+
It can reduce server work, but media, JavaScript, fonts, third parties, caching and user devices still shape the experience.
Can performance changes break the site?+
Yes. Deferral, caching, compression and code splitting can change behavior, so verify functionality, freshness and accessibility after each change.