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.

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 ².

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.