---
title: "What is first contentful paint (FCP)?"
description: "FCP measures when the first content renders. Learn what it is, thresholds, and how to improve it."
canonical_url: "https://unlighthouse.dev/glossary/fcp"
last_updated: "2026-08-10T04:33:21.546Z"
---

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

<table>
<thead>
  <tr>
    <th>
      Score
    </th>
    
    <th>
      Rating
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      ≤ 1.8s
    </td>
    
    <td>
      Good
    </td>
  </tr>
  
  <tr>
    <td>
      1.8s - 3.0s
    </td>
    
    <td>
      Needs Improvement
    </td>
  </tr>
  
  <tr>
    <td>
      > 3.0s
    </td>
    
    <td>
      Poor
    </td>
  </tr>
</tbody>
</table>

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

<table>
<thead>
  <tr>
    <th>
      Metric
    </th>
    
    <th>
      Measures
    </th>
    
    <th>
      Question It Answers
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      FCP
    </td>
    
    <td>
      First content appears
    </td>
    
    <td>
      "Is anything happening?"
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/glossary/lcp">
        LCP
      </a>
    </td>
    
    <td>
      Largest content appears
    </td>
    
    <td>
      "Is the main content loaded?"
    </td>
  </tr>
</tbody>
</table>

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](/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/)

<note>

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

</note>