Web Performance Budgets
A number a build can fail against, rather than a performance sprint once a year.
3 to work through
-
intermediate
A booking site sets a JavaScript budget. Six months later it is exceeded on every page. What was missing?
1 min answer -
advanced
A booking site enforces a performance budget in CI: the main bundle must stay under 300 KB compressed. The budget has passed on every build for a year. Field data shows the median page is 2.8 MB of JavaScript and interaction latency has doubled. Review the budget. What is wrong with it, and what would you replace it with?
3 min answer -
advanced
Pinterest rebuilt its mobile web experience in 2017 and reported time to interactive falling from about 23 seconds to 5.6 seconds, with the core bundle cut from roughly 650 KB to 150 KB against an old experience shipping over 2.5 MB of JavaScript. What was actually wrong, what did the rebuild change, and where would copying it be a mistake?
3 min answer
5 terms in this topic
Device Class Baseline
A named device and network profile, chosen from the slow end of your real user population, against which every performance budget and acceptance test…
metricLong Task
Any single piece of work holding the browser's main thread for more than 50 ms, during which no input is handled and nothing is painted - the unit in…
practicePerformance Budget Enforcement
A stated limit on bundle size or a timing metric that fails a build when exceeded, which is what turns performance from a periodic project into a con…
metricThird-Party Weight Budget
An enforced allowance for scripts the application build does not produce - count, bytes and main-thread time - with a named owner and a technical enf…
practiceWeb Performance Budget
An enforced limit on payload size, resource counts or timing metrics, checked automatically so regressions fail the build rather than accumulating.
Neighbouring topics
Frontend & Experience Architecture
General material on architecting the surface the user actually touches.
Rendering Strategies
Client, server, static and incremental rendering, and what each costs on first paint.
Edge Rendering
Running the render close to the user, and the personalisation and cache trade it implies.
Hydration Cost
The gap between visible and interactive, and the JavaScript that closes it.
Micro-Frontends
Independent deployment of UI slices, and the shared runtime that undermines it.
Module Federation
Loading code from another build at runtime, with versioning and failure to think about.
UI Monorepo Strategy
One repository for many front ends, and the build graph that makes it viable.
Design Systems
Components as a versioned internal product, with adoption and deprecation like any API.
Component Contracts
Props, slots and events as an interface, and the breaking change hidden in a style.
Client State Architecture
Server state, UI state and derived state, and why conflating them causes most bugs.
Client Caching & Data Layer
Stale-while-revalidate, invalidation and optimistic updates on the client.
BFF for Experience
One backend per experience, shaped by the screen rather than by the domain.
API Shapes for UI
REST, GraphQL and RPC judged by over-fetching, round trips and client coupling.
Core Web Vitals
LCP, INP and CLS — what they measure, and the architecture that moves them.
Accessibility Architecture
Semantics, focus management and announcements designed in rather than audited in.
Internationalisation
Locale, direction, pluralisation and dates as structural concerns, not string tables.
Client Feature Flags
Flag evaluation on a device you do not control, and the flicker and staleness it brings.
Real User Monitoring
Field data from real devices and networks, against the synthetic run that looked fine.
Frontend Security
CSP, XSS, CSRF, token storage, and the trust boundary that ends at the browser.