Glossary
FCP (First Contentful Paint)
First Contentful Paint is the time it takes for the first text, image, or canvas element to render in the browser. It marks the transition from blank screen to visible content.
FCP measures when the user first sees ANY content on the page — first text, first image, first SVG. It's a perceptual milestone: blank-screen-to-something. FCP is faster than LCP (which measures the LARGEST element) and is one of the earliest visible signs that the page is loading.
Good FCP targets: under 1.8 seconds for 75% of page loads. Anything over 3 seconds feels broken to most users. FCP is part of Lighthouse's performance score and is reported in PageSpeed Insights, but isn't a Core Web Vital (LCP replaced it for that role in 2020).
FCP is gated by TTFB (the server response has to arrive first) and by render-blocking resources (stylesheets and synchronous scripts in the head that prevent paint). Optimizing FCP usually means reducing render-blocking CSS / JS or inlining critical CSS.
FCP differs from LCP in a useful way: a page might paint a hero quickly (good FCP) but take a long time for the hero IMAGE to load (bad LCP). Both metrics are diagnostic — FCP tells you about server + render-blocking, LCP tells you about your largest above-fold asset.
Example
A landing page has FCP of 0.9s but LCP of 3.2s — meaning text appears fast but the hero image is slow. Compressing the hero from 800KB to 120KB and adding `<link rel='preload'>` for the image drops LCP to 1.6s while FCP stays the same. Now both metrics are green.