---
title: "What is First Contentful Paint (FCP)? · Unlighthouse"
meta:
  "og:description": "FCP measures when the first content renders. Learn what it is, thresholds, and how to improve it."
  "og:title": "What is First Contentful Paint (FCP)? · Unlighthouse"
  description: "FCP measures when the first content renders. Learn what it is, thresholds, and how to improve it."
---

**Glossary**

# **What is First Contentful Paint (FCP)?**

[Copy for LLMs](https://unlighthouse.dev/glossary/fcp.md)

First Contentful Paint (FCP) measures when the browser renders the first piece of content - text, image, SVG, or canvas element. It answers "is anything happening?" and contributes 10% to your Lighthouse score.

## [Thresholds](#thresholds)

| **Score** | **Rating** |
| --- | --- |
| ≤ 1.8s | Good |
| 1.8s - 3.0s | Needs Improvement |
| > 3.0s | Poor |

[**Google recommends**](https://web.dev/articles/fcp) 1.8 seconds or less for at least 75% of page visits.

## [FCP vs LCP](#fcp-vs-lcp)

| **Metric** | **Measures** | **Question It Answers** |
| --- | --- | --- |
| FCP | First content appears | "Is anything happening?" |
| [**LCP**](https://unlighthouse.dev/glossary/lcp) | Largest content appears | "Is the main content loaded?" |

A page can have fast FCP (spinner appears) but slow LCP (actual content takes longer). Both matter for UX.

## [Why It Matters](#why-it-matters)

FCP marks when users perceive the page is loading. Before FCP, they see only a blank screen. Fast FCP reassures users something is happening, reducing early abandonment.

## [Common Issues](#common-issues)

- Slow server response ([**TTFB**](https://unlighthouse.dev/glossary/ttfb))
- Render-blocking CSS/JavaScript
- Large CSS files blocking first paint
- Web fonts with `font-display: block`

## [Measure FCP](#measure-fcp)

- Chrome DevTools Performance panel
- Lighthouse audit
- [**PageSpeed Insights**](https://pagespeed.web.dev/)

FCP is a Lighthouse metric, not a Core Web Vital. Improving FCP typically improves [**LCP**](https://unlighthouse.dev/glossary/lcp), which is a Core Web Vital and ranking factor.

[Edit this page](https://github.com/harlan-zw/unlighthouse/edit/main/docs/glossary/fcp.md)

[Markdown For LLMs](https://unlighthouse.dev/glossary/fcp.md)

**Did this page help you? **

Anything that could be done better? :)

Help us improve this page. You can [edit this page](https://github.com/harlan-zw/unlighthouse/edit/main/docs/glossary/fcp.md) on GitHub or provide anonymous feedback below.

[**CLS** CLS measures visual stability. Learn what it is, thresholds, and how to prevent layout shifts.](https://unlighthouse.dev/glossary/cls) [**INP** INP measures responsiveness. Learn what it is, thresholds, and how to improve interaction speed.](https://unlighthouse.dev/glossary/inp)

**On this page **

- [Thresholds](#thresholds)
- [FCP vs LCP](#fcp-vs-lcp)
- [Why It Matters](#why-it-matters)
- [Common Issues](#common-issues)
- [Measure FCP](#measure-fcp)