First Contentful Paint (FCP) measures when the first piece of content appears on screen—any text, image, or graphic. While not a Core Web Vital, FCP helps you understand the early loading experience and diagnose LCP issues.
FCP thresholds
Rating | Score | What it means |
Good | ≤ 1.8s | Content appears quickly |
Needs Improvement | 1.8s – 3.0s | Visitors wait noticeably before seeing anything |
Poor | > 3.0s | Page feels slow to start |
FCP vs LCP
Metric | What it measures | Example |
FCP | First piece of content | Header, navigation, background color |
LCP | Largest content element | Hero image, product image |
FCP tells you when the page stops looking blank. LCP tells you when the main content is ready. A page can have good FCP but poor LCP if the header loads fast but the main image takes longer.
How FCP helps diagnose LCP
If FCP and LCP scores are similar, your main content loads shortly after initial content—good.
If there's a large gap between FCP and LCP:
The page structure loads fine, but main content is delayed
Look for large images, lazy-loaded hero content, or render-blocking resources
Understanding the FCP detail page
The FCP detail page shows:
P75 score card: Your 75th percentile FCP
FCP distribution: Histogram showing how FCP values are spread
FCP timeline: Score over time with comparison to the previous period
FCP rating over time: Daily breakdown of Good/Needs Improvement/Poor
FCP by country: Geographic performance map
Top and poorest pages: Identify which pages are slowest to show first content
Common FCP issues
Render-blocking resources CSS and JavaScript in <head> that must load before anything displays. Defer non-critical scripts.
Slow TTFB FCP can't happen until the server responds. If TTFB is poor, fix that first.
Web font delays Text may be invisible until fonts load. Use font-display: swap to show fallback fonts immediately.
Related articles