Short answer: First Contentful Paint (FCP) is the time from when someone starts loading a page until anything from it appears on screen: text, an image (background images too), an svg or a canvas that isn’t white. A good FCP is 1.8 seconds or less, and over 3 seconds is poor.
How FCP differs from LCP
FCP marks the first content that appears, even if most of the page is still missing. LCP waits for the largest element, which is usually the main content. So a page can have a fast FCP and a slow LCP: something shows up quickly, but what the visitor came for arrives later.
The clock starts before your server answers. Unloading the page the visitor was on, opening the connection and following redirects all count. Those steps can add a lot in real visits, which is why field and lab numbers often differ.
Good, middle and poor FCP
The Web Vitals scale on web.dev is the same for mobile and desktop. Lighthouse, a lab tool, colors its result with that scale on mobile and a stricter one on desktop.
| Scale | Good | Middle | Poor |
|---|---|---|---|
| web.dev, for field data | 1.8 seconds or less | 1.8 to 3 seconds | Over 3 seconds |
| Lighthouse on mobile | 0 to 1.8 seconds, green | 1.8 to 3 seconds, orange | Over 3 seconds, red |
| Lighthouse on desktop | 0 to 0.9 seconds, green | 0.9 to 1.6 seconds, orange | Over 1.6 seconds, red |
From web.dev, “First Contentful Paint (FCP)”, and Chrome for Developers, “First Contentful Paint”, read November 3, 2026.
Lighthouse tracks FCP as one of the six metrics in its Performance section. It turns the time into a score from 0 to 100 by comparing it with real sites in the HTTP Archive: for example, an FCP of 1.2 seconds scores 99.
How to speed up FCP
- Run Lighthouse on the page and start with the opportunities and diagnostics it lists.
- Remove or defer the CSS and JavaScript that block rendering.
- Minify your CSS and remove the CSS and JavaScript the page doesn’t use.
- Lower your server response time and avoid chains of redirects.
- Preconnect to the origins you need and preload key requests.
- Keep text visible while web fonts load.
- Keep requests few and small, and cache static files.
Our guides to PageSpeed Insights and TTFB go deeper into steps 1 and 4, and the one on Largest Contentful Paint covers what comes after the first paint.
FCP on our own pages
Our test: two runs of the PageSpeed Insights mobile test on each of 4 pages, on November 3. On the home page, the SEO services page and the robots.txt guide, FCP and LCP were identical in every run: 1.1 to 2.0 seconds on the home page and 1.2 on the other two. The first thing painted was already the largest.
The blog index was the exception: FCP 1.2 to 2.0 seconds, LCP 2.9 to 6.2. Its largest element is the newest article’s photo, which paints after the first text. Our page builder was lazy-loading that photo until we changed the setting the same morning. The wait before the browser requests it fell from about 1.5 seconds to under 0.2.
Lighthouse listed 1 request blocking the first render on the home page, which carries its styles inside the HTML. On each of the other three, which load 18 stylesheets, it listed 19. Lab results also move between runs: the home page gave 1.1 seconds in one and 2.0 in the other, so we compare several runs before drawing conclusions.
Before you call your FCP fast
- You checked FCP in field data, not only in a lab test.
- No CSS or JavaScript blocks the first paint without need.
- Unused CSS and JavaScript are gone.
- The server answers fast, with no chain of redirects.
- Text stays visible while fonts load.
- Static files are cached.
RememberFCP tells you when the page stops looking blank, not when it’s ready. Read it next to LCP: if FCP is fast and LCP slow, the page shows something early but its main content late.
If your pages take long to show anything, our web design service can help.
Quick answers about FCP
What is a good FCP?
web.dev counts 1.8 seconds or less as good and more than 3 seconds as poor. Aim to meet it in three of every four page loads, checking mobile and desktop on their own.
What counts as content for FCP?
Text, images including background images, svg elements and canvas elements that aren’t white. Lighthouse’s version leaves out anything inside an iframe. So a page that only shows a background color hasn’t reached FCP yet.
Why is my FCP fast but my LCP slow?
Because the first content painted can be small, like a heading, while the largest element comes later. On our blog index, FCP was 1.2 to 2.0 seconds and LCP 2.9 to 6.2. The gap is the newest article’s photo, which paints after the first text.
Do web fonts affect FCP?
Yes. Lighthouse names font load time as an issue that matters for FCP in particular. Its advice is to keep text visible while web fonts load, so the first paint doesn’t wait for them.
Should I work on FCP or on the overall score?
Lighthouse suggests the overall Performance score, unless you have a reason to chase one metric. Its Diagnostics section shows which fixes would help your page most, and bigger opportunities move the score more.
Sources
Read on November 3, 2026. web.dev: First Contentful Paint (FCP). Chrome for Developers: First Contentful Paint. Our own case: two PageSpeed Insights mobile runs on 4 of our pages, November 3, 2026.