Skip to main content

First Contentful Paint

First Contentful Paint (FCP) measures when content first starts appearing on a website. FCP is measured in milliseconds and used to assess the loading speed of a website.

This article explains how the First Contentful Paint is defined, and how to measure and optimize it.

What is First Contentful Paint?​

The First Contentful Paint metrics marks the rendering milestone where the user first has something useful to look at. Usually this means that text or an image have has rendered.

FCP stands in contrast to two other metrics measuring rendering progress:

  • First Paint marks the time when the page first starts rendering – unlike FCP this could be an empty box with no content
  • Largest Contentful Paint marks the time when the largest content element on a page is rendered

If all page content appears at the same time then these three metrics can have the same value. However, if they are different then the First Paint occurs before the First Contentful Paint, and the First Contentful Paint occurs before the Largest Contentful Paint.

This image shows the rendering progress an example website:

  1. At first only empty boxes are shown (First Paint)
  2. Then a logo appears at the top of the page (First Contentful Paint)
  3. Additional content appears, including a paragraph that's the largest page element (Largest Contentful Paint)

First Contentful Paint

Do background images count as content?​

Yes, if a background image is rendered the paint will be considered contentful.

Changes to how Largest Contentful Paint is defined​

Different versions of Chrome measure FCP slightly differently. Google keeps track of changes to the FCP definition here.

What is a good First Contentful Paint?​

Websites should have an FCP of 1.8 seconds or less.

While First Contentful Paint is not one of the Core Web Vitals that impact Google rankings, it is still one of Google's broader set of Web Vitals metrics.

FCP rangeRating
< 1.8 secondsGood
< 3.0 secondsNeeds Improvement
> 3.0 secondsPoor

How to optimize First Contentful Paint​

The most common cause of a slow FCP are render-blocking scripts and stylesheets.

Render-blocking stylesheets​

For example, take a look at this DevTools recording of the DebugBear homepage. What resources need to load before content starts to appear on the page?

  1. The HTML document
  2. Two CSS files

First Contentful Paint delayed by render blocking stylesheets

The two CSS files are render-blocking and placed in the document head element. You could avoid this by inlining the CSS directly into the document HTML as a style tag. However, this would mean re-downloading the CSS as part of every document request, rather than using the cache after the first visit.

In this case we only have three render-blocking resources. The longest request chain is 2 requests long, because both CSS requests are triggered at the same time and can be made in parallel. So overall the FCP in this example isn't too slow.

Render-blocking scripts​

This chart shows another website, this time for a site with multiple render-blocking scripts. All of these need to be loaded before any page content starts to show.

First Contentful Paint delayed by render-blocking scripts

This website does not require the loaded JavaScript code for the initial render, so the script tags could be moved further down in the HTML, for example to the end of the body tag. Moving the script tags there will ensure they are no longer render-blocking. Alternatively, you can add the async attribute to the script element.

If you're loading scripts on your website, keep in mind that they not just need to be downloaded, but also parsed, compiled, and executed.

Fonts and First Contentful Paint​

Web fonts are fonts that need to be downloaded before the text using that font is displayed. Accordingly, using web fonts will make FCP worse in most cases.

The website in the previous section loads a CSS file that then in turn loads a Google Font.

However, the browser doesn't block rendering until the font is loaded, thanks to the font-display: swap CSS property. This property means that if the font isn't available yet, then the browser uses a fall-back font instead. On Google Fonts you can achieve this by appending &display=swap to the CSS URL.

Reduce server response time​

Stylesheets and JavaScript files are static resources, and the server can usually provide a response quickly. However HTML or Ajax responses are generated dynamically, so the server can introduce a significant processing delay.

You can check the response time of your server in the DevTools Network tab. The entry is the request for the initial HTML document. In this case, the server took 2.2s to respond and in total the request took 2.7s from start to finish.

Server response time in Chrome DevTools

Try to keep your server's response time below 600ms to reduce First Contentful Paint.

Slow server responses are more likely if the backend is responsible for rendering the page content. For example, if you have a Wordpress site with lots of plugins this can cause significant rendering delays. On the flip side, rendering content on the server also reduces processing time in the browser and avoids unnecessary network round trips.

Read more about improving server response time.

How to measure First Contentful Paint​

There are many different tools that can measure FCP in different environments.

First Contentful Paint in PageSpeed Insights​

Google PageSpeed Insights can provide both aggregate data from real Chrome users and run one-off lab-based tests.

The number shown in the FCP section of the real-user data shows that 25% of users experienced an FCP worse than this value. In this example, this means 25% of user experiences had an FCP of 2.2 seconds or worse, while 75% of user experiences were faster than 2.2 seconds.

First Contentful Paint field data in PSI

If you click on Expand view you can see a more detailed breakdown of Good, Ok, and Poor experiences.

PSI FCP expanded view

When testing a page, PageSpeed Insights also runs a one-off test from a Google server. This allows them to provide additional debug information that's not available for the real-user metrics.

The lab-based data is also useful if the page you're testing doesn't receive enough traffic to provide real user metrics.

First Contentful Paint lab data in PSI

First Contentful Paint in Lighthouse​

You can find the FCP in the top left of the top of the Lighthouse Performance section.

First Contentful Paint in Lighthouse

To find opportunities to improve First Contentful Paint you can select FCP in the Show audits relevant to options.

Improve First Contentful Paint with Lighthouse

How does First Contentful Paint affect the Lighthouse performance score?​

In Lighthouse 9.1 the First Contentful Paint metrics accounts for 10% of the overall Performance score. This table shows the maximum FCP you'd need to achieve a certain subscore.

FCP subscoreMax FCP (Mobile)Max FCP (Desktop)
1001.0s0.5s
901.8s0.9s
503.0s1.6s
105.0s2.7s

The initial document request requires at least 4 network roundtrips on an HTTPS connection (DNS, TCP, SSL, and HTTP). Lighthouse simulates a roundtrip time of 150 milliseconds on mobile, so a perfect Lighthouse FCP would be 600 milliseconds.

This does not include your server response time or time the data spends travelling from your ISP to the website's data center.

On desktop Lighthouse uses a roundtrip time of 40s, so the minimum FCP would be 160ms.

First Contentful Paint in Chrome DevTools​

You can measure FCP in DevTools by creating a Performance recording.

FCP is marked in both the Timings lane and in the Web Vitals lane if you have it enabled. You can also see the rendering progress in the filmstrip.

First Contentful Paint in Chrome DevTools

Measuring First Contentful Paint programmatically​

You can get the First Contentful Paint for current page from the Paint Timing API:

performance.getEntriesByName("first-contentful-paint")[0].startTime;
// 581.8749999743886

First Contentful Paint on DebugBear​

You can find the First Contentful Paint and Lighthouse Performance score in the page Overview tab.

The Lighthouse tab also shows the full Lighthouse report.

First Contentful Paint front-end performance monitoring data

Use the project overview to view historical trends in the First Contentful Paint metric.

First Contentful Paint trendline data

DebugBear is a site speed monitoring service. Start tracking Lighthouse scores and Core Web Vitals in minutes.
Start monitoring your websiteGo to app