First Contentful Paint (FCP)
First Contentful Paint (FCP) measures the time from navigation start to when the browser first renders any DOM content — text, an image, a non-white canvas, or SVG. The Paint Timing API exposes it as the first-contentful-paint entry, and web.dev treats it as the moment a visitor first sees that something is happening. It precedes Largest Contentful Paint, which marks the largest element, so the two answer different questions about perceived load.
What this means
FCP is the first point at which the browser paints any content from the DOM — the first text run, image, background image, canvas draw, or SVG. The Paint Timing API records it as a paint entry named first-contentful-paint, measured from the navigation start.
FCP versus LCP
FCP marks the first thing painted; Largest Contentful Paint marks when the largest visible element is painted. A page can reach FCP quickly with a header or spinner yet take much longer to show its main content, so the gap between FCP and LCP describes how much of the load happens after the first pixel.
- FCP = first DOM content painted (any element)
- LCP = largest visible element painted
- Render-blocking CSS/JS and slow fonts delay FCP
Why it misleads
FCP says something appeared, not that the page is usable — a spinner or skeleton counts. It is also bounded below by TTFB, so a fast front end cannot rescue a slow server. Read FCP as a field distribution across real users, not a single lab capture.
How it appears in analytics and logs
A slow FCP means the visitor stared at a blank screen — often caused by render-blocking CSS or JavaScript, slow fonts, or a slow TTFB that the paint cannot beat.
Diagnostic use case
Use FCP to gauge how quickly a page stops looking blank, and read it before LCP because render-blocking resources that delay FCP usually delay LCP too.
What WebmasterID can help detect
WebmasterID can capture paint-timing events first-party so FCP is observed alongside human-classified sessions, keeping crawler renders out of the field distribution.
Common mistakes
- Treating FCP as the page being usable rather than just visible.
- Optimising FCP while ignoring the TTFB that caps it.
- Confusing FCP with LCP — they mark different moments.
Privacy and accuracy notes
FCP is a render timestamp from the visitor's own browser, not an identifier. Discussing it is educational, not legal advice.
Related pages
- Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) reports the render time of the largest image or text block visible in the viewport, measured from when the page starts loading. It is one of Google's Core Web Vitals, exposed through the Largest Contentful Paint API, and the candidate element can change as larger content paints — the final value is taken at the last candidate before user interaction. web.dev breaks LCP into TTFB, resource load delay, load duration, and render delay to localise the bottleneck.
- Time to first byte (TTFB)
Time to first byte (TTFB) measures the interval between the browser starting a navigation request and receiving the first byte of the server's response. The Performance Timeline derives it from responseStart minus the request's start time, so it folds in redirect, DNS, connection, TLS, and server processing time. Because nothing can render before bytes arrive, a slow TTFB delays every downstream metric, which is why web.dev treats it as a diagnostic for First Contentful Paint and Largest Contentful Paint.
- Speed Index
Speed Index measures how quickly the contents of a page are visibly populated during load. Instead of marking one moment, it records the visual completeness of the viewport frame by frame and integrates the un-painted area over time, so a page that fills in steadily scores better than one that snaps in late. It is a lab metric computed by Lighthouse from a video capture of the load, expressed in milliseconds where lower is faster.
- Website observability
Field paint timings beside human traffic.
Sources and verification notes
Last reviewed 2026-06-24. Facts are checked against primary/official sources where available; uncertain specifics are marked “Data not yet verified” rather than guessed.