Performance
First Contentful Paint
Also called FCP.
First Contentful Paint is the time from navigation start until the browser paints the first piece of content, such as text, an image, or a non-white canvas. It marks the moment a visitor sees something happen.
How it is measured
The browser reports a `first-contentful-paint` paint entry in milliseconds. Good is 1,800 ms or less, poor is over 3,000 ms. Lighthouse reports it from a lab run, and CrUX reports the field p75.
It includes the server response, redirects, blocking CSS, and blocking scripts. It does not include a late hero image, which is what Largest Contentful Paint captures.
Worked example
A WordPress site with a 640 ms TTFB, a 230 ms blocking stylesheet, and a synchronous jQuery plugin at 410 ms has FCP of 1,720 ms on desktop and 3,350 ms on a throttled phone. Moving the plugin to defer drops mobile FCP to 2,480 ms.
The hero image still arrives at 3,900 ms, so LCP barely moves. FCP improved because text appeared, not because the main content did.
How it differs
First Contentful Paint is the first sign of life. Largest Contentful Paint is when the main content has appeared. Time to Interactive is when the page can respond reliably. A page can have an excellent FCP and a bad LCP.
Common errors
Treating FCP as a Core Web Vital, which it is not. Counting a spinner or blank header as content. Optimizing FCP by inlining so much CSS that HTML slows down. Comparing FCP from different throttle settings. Ignoring TTFB, which is part of it.
In practice
Use FCP to diagnose the early path: server time, redirects, and render-blocking resources. Check it in Lighthouse for a quick signal, then confirm what real visitors see in field data.