First Contentful Paint (FCP): Definition, Thresholds, Fixes

What is First Contentful Paint (FCP)?

First Contentful Paint (FCP) measures the time from when a page starts loading to when the browser renders the first piece of DOM content: text, an image, a non-blank canvas, or an SVG. It is the first moment a visitor sees that something is happening, so it is a key signal of perceived loading speed.

FCP is a Lighthouse and field-data (CrUX) metric. It is not itself a Core Web Vital, but it is diagnostic for the loading Core Web Vital, Largest Contentful Paint (LCP): a slow FCP almost always means a slow LCP, because nothing large can render before the first content does.

FCP thresholds

Field data reports FCP at the 75th percentile of real users, so a page is rated good only when 75% of visits paint first content in 1.8s or less.

What contributes to FCP time

• Time to First Byte (TTFB). Nothing renders until the server responds. A slow backend caps how fast FCP can ever be.
• Render-blocking resources. Synchronous CSS and JavaScript in the head must download and parse before the browser paints.
• Resource load time. Large CSS bundles and blocking fonts push the first paint later.
• Client-side rendering. On single-page apps the first contentful paint waits for the JavaScript bundle to download, parse, and run.

How to measure FCP

JavaScript API

// Capture FCP in real user sessions
new PerformanceObserver((list) => {
  for (const entry of list.getEntriesByName('first-contentful-paint')) {
    console.log('FCP:', entry.startTime);
  }
}).observe({ type: 'paint', buffered: true });

Tools

How to improve FCP

1. Reduce TTFB

Use a CDN, cache responses, and keep origin response times low. Server time is the floor under FCP.

2. Eliminate render-blocking resources

Defer non-critical CSS and add defer or async to scripts so the browser can paint without waiting for them.

3. Inline critical CSS

Put above-the-fold styles in a <style> tag in the head so the first paint does not wait on an external stylesheet.

4. Preconnect to required origins

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

5. Minify and compress

Minify CSS and JavaScript and serve them with Brotli or gzip to cut download time before the first paint.

6. Avoid font-blocked text

Use font-display: swap so text paints immediately with a fallback font instead of waiting for the web font.

FCP vs other paint metrics

FAQ: First Contentful Paint

What is a good FCP score?

1.8 seconds or less at the 75th percentile of users. 1.8s to 3s needs improvement, and above 3s is poor.

Is FCP a Core Web Vital?

No. The Core Web Vitals are LCP, INP, and CLS. FCP is a supporting loading metric in Lighthouse and CrUX that helps diagnose a slow LCP.

How is FCP different from LCP?

FCP marks the first content of any size, often a logo or navigation. LCP marks the largest element, usually the hero image. Improving FCP usually improves LCP too.

Why is my FCP slow?

The usual causes are a slow server response (TTFB), render-blocking CSS or JavaScript, and blocking web fonts. PageSpeed Insights shows which one dominates.

Test FCP from real regions with LoadFocus

LoadFocus runs Lighthouse audits from 25+ global regions and shows real-user field data, so you can see how FCP varies by geography and network. Sign up free at loadfocus.com/signup.

Related: Largest Contentful Paint · Interaction to Next Paint · Cumulative Layout Shift · Time to First Byte · check your real-user Core Web Vitals · how to improve Core Web Vitals.