Learn Measure Blog About

First Contentful Paint (FCP)

Updated
Philip Walton
Philip Walton

First Contentful Paint (FCP) is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening.

What is FCP?

The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images), <svg> elements, or non-white <canvas> elements.

FCP timeline from google.com

In the above load timeline, FCP happens in the second frame, as that's when the first text and image elements are rendered to the screen.

You'll notice that though some of the content has rendered, not all of it has rendered. This is an important distinction to make between First Contentful Paint (FCP) and Largest Contentful Paint (LCP) —which aims to measure when the page's main contents have finished loading.

How to measure FCP

FCP can be measured in the lab or in the field, and it's available in the following tools:

Lab tools

Field tools

Measure FCP in JavaScript

You can measure FCP in JavaScript using the Paint Timing API. The following example shows how to create a PerformanceObserver that listens for paint timing entries and logs the start time of the first-contentful-paint entry to the console:

// Create the Performance Observer instance.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntriesByName('first-contentful-paint')) {
// Log the value of FCP to the console.
console.log('FCP:', entry.startTime);
observer.disconnect();
}
});

// Start observing paint entry types.
observer.observe({
type: 'paint',
buffered: true,
});

Note, in your own code, you'd likely replace the console.log() with code that sends the FCP value to your analytics service.

What is a good FCP?

RAIL guidelines suggest that after 1000 milliseconds (ms), users may lose focus if nothing happens after performing a task. Since FCP is the first indication users have that something is happening, it's best if the majority of page loads report FCP is less than a second (1000 ms).

For field measurement: Page Speed Insights will report FCP as "fast" for values 1 second or less, "moderate" for values between 1 and 3 seconds, and "slow" for any values above 3 seconds.

For lab measurement: Lighthouse will give a perfect score (100) to an FCP value 1 second or less, and the score will go down as FCP gets slower. Refer to the Lighthouse scoring guide for more details.

How to improve FCP

To learn how to improve FCP for a specific site, you can run a Lighthouse performance audit and pay attention to any specific opportunities or diagnostics the audit suggests.

To learn how to improve FCP in general (for any site), refer to the following performance guides:

Last updated: Improve article