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.
The most common cause of a slow FCP are render-blocking scripts and 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?
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.
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.
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.
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 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.
Yes, if a background image is rendered the paint will be considered contentful.
You can get the First Contentful Paint for current page from the Paint Timing API:
performance.getEntriesByName("first-contentful-paint").startTime; // 581.8749999743886
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)|
These graphs shows how a given FCP value maps to its Performance subscore:
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.
You can find the First Contentful Paint metric as well as the Lighthouse Performance score on the page dashboard.