Frontend Performance Metrics-FCP

FCP (First Contentful Paint) is one of the web performance metrics used to measure page loading performance. It represents the moment when the browser begins to render the first meaningful content on the page (i.e., text, images, SVG, etc.), typically providing the first visual feedback when users start seeing visible content. Unlike FMP (First Meaningful Paint), FCP focuses on the first rendering of content on the page, regardless of its significance to users.

Definition of FCP

FCP measures the time from when a user initiates a page request (i.e., navigation starts) until the first content element (such as text, images, or SVG elements) is painted on the screen. It measures page response speed, particularly the time it takes for the browser to display the first piece of content while users wait for the page to render.

Meaningful content includes:

• Text on the page

• Images

• SVG elements

• Canvas content, etc.

In the loading timeline shown above, FCP occurs in the second frame, as this is when the first text and image elements are rendered to the screen.

You’ll notice that while some content has been rendered, not all content is present. This is an important distinction to make between First Contentful Paint and Largest Contentful Paint (LCP), which aims to measure when the main content of a webpage has finished loading.

To provide a good user experience, sites should strive to have a First Contentful Paint time of 1.8 seconds or less. To ensure you’re reaching this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

Methods to Measure FCP

There are several different ways to measure FCP, which we’ll discuss below.

PageSpeed Insights

PageSpeed Insights  (PSI) is a free online tool provided by Google that analyzes webpage loading performance and provides optimization suggestions. It primarily helps developers and site owners improve web page user experience by evaluating page load speed and responsiveness. PageSpeed Insights uses multiple performance metrics and data to help users understand page loading processes and provides recommendations for improving web page performance.

Simply open the tool’s website and enter the website you want to analyze.

Measuring FCP in JavaScript

To measure FCP in JavaScript, you can use the Paint Timing API. The following example shows how to create a PerformanceObserver that listens for paint entries named first-contentful-paint and logs them to the console.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({ type: 'paint', buffered: true });

Warning: This code shows how to log first-contentful-paint entries to the console, but measuring FCP in JavaScript is more complex. Continue reading to learn more.

In the code snippet above, the logged first-contentful-paint entry will tell you when the first contentful element was painted. However, in some cases, this entry isn’t suitable for measuring FCP.

The following sections list the differences between what the API reports and how the metric is calculated.

Differences between the metric and API:

1. The API will dispatch first-contentful-paint entries for pages loaded in background tabs, but these pages should be ignored when calculating FCP (First Paint times should only be considered if the page was in the foreground the entire time).

2. The API does not report first-contentful-paint entries when pages are restored from the back/forward cache, but FCP should be measured in these cases since users experience them as distinct page visits.

3. The API may not report paint times from cross-origin iframes, but to properly measure FCP you should consider all frames. Subframes can use the API to report their paint times to the parent frame for aggregation.

4. The API measures FCP from the navigation start time, but for prerendered pages, FCP should be measured from activationStart since this corresponds to when the user actually experiences FCP.

Developers don’t need to remember all these nuances. Instead, they can use the web-vitals JavaScript library to measure FCP, which handles these differences for you (where possible; note that the iframe issue is not covered):

import { onFCP } from 'web-vitals';
 
// Measure and log FCP as soon as it's available.
onFCP(console.log);

You can refer to the source code for onFCP()  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 pay attention to any specific optimization opportunities or diagnostics it suggests.

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

• Eliminate render-blocking resources 

• Minify CSS 

• Remove unused CSS 

• Remove unused JavaScript 

• Preconnect to required origins 

• Reduce server response times (TTFB) 

• Avoid multiple page redirects 

• Preload key requests 

• Avoid enormous network payloads 

• Serve static assets with an efficient cache policy 

• Avoid an excessive DOM size 

• Minimize critical request depth 

• Ensure text remains visible during webfont load 

• Keep request counts low and transfer sizes small 

References

• First Contentful Paint (FCP) 

Summary

FCP primarily measures the time it takes for users to see the first visible content when loading a page. It is closely related to page loading performance, and optimizing FCP can significantly improve the initial user experience. By reducing render-blocking resources, optimizing font and image loading, and other techniques, you can improve the FCP metric and thus speed up page response times.