The journey of a web page: watch it load, step by step
You press Enter and, a fraction of a second later, a page appears. In between, your computer has a short conversation with machines that may be thousands of kilometres away. In this lesson you’ll learn the five steps of that conversation, then watch every one of them happen in your own browser.
In this lesson
- The five steps between pressing Enter and seeing a page
- How to open your browser’s developer tools and watch them, with timings
- Why one web page is really dozens of separate downloads
You’ll need: a computer with Chrome, Edge or Firefox. On a phone? Read along: mobile browsers don’t include these tools, but every step is described so you know what you’d see.
Five steps between Enter and the page
Every time you open a website, the same sequence runs. It happens so fast that it feels like one event, but there are five separate jobs, and each one can be the reason a page is slow or doesn’t load at all.
- Find the addressDNS turns the name into an IP address
- ConnectYour browser opens a line to that address
- Secure the lineBoth sides agree on encryption
- AskThe browser requests the page
- Receive and buildThe server answers; the browser fetches the rest
1. Find the address
Your browser knows the name, examineip.com, but networks don’t deliver data to names. They deliver it to numbered addresses. So the first job is to ask a DNS server which IP address belongs to that name. If your computer asked recently, it remembers the answer and skips this step entirely, which is one reason a site you visit every day opens faster than a new one.
2. Connect
With the address in hand, your browser opens a connection to it. For a secure website that connection goes to port 443, the numbered “door” a server uses for HTTPS. A quick exchange of three short messages, called the handshake, confirms that both sides are ready before any real data moves.
3. Secure the line
Before anything private crosses the network, your browser and the server agree on encryption keys, and the server proves who it is with a certificate. Your browser checks that the certificate really belongs to the name you typed. This is what the padlock beside the address means (Chrome now shows a small settings-style icon in its place, with the same meaning): the connection is encrypted and the certificate matches the site’s name. It does not mean the site itself is honest. Scam sites get padlocks too.
Newer websites can use a version of the web called HTTP/3, which combines steps 2 and 3 into one faster exchange. The jobs are the same; there’s just less waiting.
4. Ask
Now the browser sends the actual request. In plain words it says: “Please send me the page at this address”, along with some details about itself, such as which browser it is and which languages you prefer.
5. Receive and build
The server answers with a status code (200 means “OK, here it is”) and the page’s HTML: the text and structure of the page. Your browser reads it and finds every image, stylesheet, font and script the page mentions, then requests each one of those as well, usually over the connection it already has open. Only when enough of those have arrived does the page appear on your screen.
Try it yourself
Watch a page load in your browser’s developer tools
Every desktop browser has built-in tools for web developers. You don’t need to be one to use them, and you can’t break anything by looking.
- Open a new tab and go to
examineip.com. - Open the developer tools: press F12, or Ctrl + Shift + I on Windows and Linux, or Cmd + Option + I on a Mac. A panel opens beside or below the page.
- Click the Network tab at the top of that panel. It’s probably empty, because it only records while it’s open.
- Reload the page: press F5, or Cmd + R on a Mac. Rows start pouring in. Every row is a separate download the page needed.
- Look at the bar at the very bottom of the panel. It shows how many requests the page made, and how much data was transferred.
- Scroll back to the top and click the first row, the one named after the page itself. In the Headers section, find the Status Code and the Remote Address. That address is where your browser actually connected: step 1’s answer and step 2’s destination. The
:443on the end is the HTTPS port. - Now open the Timing tab for that same row (in Firefox it’s called Timings). You’re looking at the five steps, measured in milliseconds.
Matching the timings to the five steps
The browsers use slightly different names, but they all measure the same journey:
| Step | Chrome and Edge | Firefox |
|---|---|---|
| 1. Find the address | DNS Lookup | DNS Resolution |
| 2. Connect | Initial connection (includes setting up encryption) | Connecting |
| 3. Secure the line | TLS Setup | |
| 4. Ask | Request sent | Sending |
| 5. Receive | Waiting for server response (older versions say Waiting (TTFB)), then Content Download | Waiting, then Receiving |
Which step takes longest depends on the site. Connecting and securing the line each need at least one trip across the network and back, so a server far away shows up there. Waiting includes the server’s own work in putting the page together, so a slow or busy server shows up there instead. When we ran this on our own homepage, connecting and encryption took about 90 milliseconds together, the DNS lookup about 10, and the wait for the server about 40.
What the status codes mean
Every row in the Network tab has a status code. You’ll mostly meet these four:
| Code | What it means |
|---|---|
| 200 | OK. The server sent what was asked for. |
| 301 or 302 | Moved. The file lives at a different address now, and the browser follows it there automatically. |
| 304 | Not modified. Your browser’s saved copy is still up to date, so nothing was downloaded again. |
| 404 | Not found. The server is working, but there’s nothing at that address. |
Why one page means dozens of downloads
The first response is only the page’s skeleton. The HTML says “put this image here, use this font, load this script”, and each of those is a separate request. A simple page may need a handful; a busy news site can need hundreds, many of them from other companies’ servers, such as ads, analytics and embedded videos. Our own homepage, which is fairly simple, made about 50 requests to several different servers, including ones for fonts and visitor statistics.
That’s also why a page often loads faster the second time: your browser kept copies of files that rarely change, like logos and stylesheets, and only checks whether they’re still current. Those checks are the 304s you may have spotted.
One more thing you might notice: the Remote Address doesn’t always belong to the company whose site you’re visiting. Many sites, this one included, are delivered through a content delivery network: a set of servers spread around the world that keep copies of the site close to visitors. The address you connected to is often one of those.
Key takeaways
- Opening a page is five jobs: find the address, connect, secure the line, ask, and receive.
- DNS comes first. Without an address, nothing else can happen.
- The padlock means the connection is encrypted and the certificate matches the name, not that the site is trustworthy.
- One web page is many downloads: the HTML, then every image, font and script it lists.
- You can watch all of it in the Network tab of your browser’s developer tools.
Check yourself
Three questions. Pick one answer each and you’ll see why.
1. You open a website for the first time. What has to happen before your browser can connect to it?
2. What does the padlock next to a web address (or the icon Chrome shows in its place) tell you?
3. In the Network tab, a request shows status 304. What happened?
Want the background in more depth? Read How Websites Actually Work, the full explainer this lesson builds on.