First Contentful Paint (FCP)

First Contentful Paint (FCP) is a metric that measures the time from when a page starts loading to when the browser renders the first piece of content.

FCP metric: the first display of content on the page.

Think of FCP as the metric of first impressions, landing somewhere between the backend time (TTFB metric) and the loading of the largest element (LCP metric). Unlike these metrics, FCP is not part of the Core Web Vitals.

For FCP, “content” includes text, images (including CSS background images), <svg> elements, or non-white <canvas> elements.

Why is FCP important?#

Measuring FCP is vital because the first display of content shapes the user's initial perception of a website's speed.

A swift FCP indicates that the site is operational and will soon display the anticipated content, boosting user satisfaction and potentially enhancing SEO​.

What are the ideal FCP values?#

The ideal FCP is under 1.8 seconds.

We recommend keeping the FCP value as low as possible, ideally under 1.8 seconds for all page types on mobile devices and desktops. Google also champions this target.

How can you measure FCP#

There are several ways to obtain the FCP metric for your website or specific page.

Chrome Extension “Web Vitals”#

By using the extension directly in the browser, you can determine the FCP value for individual pages of your site. In the console, you can find more information on which parts of FCP to focus on for potential optimization. Largely, FCP is influenced by backend speed (the TTFB metric).

The Web Vitals extension brings various detailed insights to the browser console.

Read more about measuring speed directly in the browser.

Google User Data (CrUX)#

With PageSpeed Insights or our tester app.pagespeed.cz, you can determine the FCP metric value for each URL individually or gather data for the entire domain.

PageSpeed.ONE Monitoring#

In monitoring PLUS, we not only show the current FCP value for individual URLs or the entire domain, but we also use graphs to depict how the metric has changed over time.

FCP Metric in app.Pagespeed.cz.

We have data from both users (CrUX) and synthetic measurements (synth). (See various types of web speed measurements.)

Using the Watchdog, we then show ongoing daily changes in the synthetic FCP value and other metrics, sending notifications.

How to optimize FCP#

Optimizing the FCP metric involves several key steps. It's essential to base actions on data from measurement tools. Let's explore some common opportunities to enhance FCP.

Shorten server response time#

Optimize the backend (the TTFB metric) for faster download and processing of the HTML document. The quicker the browser processes the HTML document, the sooner it can start downloading and processing critical resources for the first display of content.

Minimize render-blocking resources#

Reduce the number and total size of CSS files, web fonts, and JavaScript files needed to render the first content.

Break up CSS into smaller parts. Ideally, load only those CSS styles that are necessary on the page.

If the first content display doesn't rely on JavaScript (in frameworks like Nuxt.js, Vue.js, React, Next.js, etc.), process all JavaScript files asynchronously.

Use as few cuts and types of web fonts as possible. Apply the CSS property font-display:swap to show fallback fonts before the main ones load.

Utilize Server Side Rendering (SSR)#

If your site uses a JavaScript framework, always aim to have the first content already in the basic HTML document. This way, you don't have to wait for JavaScript to download and process.

Use lazy loading to defer non-critical resources#

Delay the download of images or JavaScript files for elements not visible in the initial viewport. For images, employ lazyloading.

For a deeper understanding of these optimization techniques, we recommend exploring available tools and guides, such as those on web.dev, which provide specific advice and steps to improve the FCP metric.