SiteVitals

First Contentful Paint (FCP)

FCP is the moment the visitor first sees something other than a blank screen. Before it, they don’t know whether your page is even working.

Thresholds measured at the 75th percentile of page loads, per Google’s web.dev guidance.

What delays the first paint

The browser can’t paint until it has the HTML, and it won’t paint until it has every stylesheet in the <head> and has run every synchronous script there. Anything on that critical path pushes FCP back.

Toggle the fixes on a slow phone

First Contentful Paint ≈ 1.9 s → Needs improvement

Magenta bars block rendering: the browser won't paint until they finish. Simplified model of a mobile load with 600 ms server response; real pages have more files, but the rule is the same.

How to improve FCP

  1. Lower TTFB: FCP can never beat server response. Check it with the TTFB checker.
  2. Remove render-blocking resources: inline critical CSS and defer scripts (guide).
  3. Avoid invisible text: use font-display: swap so text shows in a fallback font while the web font loads.
  4. Avoid client-side-only rendering: a page that ships an empty <div id="app"> can’t paint until JavaScript downloads and runs. Server-render or prerender the first view.
  5. Keep the HTML light: huge inline JSON or SVG sprites in the head delay parsing.

Questions people ask

What is First Contentful Paint?

FCP is the time from navigation until the browser renders the first bit of content from the DOM: text, an image, a non-white canvas or an SVG. Background colours alone don’t count.

What is a good FCP?

For real users, 1.8 seconds or less at the 75th percentile is good and over 3 seconds is poor. Lighthouse’s mobile scoring curve uses the same 1.8 s for a score of 90.

Is FCP a Core Web Vital?

No, it is a supporting Web Vital. It carries 10% of the Lighthouse performance score and is a useful early warning: LCP can’t happen before FCP.

What’s the difference between FCP and LCP?

FCP is when anything appears (often the header or a logo); LCP is when the largest element appears. A big gap between them usually means the main image or text is discovered or loaded late.