Lesson 5: Read a real page load from start to finish

Lesson objectives:

• Identify the document request in a Network panel log.
• Distinguish the document request from subresources.
• Explain the basic order in which a page loads.

Previous << 4 | Next 6 >>

A web page is a family of downloads, not just one

When you load a page, the first request is for the main HTML document. The browser then reads that document and discovers it needs more things: stylesheets, images, fonts, scripts. Each of those becomes another HTTP request. The extra requests are called subresources ¹.

Explanation

The document request

The first request is the document request. Its Type is usually document in the Network panel, and its Name is often the domain or index.html. The response body is the HTML page itself.

Subresources

Everything else is a subresource. The browser cannot finish rendering the page until it has enough of these. Common subresource types are:

• stylesheet — CSS files that control layout and color.
• script — JavaScript files.
• image — pictures.
• font — typefaces.

They do not all matter equally. Turning HTML, CSS, and JavaScript into pixels is a defined sequence called the critical rendering path, and a stylesheet sits on it: the browser will not paint final text it might have to restyle a moment later ². An image further down the page does not hold up first paint the same way. So a slow row in the list is not automatically a slow page — what matters is whether that row is on the path to the first paint.

The waterfall

The Network panel shows a waterfall column: a horizontal bar for each request that shows when it started and how long it took. The document request starts first; subresources start after the browser has parsed enough of the HTML to know it needs them ³.

Reading a waterfall means reading two things at once: bar length, which is how long one request took, and bar offset, which is when it was allowed to begin. A short bar that starts late is not a slow server — it is a dependency: the browser could not know it needed that file until it had parsed the HTML that mentions it ³. Bars that start together were fetched in parallel; a bar that begins exactly where another ends is serialized behind it.

This diagram shows the idea: the document request opens the door, and the subresources follow.

Worked example (follow along)

1. Open DevTools and the Network panel.
2. Visit https://example.com.
3. Look at the first row. It should be the document request, Type document, Status 200.
4. Look for the next few rows. If the page has images or stylesheets, you will see additional rows with Type image, stylesheet, or script.
5. Hover over the waterfall bars. The first bar starts at the left; the others start a little later.

Your turn (faded example)

In a Network panel log, how can you tell the main document request apart from a subresource?

Answer: the document request has Type document and is usually at the top of the list; subresources have types like image, script, or stylesheet.

Summary + what's next

A page load starts with one document request, then the browser parses the HTML and asks for subresources. The waterfall shows the timing. Next, you will learn what to say when a status code does not start with 2.