Largest Contentful Paint (LCP)
Also known as: LCP
Largest Contentful Paint measures the time from when a page starts loading until the largest visible content element, often a hero image, video poster, or heading block, is rendered in the viewport. It is one of the three Core Web Vitals and reflects perceived load speed.
Key Takeaways
- Largest Contentful Paint measures the time until the largest visible content element renders in the viewport.
- The LCP element is often a hero image, video poster, or large heading block.
- LCP is one of the three Core Web Vitals and reflects perceived load speed.
- Slow LCP raises abandonment because users wait longer before the page feels useful.
- Optimizing the LCP element's delivery matters more than reducing total page weight alone.
How It Works
LCP records the moment the biggest above-the-fold element becomes visible, which users read as the page having loaded. The browser watches rendering and reports the largest element painted before interaction, whether that is an image, a video poster frame, or a block of text.
As part of Core Web Vitals, LCP is both a ranking signal and a proxy for how quickly a page feels usable. A slow score often traces to that one element rather than the whole page, so render-blocking CSS, lazy-loaded hero images, and missing preload hints are common culprits even on light pages.
Improving LCP means prioritizing the critical element: preloading the hero image, serving it in a modern format, and removing scripts that block rendering. Related issues can compound the delay, such as a Redirect Chain that adds round trips before the page even starts, so the fix is often technical delivery, not just adding Structured Data or trimming file size.
Why It Matters
LCP is a Core Web Vitals metric and a ranking signal, but it also captures how fast users feel a page becomes useful. Slow LCP raises abandonment before content even appears, hurting both rankings and conversion.
Example
An ecommerce store finds its product pages have a slow LCP because the main product photo is lazy-loaded and sits behind a chain of redirects from an old URL structure. The team removes the lazy-load attribute on the hero image, adds a preload hint, serves the image in a compressed modern format, and flattens the redirects. The largest element now paints noticeably sooner, and the page feels usable almost immediately.
Common Mistake
Focusing only on total page weight while ignoring the LCP element's own delivery. Render-blocking resources, lazy-loaded hero images, and missing preload hints delay the largest element even when the overall page is reasonably light.
Frequently Asked Questions
What is a good LCP score?
Google considers an LCP of 2.5 seconds or faster as good, between 2.5 and 4 seconds as needing improvement, and slower than 4 seconds as poor, measured at the 75th percentile of real user visits.
What causes a slow LCP?
Common causes include render-blocking CSS and JavaScript, slow server response, lazy-loaded hero images, unoptimized image formats, missing preload hints, and redirect chains that delay when the largest element can begin loading.
How is LCP different from overall page speed?
Overall page speed can look fine while LCP is slow if the single largest element is delayed. LCP isolates when the main visible content appears, which better reflects when users perceive the page as ready.