Part 4 · 2 chapters · ~15 min

Performance Discipline

Performance as a loop rather than a project: budgets per page and tier, a lab gate on every PR, real devices on release candidates, the field by release and ring, owners and a weekly cadence; and the method when a number moves, from an attributed alert through reproduction and one change to confirmation in the field.

9

Performance as a discipline

a loop, not a project
  1. Budgets per page and device tier in units users feel: LCP, INP and CLS at p75 (2.5 s, 200 ms, 0.1 on the mid tier), first-screen and entry-chunk bytes, main-thread time per key interaction. Set from the field and the business; owned in a file (the Big-company FE course part 6).
  2. The lab gate on every PR: size-limit per chunk, Lighthouse CI on the preview (median of three), a replayed flow asserting interaction main-thread time (the DevTools course part 9). A regression fails with the delta and the trace; an intentional one files a dated exception.
  3. Real devices nightly and on release candidates for the worst real tier (the Architecture course part 6), with the same budgets; too slow for the merge path, so it blocks the release.
  4. The field: RUM with attribution by route, release and tier (part 5); the train's rings compare versions and halt on a breach (the Big-company FE course part 6); a sustained regression outside the rings pages the page's owner. The only number about users; the lab explains it.
  5. Ownership and cadence: an owner per page, a weekly trend review, a quarterly ratchet toward the best values seen, a champion per team who knows the DevTools method; field regressions get post-incident reviews.
  6. What it prevents and costs: it prevents the slow rot (the Architecture course part 5), the device blind spot and the million-user regression; it costs CI minutes, a device lab, RUM and an hour a week per team. Cheaper than a performance quarter a year, and the number does not decay.
PERFORMANCE AS A DISCIPLINE
the loop: a budget per page, measured in the lab on every change and in the field on every release, with a gate and an owner
swipe the figure sideways, or tap expand for full screen
1/6
budgets
Budgets: per page (or route) and per device tier, in the units users feel: LCP p75 under 2.5 s on the mid tier, INP p75 under 200 ms, CLS under 0.1, first-screen bytes under a number, entry chunk under a number, main-thread time per key interaction under a number. Set from the field (today's p75, improved) and the business (the conversion curve from the Architecture course part 5). Written in a file the page's owners own (the Big-company FE course part 6).
10

When a number moves: the method

from an alert to a confirmed fix
  1. The alert arrives already cut by route, tier and release: "INP p75 on /checkout, 2 GB tier, release 4.18: 340 ms (was 180 ms)". One page, one tier, one release; that release's diff is the suspect list.
  2. Field attribution names the interaction target (the place-order button), the type, and the phases (input delay 40, processing 260, presentation 40): the processing phase on that handler is the problem, before anyone opens DevTools.
  3. Reproduction: the release's preview on a 2 GB device or 6× CPU throttle, the Recorder's checkout flow, the Performance panel on the click. The trace names a schema parse of the whole cart on every click: the TypeScript course part 7's parse-at-the-boundary, misapplied to the interaction path.
  4. The stage and one fix: script in the handler; parse once at load, validate the delta on click (the FSD course M2, the TypeScript course part 7); 260 to 30 ms on the throttled run; shipped behind a flag, canaried, compared on the ring.
  5. Confirmation in the field: the next ring's p75 back to 175 ms; the alert resolves; the post-incident note records the cause and adds the check that would have caught it (a replayed checkout flow asserting click main-thread time in CI). Every incident strengthens the gate.
  6. Per metric: LCP (element and phase: the Browser course part 12), INP (target and phase), CLS (shift source and cause), bytes (chunk and the import that grew). Every regression has a named element or task; a regression without one means attribution is missing, and that is the first fix.
the exercise
Pick your product's worst page by field INP p75 on the lowest tier with real traffic. Walk the six steps; if step two has no target and phase, add attribution to your RUM before anything else.
WHEN A NUMBER MOVES: THE METHOD
from an alert to a fix, through attribution, the trace and the course part that has the mechanism
swipe the figure sideways, or tap expand for full screen
1/6
the alert
The alert: "INP p75 on /checkout, 2 GB tier, release 4.18: 340 ms (was 180 ms)". Already cut by route, tier and release (part 5 and the Architecture course part 6): the regression is one page, one tier, one release. The diff of that release is the suspect list.