Glossary · Performance

FCP (First Contentful Paint)

FCP is the time from navigation start until the browser renders the first piece of DOM content, such as text, an image or a non-white canvas.

Updated October 6, 2026

FCP (First Contentful Paint) marks the first moment the browser paints any content from the DOM: text, an image, an SVG or a non-white canvas. It answers the visitor's first question, "is something happening?"

Why it matters

A blank screen makes people doubt that the page works. FCP is not a Core Web Vital, but it is a diagnostic companion to LCP and appears in Lighthouse. Google's guidance treats 1.8 seconds or less as good.

FCP is held back by what happens before paint: DNS, connection setup, server response (TTFB), and any render-blocking CSS or synchronous JavaScript in the head. The browser cannot paint until it has the CSS it needs.

Example

TTFB            600 ms
CSS download    +350 ms (render-blocking)
First paint of heading text -> FCP = 950 ms

Inlining the small amount of critical CSS and loading the rest asynchronously removes the 350 ms wait.

Common mistakes

  • Treating FCP as "page loaded". The main content may arrive much later.
  • Loading a large CSS framework synchronously in the head.
  • Hiding all text until a web font arrives, which delays the first text paint.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · PerformanceLCP (Largest Contentful Paint)LCP is the time from navigation start until the largest image or text block in the viewport finishes rendering, a Core Web Vitals loading metric.Glossary · PerformanceLighthouse ScoreThe Lighthouse performance score is a 0-100 rating computed from weighted lab metrics such as LCP, TBT and CLS, run in a simulated environment.Glossary · PerformancePageSpeed InsightsPageSpeed Insights is Google's free tool that reports a URL's real-user Core Web Vitals from CrUX alongside a Lighthouse lab test with fix suggestions.Guide · PerformanceCore Web Vitals Guide: Improve LCP, INP and CLS Step by StepLearn what LCP, INP and CLS measure, how lab and field data differ, and the practical fixes for images, fonts, JavaScript and layout shifts.9 min readGuide · PerformanceHow to Check Your Website Speed for Free (and What to Fix First)Test your website speed with free tools, understand the numbers in plain language, and fix the biggest problems first: images, hosting, scripts and caching.7 min readGuide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.