First Contentful Paint: FCP
First contentful paint is the initial visual part when measuring website speed. FCP is part of the six frontend performance metrics measured by PageSpeed Insight using Lighthouse. It impacts customer experience and SEO so you should measure and optimize for a fast FCP.
What does first contentful paint (FCP) mean?
First contentful paint basically means the time before the user can see the first images and fonts rendered on your website. Technically it is when the browser renders the first part of the HTML (DOM or Document Object Model) including text, images, svgs and other visual elements. The rough concept is: if you can see the product name, image, description OR price of a product on an eCommerce website you can say that the page has a first contentful paint.
How to measure FCP
Measuring FCP is as simple as running PageSpeed Insight on the URL you want to measure. FCP is the first metrics that appears.
How to improve FCP
One tip to improve FCP is to make sure you are displaying text even while loading custom fonts. If you are using custom fonts you should make sure you are optimizing for fast web fonts.
