Browser & Frontend Runtime
Putting it together: diagnose and fix a janky page end-to-end
Reading about the relay is not the same as pulling a real page out of the uncanny valley. Take a slow, janky server-rendered page, walk the whole chain with a trace and RUM, fix the dominant cause at each layer in leverage order, and prove every move with before/after numbers — the loop you will run in every real performance incident.
Turn the capstone discipline into a reproducible engineering loop: measure before touching, find the constraint track at the constraint moment, fix the dominant cause across the rendering path, re-measure, and wire the understanding into a monitored system that catches the next regression.
Take a deliberately slow, janky server-rendered page (your own or the starter pattern below) with poor LCP, INP, and CLS, and bring all three Core Web Vitals to 'good' at field p75 — proving each step with a DevTools trace and RUM, without abandoning SSR.
- A before/after table at field p75: LCP, INP, CLS, plus TTFB and the hydration long-task duration — measured under the same throttling, not estimated.
- All three Core Web Vitals reach 'good' at p75: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- An annotated trace pair (before/after) showing the constraint track at the LCP and first-tap moments, and the hydration long task visibly shorter after the fix.
- A one-paragraph write-up per fix: the layer it targeted, the metric it moved, and why it ranked where it did in the leverage order — TTFB and hydration cost before handler micro-optimisation.
- The CI gate is green on the fixed branch and demonstrably fails when a regression (e.g. re-adding the lazy hero or an eager heavy island) is introduced.
- Add an on-call runbook: chain-walk triage from a trace, the symptom-to-layer table, the five canonical breaks with their fixes, and a verification checklist.
- Stream the shell with React Server Components and Suspense so first paint precedes full data, and measure the LCP and INP impact versus the all-at-once hydration baseline.
- Harden the service worker: content-hashed assets, version-tagged caches purged in activate, network-first navigation, and a kill switch — then simulate a bad deploy and show repeat visitors are not trapped.
- Add Long Animation Frame observation in RUM and confirm the dominant INP script named in the field matches the long task you fixed in the lab — closing the loop between field and lab.
This is the loop you will run in every real frontend performance incident: capture a trace and field RUM first, read it as three tracks to find the constraint at the moment that matters, fix the dominant cause across the rendering path in leverage order — TTFB, then LCP discovery, then hydration cost, then CLS determinism, then the handler — re-measure after each move because the layers interact, and wire RUM plus a CI gate so the next regression is caught before users feel it. Doing it once on a deliberately broken page is what makes the production version muscle memory.