Performance Budget
A committed numeric ceiling on a page's cost, enforced automatically.
A performance budget is an explicit limit on a page's cost — kilobytes of JavaScript, number of requests, a timing metric — checked in the build so that exceeding it fails rather than merely being noticed later. It converts performance from an occasional cleanup into a standing constraint.
Budgets work because performance regressions are almost never deliberate. Nobody adds three hundred kilobytes on purpose; it arrives as one import that changed the Module Graph. A gate catches it at the moment the cause is known and cheap to reverse.
Making one requires deciding what to measure, and that is harder than it sounds. Per-route JavaScript, for instance, may not be reported by the build tool at all, and has to be reconstructed from build manifests: the shared framework chunks plus the entries for the route's segment chain, minus legacy polyfill bundles that no modern browser fetches. Including those polyfills makes every number wrong in the same direction, which makes any improvement look bigger than it is. Validate the derived number against something independent — the actual script tags in a prerendered page — before trusting it.
Budgets should also be revisable with reasoning attached. A deliberate, understood increase is fine; the value of the gate is that raising it is a decision rather than an accident.
See also10
Code Splitting
Dividing an application bundle so a page downloads only the code it needs.
Web Platform17 connections
React Server Components
Components that execute only on the server and never ship their code to the browser.
Web Platform21 connections
Web Font Loading
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.
Web Platform12 connections
Islands Architecture
Rendering a page as static HTML with small independently interactive regions.
Web Platform18 connections
Server-Side Rendering
Producing a page's HTML on the server so the first response is already content.
Web Platform23 connections
Lazy Loading
Deferring the fetch of a resource until it is needed, or until the browser is idle.
Web Platform21 connections
Core Web Vitals
Google's small set of user-centered performance metrics: loading, interactivity, and visual stability.
Web Platform28 connections
Continuous Integration
Automatically building and testing every change, so integration problems surface immediately.
Version Control & Delivery38 connections
Goodhart's Law
When a measure becomes a target, it stops being a good measure.
Method51 connections
Benchmarking
Measuring how fast code runs under controlled conditions, which is far harder to do honestly than it looks.
Testing & Verification12 connections
Linked from24
- BenchmarkingTesting & Verification
Measuring how fast code runs under controlled conditions, which is far harder to do honestly than it looks.
- Big-O NotationComputation & Algorithms
A coarse language for how an algorithm's cost grows as its input grows.
- Client-Server BoundaryWeb Platform
The line in an application where execution moves from the server to the browser.
- Code SplittingWeb Platform
Dividing an application bundle so a page downloads only the code it needs.
- Core Web VitalsWeb Platform
Google's small set of user-centered performance metrics: loading, interactivity, and visual stability.
- Debounce and ThrottleWeb Platform
Two opposite strategies for limiting how often a handler runs against a rapid stream of events.
- Frame PacingGraphics & Rendering
How evenly frames are delivered over time, which shapes perceived smoothness more than average frame rate does.
- Goodhart's LawMethod
When a measure becomes a target, it stops being a good measure.
- HydrationWeb Platform
Attaching client-side behavior to server-rendered markup without rebuilding it.
- Incremental Static RegenerationWeb Platform
Serving a cached static page while regenerating it in the background after a chosen interval.
- Islands ArchitectureWeb Platform
Rendering a page as static HTML with small independently interactive regions.
- Lazy LoadingWeb Platform
Deferring the fetch of a resource until it is needed, or until the browser is idle.
- Level of DetailGraphics & Rendering
Swapping an object's representation for a cheaper one as it becomes less visually significant, usually with distance.
- Long TaskWeb Platform
Any stretch of main-thread work over 50 milliseconds, during which the page can't respond to input, and the techniques for breaking such work up.
- Module GraphWeb Platform
The directed graph of imports that decides what code ends up where.
- Motion DesignDesign & Interface
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
- Preload and PrefetchWeb Platform
Two resource hints with opposite priorities — preload for what this page needs now, prefetch for what the next page might need.
- React Server ComponentsWeb Platform
Components that execute only on the server and never ship their code to the browser.
- Static Site GenerationWeb Platform
Rendering every page to a file at build time, so serving is just handing over bytes.
- Tail LatencyNetworks & Distribution
The slowest few percent of response times, which averages hide and which dominate the experience of large systems, because one request often waits on many others.
- Time as ResourcePlay & Games
A design in which the scarce resource is the schedule itself, so every activity is paid for with another left undone.
- Tree ShakingWeb Platform
Statically removing exports that nothing imports, shrinking the shipped bundle.
- Web Font LoadingWeb Platform
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.
- Web WorkerWeb Platform
A background thread for running JavaScript off the main thread, with no access to the DOM.