The full picture: URL to LCP to INP as a relay race

Bea taps a product link. The page paints the photo and price after 1.4 seconds — it looks done. She taps “Add to cart” at 2 seconds and nothing happens. The button is not broken; it is not wired up yet. Hydration has not finished.

The relay-race metaphor.

Think of a page load as a relay race with four runners, each passing a baton to the next:

1. Network — fetches the HTML bytes from the server.
2. Parse — builds the DOM from HTML and the CSSOM from CSS.
3. Paint — lays out the page and draws the first frame. At this point the page looks done.
4. Hydrate — downloads and runs the JavaScript that attaches event handlers and state to the painted page. Only now does the page work.

The race is only as fast as the whole chain. If any runner stumbles, every runner after them is late. The user only sees the finish line — when the page looks done and when it actually responds to a tap.

Why care.

Almost no real performance problem lives in one place. A slow page is usually a chain problem: the server was a little slow, the bundle was a little big, the hero image was a little late — and together they push the page over the line into “slow.” Tracing the whole chain beats guessing at one step.