Reading progress of “Performance budgeting in practice”: 0%
Advanced · The advanced practice
Performance budgeting in practice
A budget is a number someone checks. The practice is the machinery around it: measure the shell, cap the per-route JS, and let the build fail on an accident instead of noticing it in the field.
Advanced1 min read (computed · recorded 4)updated 2026-09-14performancebudgetsbuildadvanced
by Motif Editors
revised 2026-09-14 — First publication in the bank completeness pass.
— A route budget is a ratchet: set from the measured build with headroom, raised only in the same commit as the code.
— The shared shell is the expensive part — the file set the most routes share is where accidents cost the most.
— A number nobody checks is a dashboard; the gate turns it into a promise.
The ratchet, not the target
A performance budget works when it is a ratchet: measured from the real build, set with roughly a third of headroom, and raised only in the same commit as the code that needs it. The alternative is a target that drifts into fiction. On this site the shell budget has been re-cut at 730, 745, 770, 800 and 850 KB — each re-cut visible in the diff, each one a content addition that earned its weight.
The gate is the practice
The export harness fails a build whose shared shell grows past its recorded budget, and a route whose own JavaScript grows past its limit. Failing is the feature: an accident (an import that pulls a demo module onto eighty content pages) is caught at build time, not discovered by a user with a slow connection.
The component this essay works with — mounted, not picturedPreloader Handoff →
Preloader choreography
0% of the fake load
motif.local · fake load, no network0%
Stage 1 of 3 · Skeleton shell
borrowed from Skeleton Profile Card · 1.3 KB
Press run: three loaders hand off to the content panel. Nothing is fetched.
Loader choreography is usually where a site lies about speed, so this one is explicit: no request is made, the bar is a timer, and the first three rows name the catalog asset each stage borrows its motion from.