What Is First Contentful Paint

When First Contentful Paint Happens

First contentful paint (FCP) is the time it takes for the browser to render the first piece of content from the page, such as text, an image or an SVG graphic. It marks the moment the visitor sees that something is happening, even if the page is not yet useful.

Before the first contentful paint, the screen may show a blank page or only the browser's own background. FCP is a loading milestone, not a measure of completeness. It tells you that rendering has started, not that the page is ready to read or use.

How FCP Differs From LCP

FCP is often confused with Largest Contentful Paint (LCP). FCP records the first content to appear, which may be a small logo or a heading. LCP records when the largest content element in the viewport appears, which is usually later and is a better sign that the main content has loaded.

A page can have a fast FCP and a slow LCP if the first thing that appears is small and the main image arrives late. FCP is useful for spotting a blank screen, but it does not show whether a visitor can read the page yet.

What Typically Delays the First Paint

The browser cannot paint anything until it has enough information to draw. Common delays include a slow server response, which means the HTML has not yet arrived, and render-blocking stylesheets, which the browser waits for before painting. Scripts in the head that must download and run before the page continues can delay it as well, and text may wait for a web font in some browsers.

Each of these holds back the start of rendering. The sequence of steps the browser follows is described in the critical rendering path topic, and the server side of the delay in the time to first byte topic.