First Contentful Paint is one of six metrics that website owners can find in the Performance section in Lighthouse, it is not necessarily part of the Core Web Vitals, but we can learn a lot from it.
Definition of First Contentful Paint
FCP is how much time it takes for the browser to render a “human-perceived” DOM element. This could be an image, text-block or non-white canvas element on a web page. The difference between LCP here is the “human-perceived” aspect, as this is more user-centric than browser-focused.
This distinction focuses on when the user receives consumable information, which is a lot more valuable from a user experience perspective than when a background has changed or a style is applied.
Why the FCP Matters
In the image above, the FCP happens in the second image as that is when the first text and image elements are rendered on the screen.
A good First Contentful Paint can decrease the Bounce Rate and improve your Conversion Rate because, with an optimised FCP, there is less waiting time until a user can interact with the page. Furthermore, with fewer distractions, they are more likely to complete one of your website goals.
With a healthy FCP, users and more likely to stay on a web page, checkout, improve your brand perception, and strengthen your other Page Speed metrics at the same time due to their interconnectivity.
How to Optimise for First Contentful Paint
The most common causes of a slow FCP are render-blocking scripts and stylesheets. Commonly, some CSS files are inside the head element. One way around this would be to inline the CSS into the document HTML as a style tag. However, the downside is CSS files would need to be re-downloaded during every request rather than stored in the cache.
You may also see a recommendation to “reduce server response time” within Lighthouse that relates to FCP. I would suggest keeping your server’s response time below 600ms; you can check your server’s response time in the Chrome DevTools Network tab.
Slow server responses are more likely if the backend of your website is responsible for rendering the page content. For example, I have seen this be a problem on WordPress websites with lots of plugins as this tends to cause significant rendering delays. To combat this, rendering content on the server can reduce processing time in the browser and avoid unnecessary network roundtrips.
Tools for Measuring First Contentful Paint
Google lists the following as field tools for measuring First Contentful Paint:
Google lists the following as lab tools (with simulated data) for measuring First Contentful Paint:
