Network waterfalls: request stages, preload hints and HTTP/2
The network panel shows why your page is slow, once you know how to read it. This quiz walks through the bars: what each segment of a request means, which requests block rendering, and when an "optimization" only moves the delay further down the list.
Questions
- Not answered. Reading one request bar from left to right, which order of stages is correct?
- Not answered. One request has a long Stalled segment, and another has a long Waiting (TTFB) segment. What's the difference?
- Not answered. style.css is a static file with no server-side logic, but its Waiting (TTFB) segment is long. What does that suggest?
- Not answered. A 12 KB JSON response has a long Content download segment. What are the two most likely causes?
- Not answered. A request's bar starts at Waiting, with no Queued, DNS, Initial connection or TLS segments before it. What could explain that?
- Not answered. TTFB is the server's processing time plus how many network round trips?
- Not answered. How do a memory cache hit, a disk cache hit and a 304 Not Modified response usually differ in the waterfall?
- Not answered. In this waterfall, why doesn't icons.woff2 start downloading until both index.html and app.css have finished?
- Not answered. script7.js and script8.js stay Stalled for a long time before anything else happens. Why?
- Not answered. The same eight scripts load again, this time over HTTP/2. What changed?
- Not answered. hero.jpg is this page's LCP candidate, but its request starts long after index.html finishes downloading. What's the most likely cause?
- Not answered. A page loads its only stylesheet with a plain
<link rel="stylesheet">in<head>. Which changes would stop it from blocking rendering? - Not answered. Three scripts load with different attributes. Which one pauses the HTML parser both while it downloads and while it runs?
- Not answered. widget.js and app.js are about the same size, but widget.js has a much wider bar. What does the extra width show?
- Not answered. This request ends with a 200, but three small bars come before it. What are they, and what do they cost?
- Not answered. Comparing block and swap in this font-loading timeline, which statements are true?
- Not answered. A page's waterfall finishes in under a second, every request is fast and nothing is stalled. Yet the page still feels slow when you use it. What doesn't the waterfall show?
- Not answered. What's the practical difference between preconnect and dns-prefetch?
- Not answered. When is preconnect worth adding?
- Not answered. Which resource hint fetches a resource at high priority without running or applying it?
- Not answered. What is prefetch for, and at what priority does it run?
- Not answered. Why does a JavaScript module graph benefit from modulepreload more than from a single preload tag?
- Not answered. An
<img>tag hasfetchpriority="high". What does that attribute change? - Not answered. Which of these uses of resource hints hurt performance?
- Not answered. HTTP/2 multiplexes many requests over one connection. What problem does multiplexing NOT solve?
- Not answered. Where does head-of-line (HOL) blocking happen in each of these?
- Not answered. Domain sharding, spreading assets across asset1.example.com, asset2.example.com and so on, made pages faster under HTTP/1.1. Why does it usually make them slower under HTTP/2?
- Not answered. HTTP/2 Server Push let a server send resources before the browser asked for them. Most browsers have now removed it. What replaced it?
- Not answered. Which statements about an HTTP/2 waterfall with many requests over one connection are true?