Skip to main content
Performance

First Contentful Paint

FCP

Portrait of Robert Klimant, co-founder of Roelu Studio
Robert KlimantCo-founder

What is First Contentful Paint?

First Contentful Paint (FCP) is a performance metric that measures the time from navigation to when the browser renders the first piece of DOM content — any text, image, SVG, or canvas. Google considers under 1.8 seconds good, 1.8 to 3 seconds needs improvement, and over 3 seconds poor. FCP is not a Core Web Vital but is reported in PageSpeed Insights and Lighthouse as a diagnostic signal.

Why it matters

FCP is the first visual signal that the page is alive. Until something paints, the visitor is staring at a white screen wondering if their click worked. The longer that white screen lasts, the more visitors abandon — especially on mobile, where attention is shorter. FCP is usually held back by render-blocking CSS and JavaScript in the document head. Every script loaded before the browser is allowed to paint is a script delaying FCP. Most scale-up sites we audit have three or four scripts in the head that could be deferred, lazy-loaded, or removed entirely. The result is a faster, less frustrating first impression.

How it works

The browser starts a timer at navigation and stops it the moment any content is painted. To improve First Contentful Paint, you minimise render-blocking resources — inline critical CSS, defer non-essential JavaScript, and self-host or preconnect to web fonts. Serving the HTML from a CDN edge close to the visitor trims hundreds of milliseconds off the round trip. On a static or server-rendered site behind a good CDN, FCP under 800 milliseconds is the norm. When FCP creeps over two seconds, the cause is almost always too much JavaScript in the critical path or a slow origin server with no caching.

Related terms

  • Largest Contentful Paint

    Performance

    The Core Web Vital that measures how long it takes for the biggest visible element on a page — usually the hero image or main headline — to finish loading in…

  • Core Web Vitals

    Performance

    Google's three benchmark metrics that measure how fast a page loads, how quickly it responds to clicks, and how stable the layout feels as it renders — used in…

  • Page Speed

    Performance

    How quickly a web page loads and becomes usable for a visitor — measured in seconds and milliseconds, and treated by Google as a confirmed ranking signal…

  • PageSpeed Insights

    Performance

    Google's free tool for measuring how fast a page loads on mobile and desktop, combining real-user field data with lab tests and offering specific, actionable…

  • Lighthouse Score

    Performance

    A 0–100 grade from Google's Lighthouse tool measuring a page's performance, accessibility, SEO, and best practices — used as a quick technical health check by…

  • Caching

    Performance

    Storing a copy of a page, image, or piece of data so it can be served instantly the next time it's requested — instead of regenerating it from scratch on every…