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

The relay-race metaphor.

When you look at a slow page, which runner do you blame? Before you can answer that, you need to know who the runners are and in what order they pass the baton.

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. Together these four stages mean that “the page is slow” could be a network problem, a CSS problem, a JavaScript size problem, or a hydration problem — and without the relay frame, you are guessing.

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.