Skip to content

How to improve First Contentful Paint (FCP)

Speed1 min readFixes 2 checks fcp, crux-fcp

FCP is the moment the first text or image appears. Under 1.8 s feels instant. Slow servers and render-blocking CSS and fonts push it out.

Step by step, with screenshots: First Contentful Paint and Speed Index: what they measure and what moves them →

Check your own site

Runs these 2 checks and the other 191, free, in about 45 seconds.

Or run only this check with the free Core Web Vitals checker, the free Core Web Vitals history or the free Bulk PageSpeed Insights.

What it is

First Contentful Paint (FCP) is the time from when a visitor starts loading a page to when the browser draws the first text, image, SVG or non-white canvas. Until then they look at a blank screen and cannot tell whether the site is working.

Google rates FCP as good at 1.8 s or less, needs improvement up to 3 s and poor above 3 s, at the 75th percentile of real visits. FCP is not a Core Web Vital, but it sets the floor for LCP, because the largest element cannot appear before the first one. getReport shows the lab FCP from Lighthouse and, when Google has enough data, the real-user FCP from the Chrome UX Report.

What a passing site looks like

  • First Contentful Paint: passesfail · −10 ptseffort M
  • Real-user First Contentful Paint: passesinfo onlyeffort M

1. First Contentful Paint

Why it matters. FCP is when the first text or image appears. Until then visitors see a blank page and cannot tell whether the site is working.

How to fix it.
  1. Speed up the server response and remove redirects before the page.
  2. Inline critical CSS and defer the rest; drop render-blocking scripts from <head>.
  3. Serve the HTML compressed (Brotli or gzip) from a CDN close to your visitors.

2. Real-user First Contentful Paint

Why it matters. When real visitors first see something on screen. Google's threshold for "good" is 1.8 s at the 75th percentile.

How to fix it.
  1. Remove render-blocking resources and speed up the server; see the FCP finding above.

Questions people ask

How do I improve First Contentful Paint on WordPress?

Start with page caching, so the server sends ready-made HTML instead of building each page. Then reduce what blocks the first paint: combine or defer plugin CSS and JavaScript, load fonts with font-display: swap and remove plugins that add code to every page. Good hosting close to your visitors, or a CDN, cuts the wait before anything can render.

How do I improve First Contentful Paint?

Make the server answer fast and send less before the first paint. Keep Time to First Byte under 800 ms with caching or a CDN, inline the small amount of CSS needed for the first screen and load the rest without blocking, defer scripts, and make sure text shows while web fonts load. Each render-blocking file adds at least one network round trip.

Is First Contentful Paint a Core Web Vital?

No. The Core Web Vitals are Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift. FCP is a supporting metric: Lighthouse gives it 10 % of the performance score, and a slow FCP almost always means a slow LCP too, so fixing it helps the vitals Google uses.

What is a good First Contentful Paint time?

1.8 s or less is good, 1.8 to 3 s needs improvement and over 3 s is poor, measured at the 75th percentile of real visits. A Lighthouse mobile test simulates a mid-range phone on a slow 4G connection, so it is stricter than most real visits. Anything under about 1 s feels instant to visitors.

Filed under Speed & Core Web Vitals. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.