First Contentful Paint (FCP)
FCP marks when the browser first paints any text, image, SVG or non-white canvas — the first sign that the page is loading. It isn't a Core Web Vital itself, but it sets the floor for LCP. Good is 1.8 seconds or less.
What your FCP is made of
- TTFB 600 ms
- 2 blocking files (parallel) 230 ms
- Third-party origin setup 270 ms
- Layout + paint 60 ms
FCP ≈ 1.16 s good
How FCP works
FCP = time to first byte + time to download and process render-blocking CSS and JavaScript + time to lay out and paint the first frame with content.
Text hidden while a web font loads (font-display: block) does not count as painted, so fonts can delay FCP too.
On a waterfall, FCP can't happen before the "render unblocked" line — the moment the last blocking stylesheet or script finishes.
Common causes of a poor FCP
- High TTFB
- Nothing can paint before HTML arrives.
- Render-blocking resources
- Stylesheets and synchronous scripts in the head, especially on third-party origins.
- Invisible text during font loading
- font-display: block hides text for up to 3 s.
- Large DOM or heavy CSS
- The first layout and paint itself takes long on slow phones.
How to improve FCP
- Reduce TTFB with HTML caching and fewer redirects.
- Inline critical CSS and defer scripts.
- Use font-display: swap (or optional) and preload key fonts.
- Preconnect to required third-party origins.
See your page's request order, TTFB and render-blocking files in the waterfall speed test, or check the render-blocking resources on their own.
Enter your field numbers in the Core Web Vitals checker to see whether you pass.
FCP questions
What is a good FCP?
1.8 seconds or less is good, 1.8 to 3 seconds needs improvement, over 3 seconds is poor, according to web.dev's thresholds at the 75th percentile.
Is FCP a Core Web Vital?
No. The Core Web Vitals are LCP, INP and CLS. FCP is a supporting metric that helps diagnose LCP problems.
What is the difference between FCP and LCP?
FCP is when anything with content first paints (often a header or logo). LCP is when the largest element in the viewport paints. The gap between them is usually the hero image loading.