---
title: "What is first contentful paint (FCP)? · Unlighthouse"
canonical_url: "https://unlighthouse.dev/glossary/fcp"
last_updated: "2026-08-18T03:20:59.118Z"
meta:
  description: "FCP measures when the first content renders. Learn what it is, thresholds, and how to improve it."
  "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"
---

Star Unlighthouse on GitHubUnlighthouse on GitHub

[**User Guide **](https://unlighthouse.dev/guide/getting-started/installation)

[**Integrations **](https://unlighthouse.dev/integrations/cli)

[**API **](https://unlighthouse.dev/api-doc/config)

**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

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

Aim for a score of 1.8 seconds or less at the 75th percentile of page loads to pass the [**~~Google threshold~~**](https://web.dev/articles/fcp).

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

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

- 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

- 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/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/fcp.md) on GitHub or provide anonymous feedback below.

### **Related **

[**Largest Contentful Paint (LCP)**](https://unlighthouse.dev/glossary/lcp) [**Time to First Byte (TTFB)**](https://unlighthouse.dev/glossary/ttfb)

[**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)