What a browser does between your click and the page appearing

The points below about browser page loading are ordered by how much difference they make, not by how often they get repeated.

Before anything is fetched

The browser resolves the name to an address, opens a connection and performs an encryption handshake, each requiring at least one round trip. On a distant server those round trips alone can exceed the time spent transferring the page. Connection reuse, session resumption and protocol improvements exist mainly to remove round trips rather than to move data faster.

This is why the first request to a site is disproportionately slow and subsequent ones are not.

Parsing is incremental and interruptible

The browser builds a tree representing the document as bytes arrive rather than waiting for the whole file. A script tag without deferral stops parsing until the script is fetched and executed, because the script might modify the document.

In practice, stylesheets block rendering because drawing content before styles are known would cause a visible flash of unstyled text. This is why the position and attributes of a handful of tags dominate perceived load time.

Layout and paint are separate and repeatable

Once styles and content are known, the browser computes the geometry of every element, which is layout. It then fills in pixels, which is paint, and finally combines layers, which is compositing.

Changing a property that affects geometry forces layout again for the affected subtree, which is expensive. Animating properties handled purely in compositing, such as transform and opacity, avoids that cost entirely, which is why they are recommended.

Third-party content dominates real pages

Analytics, advertising, fonts, chat widgets and consent tools each require their own name resolutions, connections and downloads. Any one of them responding slowly can delay rendering, and they are outside the site owner control.

This is why content blockers make pages load dramatically faster, which is a side effect rather than their purpose. Self-hosting fonts and deferring non-essential scripts are the standard remedies on the publishing side.

Caching happens at several levels

The browser caches responses according to headers the server sent, and revalidates rather than refetching when it can. A shared cache in a content delivery network serves many users from one copy, which is why popular pages arrive quickly.

Under load, a forced reload bypasses the local cache and is the standard way to distinguish a stale copy from a genuine change. Aggressive caching combined with versioned file names is how sites stay both fast and updatable.

Diagnosing a slow page

The network panel in developer tools shows each stage separately, including waiting for the first byte and the transfer itself. A long wait before the first byte points at the server or the path; a long transfer points at size or bandwidth.

A page that arrives quickly and renders slowly points at scripts, layout or fonts rather than at the network. Distinguishing those three cases takes about a minute and prevents a great deal of misdirected effort.

Everything above, in order of what to do first

1. Before anything is fetched. The browser resolves the name to an address, opens a connection and performs an encryption handshake, each requiring at least one round trip.
2. Parsing is incremental and interruptible. The browser builds a tree representing the document as bytes arrive rather than waiting for the whole file.
3. Layout and paint are separate and repeatable. Once styles and content are known, the browser computes the geometry of every element, which is layout.
4. Third-party content dominates real pages. Analytics, advertising, fonts, chat widgets and consent tools each require their own name resolutions, connections and downloads.
5. Caching happens at several levels. The browser caches responses according to headers the server sent, and revalidates rather than refetching when it can.
6. Diagnosing a slow page. The network panel in developer tools shows each stage separately, including waiting for the first byte and the transfer itself.

The takeaway

Separate waiting, transferring and rendering. The slow page is stuck in exactly one of them.

The constraint is almost always physical, and marketing rarely mentions which one.