Above the fold

Viewport heights vary from a few hundred pixels on a small phone to well over a thousand on a desktop monitor.

Browser chrome, toolbars and on-screen keyboards change the available height on the same device.

Orientation changes it by a factor of two on a phone.

So designing to a specific fold line produces a layout that is wrong on most devices. What survives is the principle: the first screen, whatever its size, should be useful.

The styles needed to render the first screen are the critical CSS — the subset worth inlining so that the first paint does not wait for a stylesheet.

The images in the first screen must be fetched eagerly, and the largest of them is usually the Largest Contentful Paint element.

Everything below can be deferred: lazy-loaded images, asynchronously loaded styles, scripts that run after parsing.

The split is what turns a general instruction to make the page faster into a specific list of resources to prioritise.

It also decides which fonts matter: a font used only in a footer can load with any strategy, while one used in the first heading is on the critical path.

Enough to tell a visitor they are in the right place: what this page is, and what they can do next.

Not a full-screen image with no text, which scores well on loading metrics and communicates nothing.

Not a consent banner covering the content, which is what a large share of visitors actually sees first and is a genuine usability question independent of any metric.

Content, not a spinner. A skeleton screen is better than a blank page and worse than the real thing.

Test at several viewport sizes, starting with a small phone. The device toolbar in the browser's developer tools makes this quick.

Identify which images fall in the first screen at each size and ensure those are not lazy-loaded.

Extract the critical CSS from the first screen at a representative mobile width, since that is the constrained case.

Check what is actually visible with a consent banner displayed, which is the state most first-time visitors are in.

Remember that the first screen is not the same as the first screen of content: a fixed header, a notification bar and a cookie banner can consume half of a phone viewport before the page itself begins.