First Contentful Paint (FCP) is a performance metric for the time between the start of navigation and the moment the first piece of content is rendered. Text, images (including background images), SVG elements and non-white canvas elements count as content.
At a glance
- Metrics
- FCP (First Contentful Paint)
- Measures
- Time from navigation to the first rendered content
- Data source
- Field data (e.g. CrUX) and lab data (Lighthouse)
- “Good” threshold
- 1.8 s or less
- Assessment
- 75th percentile of page loads
Last checked:
Thresholds
According to web.dev, an FCP of 1.8 seconds or less is good, 1.8 to 3.0 seconds needs improvement, and more than 3.0 seconds is poor, measured at the 75th percentile of page views. Lighthouse uses stricter limits for desktop (0.9 and 1.6 seconds).
Assessed at the 75th percentile of page loads, mobile and desktop separately. Source: web.dev: First Contentful Paint (FCP). Last checked: .
| Metric | Measures | Core Web Vital? | Field or lab | “Good” per web.dev |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Render time of the largest image, text block or video visible in the viewport, from the start of navigation | yes (loading) | field and lab | 2.5 s or less |
| INP (Interaction to Next Paint) | Latency of interactions across the whole visit until the next paint; one value that all (or nearly all) interactions fall below | yes (interactivity), since 2024-03-12 | field; in the lab only with simulated interactions, Lighthouse does not measure INP | 200 ms or less |
| CLS (Cumulative Layout Shift) | Largest burst of unexpected layout shifts during the entire lifecycle of the page | yes (visual stability) | field and lab | 0.1 or less |
| TTFB (Time to First Byte) | Time from the start of navigation until the first byte of the response arrives | no (helps diagnose LCP) | field and lab | 0.8 s or less |
| FCP (First Contentful Paint) (this term) | Time from the start of navigation until any part of the page's content is rendered | no (helps diagnose LCP) | field and lab | 1.8 s or less |
| TBT (Total Blocking Time) | Total time after FCP during which the main thread was blocked long enough to prevent input responsiveness | no (lab proxy for INP) | lab; web.dev does not recommend field measurement | less than 200 ms on average mobile hardware |
| Speed Index | How quickly content is visually displayed during page load (from a video of the load) | no | lab (Lighthouse) | Threshold according to Lighthouse: mobile up to 3.4 s “fast” (web.dev gives no value) |
| FID (First Input Delay), historical | Time from the first interaction until the browser can begin processing event handlers | until 2024-03-12, replaced by INP | field only | 100 ms or less |
According to web.dev, the 75th percentile of page loads is assessed, mobile and desktop separately. A page passes the Core Web Vitals when LCP, INP and CLS are “good” at the 75th percentile. Chrome tools ended FID support on September 9, 2024. Sources: web.dev: Web Vitals; web.dev: Largest Contentful Paint (LCP); web.dev: Interaction to Next Paint (INP); web.dev: Cumulative Layout Shift (CLS); web.dev: Time to First Byte (TTFB); web.dev: First Contentful Paint (FCP); web.dev: Total Blocking Time (TBT); web.dev: First Input Delay (FID); web.dev Blog: Interaction to Next Paint is officially a Core Web Vital (2024-03-12); Chrome for Developers: Lighthouse – Speed Index. Last checked: .
How does it relate to the Core Web Vitals?
FCP is not a Core Web Vital. Those are LCP, INP and CLS. FCP marks when anything appears, while LCP marks when the largest element in the viewport is rendered, so FCP comes first. web.dev notes that FCP includes time for unloading the previous page, connection setup, redirects and time to first byte.
Lab tools such as Lighthouse and Chrome DevTools measure FCP, as do field sources such as the Chrome UX Report, PageSpeed Insights and Search Console.
Example
In an illustrative example, a product page loads a large stylesheet in the <head>. The browser shows nothing until the file has downloaded, and FCP is 3.4 seconds, which is rated poor.
Sources
- First Contentful Paint (FCP) – web.devweb.dev
- First Contentful Paint – Lighthouse, Chrome for Developersdeveloper.chrome.com
- Web Vitals – web.devweb.dev
- First contentful paint – MDNdeveloper.mozilla.org
Last updated: