Five canonical breaks: where production reliably dies

Your team runs a Lighthouse score: 94 green. Then a RUM report lands — field LCP 6.8 s, INP 540 ms, CLS 0.21, all poor. The lab was testing a clean session without the service worker; the field has real users on mid-range phones who tap buttons during hydration. Lab and field are measuring the same page — from different angles, and the field angle is what users live in.

The uncanny valley as the unifying failure.

The single failure that ties the browser chapter together is the gap between “painted” and “interactive” — the hydration uncanny valley. It is not one bug; it is a structural property of server-rendered, client-hydrated apps. Every other failure in this lesson either widens that valley or happens inside it.

The senior framing: a page has two completion moments, LCP-ish (“looks done”) and TTI-ish (“works”), and the entire craft of modern frontend performance is collapsing the distance between them. With that frame, here are the five canonical breaks — the places production most reliably dies along the trace.

Break 1 — Late-loaded hero image (LCP).

The hero image is the LCP element, but it is referenced in CSS as a background-image, or it carries loading="lazy", or it is injected by JavaScript. The preload scanner cannot see it, so its download starts late — and LCP, which is measuring exactly that element, lands at 4+ seconds. The trace shows a long resource-load-delay phase.

Fix: the LCP image must be a plain <img> in the initial HTML, eagerly loaded, with fetchpriority="high". This is layer 2 (discovery) failing and layer 5 (paint) paying for it.

Break 2 — Hydration mismatch (CLS plus correctness).

A component renders a value that differs between server and client — a timestamp, a localStorage-derived flag, a locale-formatted price. The server HTML and the client’s first render disagree; React discards the server subtree and re-renders it, flashing changed content and spiking CLS. The trace shows a layout-shift marker right after the hydration long task.

Fix: render determinism — defer client-only values to a post-hydration useEffect. This is layer 6 (hydration) failing because the serialized state was not faithfully reproduced on the client.

Break 3 — Megamorphic render path (INP).

The “Add to cart” handler triggers a re-render, and a hot function on that path — a property accessor, a comparator — is megamorphic: it has seen too many object shapes, so V8 cannot use an inline cache and falls back to slow lookups. The re-render that should take 5 ms takes 80 ms, and INP for the interaction is poor. The trace shows a long scripting bar inside the interaction.

Fix: stabilise object shapes so V8’s inline caches stay monomorphic. This is layer 4 (V8) and layer 7 (the interaction) entangled.

Break 4 — Stale service worker cache (correctness).

A deploy ships new HTML and a new JS bundle, but the service worker serves last week’s cached app.js cache-first against this week’s HTML — module-version mismatch, runtime error. Or worse, a broken app shell is cached and every repeat visitor is trapped on it, bypassing the network where the fix lives.

Fix: content-hashed asset filenames, version-tagged caches cleaned in activate, network-first navigation, a kill switch. This is layer 1 / layer 8 (the worker) failing through statefulness — the cache outlived its correctness.

Break 5 — Synchronous work in an event handler (INP).

The “Add to cart” handler does something synchronous and heavy on the main thread before yielding — fires a synchronous analytics beacon, runs a large JSON.parse, recomputes a derived list. The handler’s processing time alone blows the 200 ms INP budget. The trace shows a long yellow scripting bar between input and the next paint.

Fix: do the minimum to update the UI, then yield (scheduler.yield()), and move pure heavy computation to a worker. This is layer 7 (the interaction) failing on the event loop’s rules directly.

Why each break is mis-diagnosable from one layer.

Break 1 looks like “slow image” to someone who only knows the network — but the image was a normal size; the real cause was discovery, a parse-layer concern. Break 3 looks like “React is slow” to someone who only knows the reconciler — but the reconciler was fine; the real cause was a megamorphic shape, a V8 concern. The whole point of tracing end to end is that the symptom and the cause are routinely in different layers, and only someone who can see the whole chain stops fixing symptoms.

[TTFB]  2980 ms   (no service worker hit; cold origin)
[FCP]   3240 ms
[LCP]   6800 ms   element: div.hero[style*=background-image]
[INP]   540 ms    interaction: click .add-to-cart
                loaf script: vendor.js (hydration)  482 ms
[CLS]   0.21      source: #price (hydration mismatch)