How the Web Works
From URL to rendered page — DNS, HTTP, servers, browsers, and everything in between.
The 6-Step Journey of a Page Load
Every time you type a URL or click a link, a remarkable sequence of events unfolds in milliseconds. Understanding these steps helps explain why websites behave the way they do and why performance matters.
1. DNS Resolution
Your browser doesn't know where `example.com` actually lives. DNS (Domain Name System) translates human-readable domain names into IP addresses (like 93.184.216.34). Your device queries a DNS server, which may consult multiple other servers to find the answer.
Typical time: 50–300ms (cached: 1–10ms)
2. TCP Connection (Handshake)
Now your browser knows the IP address. It opens a TCP (Transmission Control Protocol) connection with the server—a three-step handshake that establishes a reliable communication channel. This is why network latency (distance between you and the server) directly impacts load time.
Typical time: 50–500ms (influenced by geography)
3. TLS Negotiation (for HTTPS)
If the site uses HTTPS (which it should), the browser and server perform a TLS (Transport Layer Security) handshake to encrypt the connection. This adds another round-trip to the server. Modern protocols like TLS 1.3 have optimized this, but it still costs time.
Typical time: 0–200ms (already included in HTTP/3)
4. HTTP Request
The browser sends an HTTP request to the server: "GET /index.html HTTP/1.1" along with headers (cookies, user-agent, etc.). This request travels across the network to the server.
Typical time: latency one-way
5. Server Processing & HTTP Response
The server receives the request, processes it (queries a database, runs application logic), and sends back an HTTP response with the HTML, status code (200 OK), headers, and body. The time spent here varies enormously—simple static pages are instant, but database queries can add seconds.
Typical time: 10ms–2000ms+ (depends on backend complexity)
6. Browser Rendering & Additional Requests
The browser parses the HTML, builds the DOM (Document Object Model), and begins rendering. It discovers linked CSS and JavaScript files, images, fonts, and makes additional HTTP requests for each. CSS blocks rendering, JavaScript can block parsing. The browser applies styles, renders the page, and executes JavaScript, which may fetch more data asynchronously.
Typical time: 100ms–5000ms+ (depends on asset complexity)
HTTP/2 and HTTP/3: Faster Protocols
HTTP/1.1 (released in 1997) required a new TCP connection for each file request, creating a "waterfall" of requests. Modern protocols fix this:
- HTTP/2:Multiplexes requests over a single connection, allowing the browser to request CSS, JavaScript, and images simultaneously. Supported by most modern servers since 2015.
- HTTP/3 (QUIC):Replaces TCP with UDP-based QUIC, eliminating the TCP handshake overhead. Reduces initial connection time and handles network transitions (switching from WiFi to mobile) more gracefully. Still rolling out but increasingly standard.
Caching: The Hidden Speedup
Caching stops requests before they happen. It exists at three levels:
Browser Cache
Your browser stores CSS, JavaScript, images, and other files locally based on cache headers (Cache-Control, Expires). Subsequent visits skip the network entirely for these files.
CDN / Edge Cache
Content Delivery Networks (CDNs) cache files at data centers around the world. Requests are served from the nearest location, reducing network latency dramatically.
Server-Side Cache
The application caches database results, rendered HTML, or computed data (Redis, Memcached) to avoid redundant work for every request. A database query result cached in Redis can be retrieved in microseconds instead of milliseconds.
Why This Matters for Cost and Performance
Understanding this journey shapes every decision in web development:
- Server location matters: A server closer to your users reduces step 2 (TCP) and 3 (TLS) latency. This is why CDNs and edge compute exist.
- File size impacts rendering: Large JavaScript or CSS files slow step 6. Minification, tree-shaking, and lazy loading reduce these.
- Database queries are expensive: Step 5 can dominate. Caching, indexing, and query optimization are critical for scale.
- Bandwidth vs. latency: You can download a 10MB file quickly, but you can't eliminate the 300ms round-trip to a distant server. Protocols, CDNs, and edge functions target latency.
- Caching compounds savings: Effective caching can eliminate 5 of the 6 steps on repeat visits. This is the fastest optimization available.