Web performance meetupTalk 3 of 4
From URL to pixels
What your browser does in the few hundred milliseconds after you press Enter.
The journey
Five stops between Enter and paint
- Find the server DNS
- Open a connection TCP
- Make it private TLS
- Ask for the page HTTP
- Turn bytes into pixels Rendering
A page load is a chain of round trips.
Stop 1 · DNS
The name becomes an address
Local caches
The browser and the operating system check what they already know.
Recursive resolver
Usually your ISP or a public resolver does the lookup for you.
Root and TLD
They point the resolver to the servers responsible for the domain.
Authoritative server
It returns the IP address, which is cached for its TTL.
Stop 2 · TCP
Three messages, one round trip
Stop 3 · TLS
TLS 1.3 cut a round trip
TLS 1.2
- Two round trips to agree on keys
- More cipher suites to negotiate
TLS 1.3
- One round trip for a new connection
- Zero round trips when resuming (0-RTT)
Before the first byte of HTML
Round trips on a new HTTPS connection
4
TCP + TLS 1.2 + request
3
TCP + TLS 1.3 + request
2
HTTP/3 over QUIC: transport and TLS combined
Measure it yourself
The browser already records every stop
const [nav] = performance.getEntriesByType("navigation");
const dns = nav.domainLookupEnd - nav.domainLookupStart;
const tcp = nav.connectEnd - nav.connectStart;
const tls = nav.secureConnectionStart
? nav.connectEnd - nav.secureConnectionStart : 0;
const ttfb = nav.responseStart - nav.requestStart;
const load = nav.loadEventEnd - nav.startTime;
console.table({ dns, tcp, tls, ttfb, load });Stop 4 · HTTP
The status code tells the story
| Code | Meaning | What the browser does next |
|---|---|---|
| 200 | OK | Starts parsing the response |
| 301 | Moved permanently | Follows the new URL, and may remember it |
| 304 | Not modified | Uses its cached copy |
| 404 | Not found | Shows the server’s error page |
| 503 | Service unavailable | Shows the error; may retry later |
Stop 5 · Rendering
Bytes become pixels in five stages
DOMParse the HTML
CSSOMParse the styles
LayoutCompute geometry
PaintFill in pixels
CompositeAssemble layers
Myth: a faster connection always means a faster first visit.
Fact: on a first visit, waiting for round trips often costs more than downloading.
Spend fewer round trips
Start the work before it’s needed
Hints let the browser resolve and connect early.
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/app.css" as="style">Count the round trips.
- Try itRun the timing snippet on your own site
- ReadMDN: Navigation Timing
- Next talkCaching that actually works