Charts · 11

How a URL becomes a page

Between pressing return and seeing a page there is a name to resolve, a connection to open, keys to agree, a request to make, and only then the document, its stylesheet, its script, and the paint. Each step is a bar on one time axis, its length computed from the round-trip time you pick. On a slow link the waiting dwarfs the work; on a cheap phone the JavaScript dwarfs the waiting. This is the network sibling of the keypress chart.

Network
Protocol
DNS
JavaScript
CSS
Device

First paint at 403 ms, usable at 806 ms. Before the first byte of HTML arrives: 260 ms, all of it waiting.

  1. DNS lookup50
  2. TCP handshake50
  3. TLS 1.3 handshake50
  4. Request to first byte110
  5. HTML download (40 KB)16
  6. CSS (80 KB)82
  7. JavaScript (400 KB)210
  8. Style, layout, first paint45
  9. Parse, compile, run JavaScript320

Hover a bar

Bars start where their step starts and run for as long as it takes, on one time axis. Change the network and watch the connect steps stretch; change the device and watch the JavaScript bar stretch instead.

Notes

A model, not a measurement: DNS is one round trip unless cached; TCP is one; TLS 1.2 is two and TLS 1.3 one (RFC 8446); HTTP/3 over QUIC folds transport and TLS into one (RFC 9000); the first byte is one round trip plus 60 ms of server time; downloads are size over bandwidth; CSS blocks the first paint; JavaScript is parsed, compiled and run at a per-kilobyte cost by device class (0.25, 0.8 and 2.5 ms per KB, in the range Addy Osmani reports in The cost of JavaScript). Congestion windows, priorities, caching, preloading and the HTTP/1.1 connection limit are left out; they change the numbers, not the shape.

Sources: RFC 8446 (TLS 1.3), RFC 9000 (QUIC), RFC 9114 (HTTP/3); Addy Osmani, The cost of JavaScript (2018 to 2023); Ilya Grigorik, High Performance Browser Networking; HTTP Archive Web Almanac page weight medians.