PERFORMANCE

Home › Glossary › Performance· 169 ·

FCP (First Contentful Paint)

/fɜːrst kənˈtɛntfəl peɪnt/abbr.

Filed underPerformanceSEO

In brief · quick answer

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

Target: ≤ 1.8 s (p75). Also available as a field metric via PerformanceObserver.

§ 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

Key takeaways

First visible DOM content.
Target: ≤ 1.8 s at p75.
Different from FP and LCP.
Minimize blocking CSS and scripts.

How Atomic Glue helps

Atomic Glue optimizes FCP by analyzing the CRP and inlining critical CSS. Web Development services.

Get in touch

# FCP (First Contentful Paint)

FCP measures the time from navigation to when the browser renders the first DOM content. Target: under 1.8 seconds.

Category: Performance (also: SEO)

Author: Atomic Glue Performance Team

## Definition

## 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.

## Related entries

Last updated July 2026. Permalink: atomicglue.co/glossary/fcp-first-contentful-paint