First Contentful Paint (FCP) measures the time it takes for the browser to visualize the first piece of DOM content (e.g., image, SVG, non-blank canvas element) on a page. According to PSI, that should happen in under 2 seconds. The Ideal First Contentful Paint Speed According to Google, the ideal FCP is not more than 1 second. Having this score gives your site guests a decent experience. If your FCP is more than 3 seconds, expect more than half of all mobile users to leave your site. Using these plugins to optimize images will help to improve First Contentful Paint in WordPress and lead to an overall decrease in page load speed. Summary First Contentful Paint is a measurement that Google uses to assess how quickly the first items on your page load when someone visits it.

1. Lcp Largest Contentful Paint
2. What Is First Contentful 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.

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

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

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.

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 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.

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 cause significant rendering delays. On the flipside, rendering content on the server also reduces processing time in the browser and avoids 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:

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.

Lcp Largest Contentful Paint

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

What Is First Contentful Paint

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.

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.