First Contenful Paint

The First Contentful Paint (FCP) metric measures when content first starts appearing on a page. This means the user has something useful to look at, usually text or an image.

FCP contrasts with the overall First Paint (FP), which occurs even if the browser is only rendering empty boxes.

Performance filmstrip showing an example with First Paint, First Contentful Paint, and Largest Contentful Paint

You can find the FCP at the top of the top of the Lighthouse Performance section.

Lighthouse First Contentful Paint

What causes a slow First Contentful Paint, and how can you improve it?

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 downloaded and executed before any page content starts to show.

First Contentful Paint delayed by render-blocking scripts

On a positive note, this website also doesn't have any long request chains. You can see a CSS file is loaded from Google Fonts. After loading the CSS file the actual font file needs to be fetched.

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.

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.

Reduce server response time

Stylesheets and JavaScript files are static resources, and can 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.

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 significant rendering delays. On the flipside, rendering content on server also reduces processing time in the browser and avoid unnecessary network roundtrips.

Read more about improving server response time.

Do background images count as content?

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

How to access the FCP value for the current page

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

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

How does First Contentful Paint affect the Lighthouse performance score?

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

FCP subscore Max FCP (Mobile) Max FCP (Desktop)
100 1.3s 0.5s
90 2.3s 0.9s
50 4.0s 1.6s
10 6.9s 2.7s

These graphs shows how a given FCP value maps to its Performance subscore:

First Contentful Paint scoring in Lighthouse

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 150ms, so the minimum FCP you can achieve is 600ms. 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 on DebugBear

You can find the First Contentful Paint metric as well as the Lighthouse Performance score on the page dashboard.

First Contentful Paint front-end performance monitoring data


Still need help? Contact matt@debugbear.com for support.
DebugBear is a website monitoring tool built for front-end developers. Track performance metrics and Lighthouse scores in CI and production. Learn more.
© 2020 DebugBear Ltd