9 min
  • DNS
  • TCP/IP
  • SSL/TLS
  • HTTP

From a URL to pixels

Press Enter and nothing visible happens for a while. That while is not one operation, it is five, and the request for the page is only the fourth of them.

A URL is three parts and the browser uses each in a different stage:

text
https://www.example.com/index.html-----   ---------------  ----------scheme  host             path scheme -> which protocol, and therefore which port and whether TLS is involvedhost   -> the name to resolve into an addresspath   -> the only part the server is actually asked about

The host has to become a number before anything can be sent anywhere. The scheme decides whether a TLS handshake sits between the connection and the request. Only then does the path get mentioned at all.

Loading the Internet Simulator simulation…

Five stages, in order, each waiting on the last

StageWhat it producesRoughly what it costs
DNSAn address for the nameOne round trip, often cached
TCPAn open connectionOne round trip
TLSKeys, and an identityOne round trip on TLS 1.3
HTTPThe documentOne round trip plus the body
RenderPixelsWhatever the page asks for

The stages are strictly sequential and each one waits on the whole of the previous. That is why distance hurts so much: you do not pay the round trip once, you pay it three or four times before a single byte of HTML arrives — and the page then asks for a stylesheet, which starts the last two stages over again.

Check yourself
On a cold first visit to an HTTPS site, which happens first: the TLS handshake, or the DNS lookup?

The render stage is not the end of the network

Getting the HTML does not finish anything. The browser parses it, discovers a stylesheet, a font, some script and an image, and each of those is another request — some of which block the first paint until they arrive.

That is the shape of a modern page load: not one transfer, but a dependency tree of dozens of small ones, each of which waits for its parent to be parsed before it can even be requested.

Predict what happens next
The HTML arrives in 200 ms and references one stylesheet. When does the user see text?

Key takeaways

  • A page load is five sequential stages — DNS, TCP, TLS, HTTP, render — and the request is only the fourth.
  • Each stage consumes the output of the last, so none of the first four can be overlapped for a single host.
  • The URL is not one thing: the scheme decides the protocol, the host is resolved, and only the path is ever sent to the server.
  • Most of a cold page load is round trips rather than bytes, which is why distance dominates and bandwidth often does not.
  • The document arriving is not the end. Every resource it references restarts the last two stages.

Take it further