Back to the catalog

Network waterfalls: request stages, preload hints and HTTP/2

29 questions

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

  1. Not answered. Reading one request bar from left to right, which order of stages is correct?
  2. Not answered. One request has a long Stalled segment, and another has a long Waiting (TTFB) segment. What's the difference?
  3. Not answered. style.css is a static file with no server-side logic, but its Waiting (TTFB) segment is long. What does that suggest?
  4. Not answered. A 12 KB JSON response has a long Content download segment. What are the two most likely causes?
  5. Not answered. A request's bar starts at Waiting, with no Queued, DNS, Initial connection or TLS segments before it. What could explain that?
  6. Not answered. TTFB is the server's processing time plus how many network round trips?
  7. Not answered. How do a memory cache hit, a disk cache hit and a 304 Not Modified response usually differ in the waterfall?
  8. Not answered. In this waterfall, why doesn't icons.woff2 start downloading until both index.html and app.css have finished?
  9. Not answered. script7.js and script8.js stay Stalled for a long time before anything else happens. Why?
  10. Not answered. The same eight scripts load again, this time over HTTP/2. What changed?
  11. 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?
  12. Not answered. A page loads its only stylesheet with a plain <link rel="stylesheet"> in <head>. Which changes would stop it from blocking rendering?
  13. Not answered. Three scripts load with different attributes. Which one pauses the HTML parser both while it downloads and while it runs?
  14. 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?
  15. Not answered. This request ends with a 200, but three small bars come before it. What are they, and what do they cost?
  16. Not answered. Comparing block and swap in this font-loading timeline, which statements are true?
  17. 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?
  18. Not answered. What's the practical difference between preconnect and dns-prefetch?
  19. Not answered. When is preconnect worth adding?
  20. Not answered. Which resource hint fetches a resource at high priority without running or applying it?
  21. Not answered. What is prefetch for, and at what priority does it run?
  22. Not answered. Why does a JavaScript module graph benefit from modulepreload more than from a single preload tag?
  23. Not answered. An <img> tag has fetchpriority="high". What does that attribute change?
  24. Not answered. Which of these uses of resource hints hurt performance?
  25. Not answered. HTTP/2 multiplexes many requests over one connection. What problem does multiplexing NOT solve?
  26. Not answered. Where does head-of-line (HOL) blocking happen in each of these?
  27. 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?
  28. 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?
  29. Not answered. Which statements about an HTTP/2 waterfall with many requests over one connection are true?