FCP (First Contentful Paint)
FCP measures the time from navigation to when the browser renders the first DOM content. Target: under 1.8 seconds.
Definition
FCP marks when the user first sees content on screen. It answers 'Is it happening?' FCP differs from First Paint (FP, which can be a background color). FCP requires actual DOM content: text, images, SVG, canvas, or video. It differs from LCP in that FCP tracks the first piece of content, not the largest.
FCP vs FP vs LCP
FP fires when any pixel is drawn. FCP fires when that pixel is content. LCP fires when the largest content element renders. A white background triggers FP but not FCP.
Common Misunderstandings
FCP is NOT Time to Interactive. A page can have fast FCP but be unresponsive because JS is parsing. Optimizing for FCP at the expense of LCP is an anti-pattern.
Optimization
Minimize render-blocking CSS. Optimize TTFB. Preload key resources. Use server-side rendering. Avoid large CSS files.
Note
In code
<style>body{margin:0}.header{display:flex}</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">Common questions
- Q. Does FCP include whitespace?
- A. No. Only actual DOM content triggers FCP.
- Q. Can FCP be good but LCP bad?
- A. Yes. If a tiny element renders fast but the hero image is slow.
Thresholds
| Rating | FCP Threshold |
|---|---|
| Good | ≤ 1.8 s |
| Needs Improvement | 1.8 s - 3.0 s |
| Poor | > 3.0 s |
Key takeaways
- First visible DOM content.
- Target: ≤ 1.8 s at p75.
- Different from FP and LCP.
- Minimize blocking CSS and scripts.
At a glance
- Measures
- First content
- Target
- ≤ 1.8 s
- Part of
- Web Vitals
- Type
- Field & Lab
Sources
How Atomic Glue helps
Atomic Glue optimizes FCP by analyzing the CRP and inlining critical CSS. Web Development services.
Get in touchUnderlined terms have their own entry. Selecting one shows it on the map below.
Atomic Glue. "FCP (First Contentful Paint)." Glossary.atomicglue.co/glossary/fcp-first-contentful-paint
How FCP (First Contentful Paint) connects
FCP measures the time from navigation to when the browser renders the first DOM content. Target: under 1.8 seconds.
Definition
FCP marks when the user first sees content on screen. It answers 'Is it happening?' FCP differs from First Paint (FP, which can be a background color). FCP requires actual DOM content: text, images, SVG, canvas, or video. It differs from LCP in that FCP tracks the first piece of content, not the largest.
FCP vs FP vs LCP
FP fires when any pixel is drawn. FCP fires when that pixel is content. LCP fires when the largest content element renders. A white background triggers FP but not FCP.
Common Misunderstandings
FCP is NOT Time to Interactive. A page can have fast FCP but be unresponsive because JS is parsing. Optimizing for FCP at the expense of LCP is an anti-pattern.
Optimization
Minimize render-blocking CSS. Optimize TTFB. Preload key resources. Use server-side rendering. Avoid large CSS files.
Note
Target: ≤ 1.8 s (p75). Also available as a field metric via PerformanceObserver.
In code
<style>body{margin:0}.header{display:flex}</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">
Common questions
Q: Does FCP include whitespace?
A: No. Only actual DOM content triggers FCP.
Q: Can FCP be good but LCP bad?
A: Yes. If a tiny element renders fast but the hero image is slow.
Thresholds
Rating: Good, FCP Threshold: ≤ 1.8 s
Rating: Needs Improvement, FCP Threshold: 1.8 s - 3.0 s
Rating: Poor, FCP Threshold: > 3.0 s
Key takeaways:
First visible DOM content.
Target: ≤ 1.8 s at p75.
Different from FP and LCP.
Minimize blocking CSS and scripts.