HTTP requests: a click-along demo

Every time you click a link, your browser sends an HTTP request to a server, and the server sends back an HTTP response. Nothing here is hidden: this site is a handful of plain HTML files, and you can watch every single request happen.

Set up first (30 seconds)

  1. Press F12 (or Ctrl+Shift+I) to open Chrome DevTools.
  2. Click the Network tab.
  3. Tick Disable cache, so every request really goes to the server.
  4. Leave DevTools open, then click the links below and watch the list grow.

New to the Network tab? Start with How to read the Network panel.

The pages

PageWhat it showsRequests
How to read the Network panel The columns, and what they mean1
One image HTML first, then the picture2
Three images One request per picture4
An external stylesheet Not just images — CSS is fetched too2
A big image Size and time columns2
Cached images Requests the browser can skip3
Things that go wrong Status code 4042
Count the requests Predict before you click2
Words to know Request, response, status, header1
This page: 1 request. It is pure HTML with no pictures, so the browser asks for one file and is done.

Two things you might also spot