The five questions, in order
- What is on the critical path? Sort by start time and find everything that finishes before the first paint. Anything there that is not HTML or a blocking stylesheet is a candidate for
defer,asyncormedia. - How many origins? Each one is a DNS lookup and a handshake. Three is a design; nine is an accident.
- What is not cached? A repeat visit that re-downloads the same assets means missing or wrong
Cache-Control. - What redirects? Every hop is a round trip before the real request starts.
- What is repeated? The same endpoint called forty times with a different id is the N+1 from the SQL course, arriving over the network.
What the timings mean
A long waiting is a server problem; a long download is a size problem; a long stalled is a queueing problem and usually means too many requests at once on HTTP/1.1. They have completely different fixes, and the waterfall tells you which one you have.
| Phase | Long means |
|---|---|
| Queued / stalled | the browser is out of connection slots, or prioritising something else |
| DNS | a new origin, not yet resolved |
| Initial connection / SSL | a new origin, handshaking |
| Waiting (TTFB) | the server is thinking — a slow query, a cold start |
| Content download | the file is big, or the connection is slow |
The three metrics worth knowing
| Metric | Measures | Usually fixed by |
|---|---|---|
| LCP | when the largest element appeared | the critical path: fewer blocking resources, a smaller hero image |
| CLS | how much the layout jumped | width and height on images, space reserved for ads and banners |
| INP | how long the page took to respond to a tap | breaking up long tasks — the event loop lesson |
A development machine on a fast connection hides every problem in this lesson. Throttle to "Fast 3G" and a 4× slower CPU, and the ranking of what to fix changes completely.
What a fix looks like
Almost every network audit ends with the same short list: defer on the scripts, media on the stylesheets nobody needs immediately, hashed assets with a year of Cache-Control, one origin instead of five, redirects collapsed, and one API call instead of forty. None of it is clever. All of it is measurable before and after — which is the only part that matters.