Critical rendering path

The HTML arrives and parsing begins, building the document structure incrementally as bytes come in.

A stylesheet reference pauses rendering: styles must be fetched and parsed before anything can be painted, because painting without them would show unstyled content and then rearrange it.

A classic script tag pauses parsing entirely, because the script may write into the document at that point.

Once styles and blocking scripts are resolved, layout is computed and the first paint happens.

Everything else — images, deferred scripts, fonts already having a fallback — happens around this rather than inside it.

Stylesheets in the head, all of them, regardless of whether the styles apply to what is visible.

Scripts without a defer or async attribute, which pause parsing at their position in the document.

Imports inside stylesheets, which are discovered only after the parent stylesheet is parsed and are therefore serialised.

Not images, which do not block the first paint even though they are frequently the heaviest thing on the page.

Not deferred scripts, which is why adding one attribute is often the single largest rendering improvement available.

A browser can only fetch what it knows about. A resource referenced inside a stylesheet is discovered after that stylesheet arrives and parses.

A resource requested by a script is discovered after the script downloads and runs, which can be several round trips into the load.

So a small, late-discovered resource can delay rendering more than a large one referenced in the initial HTML.

This is what preload declarations exist for, and why an accurate one on a genuinely late-discovered critical resource is worth more than several speculative ones.

It is also why a font referenced only from CSS is a classic late-discovery case.

Adding defer to scripts that do not need to run during parsing, which is nearly all of them.

Reducing what the initial stylesheet contains, or inlining the styles needed for the visible area and loading the rest asynchronously.

Removing stylesheet imports in favour of separate references, so they are discovered in parallel.

A font-display value that renders text with a fallback rather than waiting, which turns a blocking wait into a swap.

Not bundling more into fewer files, which is the instinct that no longer pays now that connections are reused.

Resources that potentially block rendering are identified from the served markup and their position in it.

Stylesheet and script payloads are measured separately, since the two block in different ways.

Preload, preconnect and prefetch declarations are compared against the resources and origins really used.

Time to first byte is measured separately, because a slow server delays the whole path before any of this begins.