First Contentful Paint
First Contentful Paint records when the browser renders the first piece of content from the DOM, whether that is text, an image, a canvas or an SVG. It marks the moment a visitor stops looking at a blank screen and starts believing the page is working.
Good
Under 1.8s
Needs work
1.8s to 3s
Poor
Over 3s
Why it matters
FCP is not a Core Web Vital, but it is the earliest honest signal of progress and it puts a floor under everything after it. Largest Contentful Paint can never be better than First Contentful Paint. If the first paint is slow, the cause is almost always something structural, such as the server, the critical path or render blocking resources, and fixing it improves every downstream metric at once.
How it is measured
The browser reports the time from navigation start to the first frame containing any content from the DOM. Background colours and blank frames do not count. Anything that delays the first paint, such as a stylesheet still downloading or a synchronous script in the head, is measured here.
What makes it slow
Render blocking stylesheets
The browser will not paint until it has processed the CSS that applies to the page. A single large stylesheet in the head can hold the first paint for hundreds of milliseconds on a slow connection.
Synchronous scripts in the head
A script without defer or async pauses HTML parsing while it downloads and executes. Nothing after it in the document is even parsed, let alone painted.
Slow Time to First Byte
The browser cannot paint content it has not received. A slow origin, an uncached template or a redirect chain all push the first paint back before any front end work begins.
Webfonts blocking text
Without font-display, browsers hide text for up to three seconds while waiting for the font. The paint happens but there is nothing visible in it.
Redirect chains
Each hop from http to https to www is a full connection setup before the real request begins. Two unnecessary redirects can cost half a second on mobile.
How to improve it
Ordered roughly by return on effort. The quick wins are usually worth doing first even when the deeper problem is elsewhere.
Add defer to scripts that are not needed for the first paint
Quick winDefer keeps the parser moving and runs the script after the document is parsed. For most application code this is the correct default, and it is a one word change.
Set font-display: swap
Quick winText renders immediately in the fallback and swaps when the webfont arrives. Visitors see words rather than empty space, at the cost of a brief style change.
Collapse redirect chains
Quick winLink directly to the final URL everywhere you control, and combine the http to https and non www to www rules into a single redirect at the edge.
Inline critical CSS
ModeratePut the styles needed for the first screen directly in the document and load the rest without blocking, using media="print" with an onload swap or a preload.
Enable Brotli compression
ModerateBrotli typically beats gzip by another 15 to 20 percent on HTML, CSS and JavaScript. It is a server configuration change rather than a code change, and it applies to every request.
How Pulse reports this
Pulse reports First Contentful Paint alongside LCP so you can see whether the delay is structural or specific to the largest element. When the two are close together and both slow, the problem is usually the critical path. When FCP is fast and LCP is slow, the problem is the hero element itself.
Common questions
What is a good FCP score?
Under 1.8 seconds is good, 1.8 to 3 seconds needs improvement, and over 3 seconds is poor.
What is the difference between FCP and LCP?
First Contentful Paint is the first content of any kind. Largest Contentful Paint is the largest element in the viewport. FCP tells you when something appeared, LCP tells you when the page looked ready. LCP is always the later of the two.
Is FCP a Core Web Vital?
No. The Core Web Vitals are LCP, INP and CLS. FCP is a supporting diagnostic, and it is useful precisely because it isolates the part of the delay that happens before any specific element is involved.
Related metrics
Measure FCP on your own page
An audit runs in a real Chromium browser and reports FCP alongside every other metric, with the measured saving behind each recommendation.