FCP (First Contentful Paint)
FCP measures the time from navigation to when the browser renders the first DOM content. Target: under 1.8 seconds.
§ 1 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.
§ 2 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.
§ 3 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.
§ 4 Optimization
Minimize render-blocking CSS. Optimize TTFB. Preload key resources. Use server-side rendering. Avoid large CSS files.
§ 5 Note
§ 6 In code
<style>body{margin:0}.header{display:flex}</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">§ 7 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.
§ 8 Thresholds
| Rating | FCP Threshold |
|---|---|
| Good | ≤ 1.8 s |
| Needs Improvement | 1.8 s - 3.0 s |
| Poor | > 3.0 s |
- First visible DOM content.
- Target: ≤ 1.8 s at p75.
- Different from FP and LCP.
- Minimize blocking CSS and scripts.
Atomic Glue optimizes FCP by analyzing the CRP and inlining critical CSS. Web Development services.
Get in touchFCP 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.