Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the time from navigation start until the largest visible element in the viewport finishes rendering. It is Google's primary proxy for "when does the page feel loaded to the user."
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the time from navigation start until the largest visible element in the viewport finishes rendering. It is Google's primary proxy for "when does the page feel loaded to the user."
Why It Matters
LCP is one of three Core Web Vitals and a confirmed Google ranking signal. Google's thresholds: good ≤ 2.5s, needs improvement 2.5–4.0s, poor > 4.0s. Pages in the "good" band see measurably lower bounce rates and higher conversion, and failing LCP at the 75th percentile can suppress rankings on competitive queries.
What Counts as the "Largest Element"
LCP tracks the largest element painted in the visible viewport. Eligible candidates include <img>, <video> poster frames, background images loaded via CSS url(), and block-level text nodes. The "largest" element can change during load — LCP uses whatever the final largest element turns out to be.
Common Causes of Slow LCP
Slow server response (TTFB): If the HTML takes 1.5s to arrive, LCP cannot be under 2.5s.
Render-blocking resources: Synchronous CSS and JS in the head delay the first paint.
Unoptimized images: The hero image is often the LCP element. Oversized, uncompressed, or late-loaded images dominate most LCP failures.
Client-side rendering: SPA frameworks that render in JS after hydration push LCP far past the "good" threshold.
Lazy-loading the LCP element: Adding loading="lazy" to the hero image is a common mistake — it delays the very element LCP measures.
How to Improve LCP
Preload the hero image: <link rel="preload" as="image" href="..."> gives the browser a head start.
Use modern image formats: WebP and AVIF cut payload 30–50% vs JPEG.
Add fetchpriority="high" to the hero image so it jumps ahead of other resources.
Serve from a CDN to cut TTFB on distant users.
Inline critical CSS and defer the rest.
Use SSR or static generation instead of client-side rendering for content-heavy pages.
Cache aggressively at the edge for returning visitors.
Measuring LCP
Field data: Chrome UX Report (CrUX), Google Search Console Core Web Vitals report, PageSpeed Insights — these reflect real users.
Lab data: Lighthouse, WebPageTest, Chrome DevTools Performance panel — reproducible but synthetic.
Google ranks on the 75th percentile of field data, so synthetic tests alone are not enough.
Sources: