First Contentful Paint is the time from when a page starts loading to when any part of its content, such as text, an image, an SVG or a non-white canvas, is first painted on screen. It tells you how quickly users get visual feedback that the page is loading. FCP is not a Core Web Vital, but it is measured in Lighthouse and the Chrome UX Report, and a slow FCP usually means a slow LCP too.
What good looks like
web.dev considers an FCP of 1.8 seconds or less at the 75th percentile good, and more than 3 seconds poor. These thresholds describe field data from real users. Lab results from Lighthouse are useful for debugging but will not match field numbers exactly.
What delays FCP
FCP depends on everything that has to happen before the first paint: the server response, then any resources that block rendering.
- Slow Time to First Byte
- Render-blocking CSS and synchronous scripts in the head
- Web fonts that hide text while they load
- Large HTML documents or long chains of dependent requests
- Client-side rendering, where nothing paints until JavaScript runs
Improving FCP
Reduce TTFB, inline critical CSS, defer non-critical scripts, and use font-display: swap or optional so text appears with a fallback font. Server or static rendering means content is in the first response, rather than waiting for a JavaScript bundle to build it.
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans.woff2") format("woff2");
font-display: swap;
}Example
A blank screen from a font
Kettlewisp's landing pages use a custom font loaded from a third-party host with the default font-display behavior. On slow connections, users see a blank area where the headline should be. Self-hosting the font and adding font-display: swap brings the first paint forward, since text now renders in a fallback font straight away.
Common mistakes
Treating FCP as the goal
A fast FCP from a loading spinner does not help users. LCP measures when the main content appears.
Comparing lab and field numbers directly
Lab tests use one simulated device and network. Field data reflects your real audience.
Questions
FCP is when anything first appears. LCP is when the largest visible element, usually the main image or headline block, finishes rendering.
