First Contentful Paint (FCP)
FCP is the moment the browser paints the first piece of content from the DOM: text, an image, an SVG or a non-white canvas. It’s the first sign to a visitor that something is happening.
FCP vs LCP
FCP marks the first content; LCP marks the main content. A page can have a fast FCP (a logo and navigation) and a slow LCP (the hero image arrives two seconds later). The gap between them tells you whether the problem is getting anything on screen at all, or getting the important thing on screen.
What delays FCP
- Slow TTFB. Nothing can paint before the HTML arrives.
- Render-blocking CSS and synchronous scripts in the
<head>. The browser won’t paint until they are downloaded and parsed. - Web fonts with
font-display: block(the default for many icon and brand fonts), which hide text for up to three seconds. - Client-side rendering. An empty
<div id="app">paints nothing until the JavaScript bundle downloads and runs.
Fixes
- Inline the critical CSS for above-the-fold content and load the rest asynchronously.
- Add
deferto scripts, or move them to the end of the body. - Use
font-display: swapand preload the one or two font files used above the fold. - Render HTML on the server (or prerender it) so content is in the first response.
- Cut TTFB with edge caching.
Check it on your own page
Field and lab numbers for mobile and desktop, in about 30 seconds.
Questions people ask
What is a good First Contentful Paint?
1.8 seconds or less at the 75th percentile. Over 3 seconds is poor.
Is FCP a Core Web Vital?
No, it is a supporting metric. It is reported in the Chrome UX Report and counts for 10% of the Lighthouse performance score.
Why is FCP fast but LCP slow?
The page paints something early (header, text) but the largest element, usually a hero image, is discovered or downloaded late. Check the LCP element and its load delay.