First Contentful Paint

Text, including text rendered in a fallback font while a web font is still loading.

Images, including background images and the poster frame of a video.

A canvas element that has been drawn to, and an SVG.

Not counted: a white or uniformly coloured background, an empty container, or anything not yet painted. A page that renders a blank styled shell has not achieved First Contentful Paint.

Text rendered in an invisible fallback while a font loads with a blocking strategy does not count either, which is why an aggressive font-loading policy can delay the metric by a second or more with nothing else changing.

First Contentful Paint is the first pixel of content; Largest Contentful Paint is the main content finished.

A large gap between them means the page shows something early and the substance arrives much later — a skeleton screen, or a hero image loading slowly.

A small gap with both values high means nothing renders until late, which points at the server or at render-blocking resources rather than at any one element.

Reading the two together is more informative than either alone, which is why performance reports show both.

Time to first byte, which every subsequent step waits on.

Render-blocking CSS in the head. The browser will not paint until it has constructed the style rules, so a large stylesheet delays everything.

Synchronous scripts in the head, which block parsing and therefore block rendering.

Web fonts loaded with a blocking strategy, which hold back text rendering for up to a browser-defined timeout.

Client-side rendering, where the first paint waits for the framework bundle to download, parse and execute.

PageSpeed Insights and the browser's Lighthouse panel both report it in a laboratory run, alongside the phases that contributed.

The Chrome User Experience Report includes it as a field metric, so real-visit data exists even though it is not a Core Web Vital.

In the performance panel, the FCP marker sits on the timeline and the waterfall above it shows exactly which resources were still outstanding.

Compare against time to first byte. First Contentful Paint minus time to first byte is the time the browser itself spent before painting, which is the part front-end work can change.

The Paint Timing API exposes it to page scripts directly, which is how real-user monitoring collects it without a third-party service.