What is FCP? First Contentful Paint (FCP)

First contentful paint (FCP) is the measurementPerceived loading speedFCP is an important user-centric metric because it marks the point in the page load timeline when a user first sees anything on the screen. A fast FCP helps reassure users that something is happening.conduct.

What is FCP?

The First Contentful Paint (FCP) metric measures the time it takes for a page to start loading and for any part of the page content to finish rendering on the screen. For this metric, "content" refers to text, images (including background images),

In the loading timeline above, FCP occurs on frame two because that is when the first text and graphic elements finish rendering on the screen.

You'll notice that while some content has finished rendering, not all content has finished rendering.firstContent Paint (FCP) and*Largest Contentful Paint (LCP)* (which is designed to measure when the main content of the page has finished loading).

What is a good FCP score?

To provide a good user experience, sites should strive to keep the first contentful paint within1.8 secondsor less. To ensure that you are hitting the recommended target for the majority of your users’ visits, a good measurement threshold is75th percentile, and this threshold applies to both mobile and desktop devices.

How to measure FCP

FCP can belaboratoryMeasure oractualMeasured and can be used in the following tools:

Measurement tools

Laboratory Tools

Measuring FCP in JavaScript

To measure FCP in JavaScript, you can useDrawing Timing APIThe following example shows how to create aPerformanceObserverto listen for a paint entry named first-contentful-paint and log it to the console.

In the example above, the recordedfirst-contentful-paintThe entry tells you when the first content element is drawn. However, in some cases, this entry cannot be used to measure FCP.

The following sections list the differences between what the API reports and how the metrics are calculated.

Differences between indicators and APIs

The API dispatches for pages loaded in background tabsfirst-contentful-paintentries, but these pages should be ignored when calculating FCP (first paint timing should only be considered if the page is always in the foreground).
When the page passesRoundtrip CacheWhen resuming, the API does not reportfirst-contentful-paintentries, but FCP should be measured in these cases because this is multiple different page visits for the user.
API Paint timings in cross-origin iframes may not be reported, but to measure FCP correctly, you should consider all frames. Child frames can use the API to report the drawing timing of these frames to the parent frame for aggregation.

Instead of having to remember all these nuances, developers can useweb-vitals JavaScript libraryto measure LCP, the library handles these differences itself (where possible):

import {getFCP} from 'web-vitals'; // Measure and record as soon as FCP is available. getFCP(console.log);

You can refer to the source code of getFCP() for a complete example of how to measure FCP in JavaScript.

How to Improve FCP

To learn how to improve FID for a specific site, you can run a Lighthouse performance audit and look at the specific options the audit recommends.Chanceordiagnosis.

To learn about common ways to improve FCP (for any site), see the following performance guides:

score