Part 4 · 2 chapters · ~25 min

Network

Reading a waterfall by its phases rather than its bar lengths, the queueing and connection costs, TTFB versus download as two teams' halves of one bar, the Priority column and the inversions it reveals, throttling for network and CPU, the Size column as the cache verdict with headers as the reason, and blocking, replaying and HAR export.

13

Reading a waterfall

the columns
  1. Name (hover for the URL), Status, Type (document, stylesheet, script, fetch, img, font, websocket, manifest), Initiator (parser, a script line with a hoverable stack, a preload, a redirect), Size (transferred / resource: compressed on the wire versus decoded; or which cache answered), Time, Waterfall. Enable Priority, Protocol (h2, h3) and Connection ID from the header's context menu.
the bar is phases, not length
  1. Queueing (grey): waiting for a connection slot (HTTP/1.1 caps six per origin) or for higher-priority requests; Stalled; DNS, Initial connection, SSL (only on the first request to an origin, or after idle); Request sent; Waiting for server response (TTFB, green: the backend plus a round trip; the client cannot shorten it); Content Download (blue: bytes over bandwidth; compression, format and size shorten it).
  2. Hover the bar for the breakdown; click → Timing for numbers and the Server-Timing phases if the backend sends the header.
  3. A long grey head on many bars at once is the connection cap or a priority inversion, not slow network. A font from a second origin shows DNS, TCP and SSL where same-origin requests show none; preconnect moves them earlier.
lines, overview, filters
  1. Blue line: DOMContentLoaded; red: load. Requests after red were started by scripts or lazy loading.
  2. The overview strip is the whole session; drag to zoom. Filters: by type; a text filter with negation and properties (larger-than:100k, is:from-cache, domain:, has-response-header:, -type:img); "Hide data URLs"; "Third-party requests".
  3. Two settings change what you measure: Disable cache (every request fetches while DevTools is open) and the throttling dropdown.
go to the lab
  1. /network/third-party: find the fonts.gstatic.com request and read its Timing: DNS, TCP and SSL before the bytes. Enable preconnect, reload, and read it again.
  2. /nav/slow-server: click the slow link and read "Waiting for server response" at 1,500 ms; nothing else in the bar matters. Then hover the prerender link for a second, click, and find the navigation in Application → Speculative loads.
  3. /parse/sync-script-in-head: open the chunked page with Network recording. Find the image and stylesheet requests starting before the 400 ms script finishes: the preload scanner at work. Their Initiator says "parser" with a preload scanner note.
READING A WATERFALL
the columns, the bar, and what the Timing tab says that the bar does not
swipe the figure sideways, or tap expand for full screen
1/6
columns
The columns: Name (hover for the full URL), Status (with "(from disk cache)", "(from memory cache)", "(from service worker)", "(prefetch cache)" in the Size column rather than a fetch), Type (document, script, stylesheet, fetch, img, font, websocket), Initiator (what caused it: the parser, a script line, a preload, a redirect; hover for the stack), Size (transferred / resource: "2.1 kB / 48 kB" means compressed on the wire), Time, Waterfall.
14

Priorities, throttling and the cache

priority
  1. The browser assigns a fetch priority from type, position and hints (the Browser course part 1) and schedules connections and HTTP/2 streams by it: Highest for the document, head CSS and fonts in use; High for sync head scripts, preloads and fetchpriority="high" images; Medium for body-end scripts, async scripts and viewport images; Low for off-screen and lazy images and prefetches; Lowest for speculative loads. Hover the column for initial → final.
  2. The inversion: the LCP image at Low behind thumbnails at Medium, or a critical fetch behind analytics at High. The fix is a hint (fetchpriority, preload, defer, async) or HTML order; confirm in the column before measuring.
throttling
  1. Presets (Fast 4G, Slow 4G, 3G) and custom profiles (download, upload, latency) slow transfer and add latency; they do not slow the CPU. The Performance panel's CPU throttle does that. Slow 4G plus 4× CPU approximates a mid phone; fast fibre with no throttle shows the backend alone. A custom profile matching your field p75 is the honest preset.
the cache
  1. The Size column is the verdict: (memory cache): this session, free; (disk cache): a read, no request; (prefetch cache); (service worker): the fetch handler answered from Cache Storage; 304: a request went out and came back empty, the cost of no-cache or a stale max-age; a full size: a fetch.
  2. The headers are the reason: Cache-Control, ETag, Last-Modified, Vary, Age (a CDN served it) on the response; If-None-Match, If-Modified-Since, Cache-Control: max-age=0 (a reload) on the request. The Browser course part 1 has the rules.
  3. Disable cache is for one cold-load measurement and must be turned off afterwards; leaving it on makes every other measurement wrong.
blocking, replaying, exporting
  1. Right-click → Block request URL or domain to see what the page does without a resource; the Network request blocking drawer keeps patterns. Overrides (part 3) serve a local file. Copy as fetch / cURL reproduces a request outside the browser; Replay XHR repeats it.
  2. Save all as HAR with content exports the session; Import HAR loads one. A HAR from the user's machine is the trace you cannot otherwise get; ask for it.
go to the lab
  1. /network/cold-vs-warm: with the server running and Disable cache off, load the assets, then click "load again" and read Size for each of the four directives: immutable and max-age=60 from memory or disk; no-cache as a 304; no-store as a full 200. Open the headers of each and match directive to verdict.
  2. /network/no-cache-everything: reload the server page three times and count the 304s with the filter status-code:304.
  3. /images/lcp: enable the Priority column; switch between the three variants and reload each; read the hero's priority and its position in the waterfall.
  4. Block fonts.googleapis.com on /network/third-party and reload: the page renders in the fallback font with no delay. That is what font-display: optional would have given on a slow link.
PRIORITIES, THROTTLING AND THE CACHE
the Priority column, the throttling presets, and what the Size column says about caching
swipe the figure sideways, or tap expand for full screen
1/6
priority
Priority: the browser assigns each request a priority from its type, position and hints, and schedules connections and HTTP/2 streams by it. Highest: the HTML, CSS in the head, fonts in use; High: scripts in the head (sync), preloads, fetchpriority=high images; Medium: scripts at the end of body, async scripts, images in the viewport; Low: images outside the viewport, lazy images, prefetch; Lowest: prefetch and speculative. The column shows the final priority (hover for initial → final, which changes when an image enters the viewport).