First content rendering (FCP) is the measurementPerceived loading speedAn important user-centric metric because it marks the point in the page load timeline when a user first sees any content on screen, fast FCP helps reassure users that something things are going onconduct.
What is FCP?
In the loading timeline above, FCP occurs on the second frame because that's when the first text and image elements finish rendering on the screen.
You'll notice that while some content has finished rendering, not everything has finished rendering. This isfirstContent Painting (FCP) and*Largest Contentful Paint Largest Contentful Paint (LCP)* (designed to measure when the main content of the page has finished loading).
What constitutes a good FCP score?
In order to provide a good user experience, websites should strive to control the first content draw to1.8 secondsor below. To ensure that you hit the recommended target value during the majority of user visits, a good measurement threshold is the page load75th percentile, and this threshold applies to both mobile and desktop devices.
How to measure FCP
FCP is availablelaboratorymeasure oractualMeasure and can be used in the following tools:
Measurement tools
- PageSpeed Insights Page Speed Measurement Tool
- Chrome User Experience Report
- Search Console (Speed Report
- web-vitals JavaScript library
lab tools
Measuring FCP in JavaScript
To measure FCP in JavaScript you can useDraw timing API. The following example shows how to create aPerformanceObserverto listen for the paint entry named first-contentful-paint and log it in the console.
In the example above, the recordedfirst-contentful-paintThe entry tells you the point at which the first content element was drawn. But in some cases, this entry cannot be used to measure FCP.
The following sections list the differences between what the API reports and how metrics are calculated.
Difference between Metrics and API
- The API is distributed for pages loaded in background tabsfirst-contentful-paintentries, but these pages should be ignored when calculating FCP (first draw timing should only be taken into account if the page is always in the foreground).
- When the page passesround trip cacheOn restore, API does not reportfirst-contentful-paintentry, but FCP should be measured in these cases as this is a multiple different page visit experience for the user.
- API Draw timings in cross-domain iframes may not be reported, but to properly measure FCP you should consider the case for 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 FCP, the library handles these differences itself (where possible):
import {getFCP} from 'web-vitals';
// Measure and log as soon as FCP becomes 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 FCP for a specific site, you can run a Lighthouse performance audit and keep an eye out for any specific changes the audit recommends.Chanceordiagnosis.
To learn about common ways to improve FCP (for any website), see these performance guides:
- Eliminate render-blocking resources
- Minify CSS
- Remove unused CSS
- Pre-connected to required source
- Reduce server response time (TTFB)
- Avoid multiple page redirects
- Preload critical requests
- Avoid huge network load
- Serve static assets using efficient caching strategies
- Avoid DOM being too large
- Minimize critical request depth
- Ensure text remains visible during web font loading
- Keep request counts low and transfer sizes small
