What Is LCP?
LCP measures how long the largest visible element on a page takes to render. Common causes, fixes, and a real example.
LCP (Largest Contentful Paint) is a Core Web Vitals metric measuring how long it takes for the largest visible element on a page, such as a hero image or heading, to fully render. Google considers 2.5 seconds or faster a good score, measured at the 75th percentile of real users.
Why LCP matters
LCP approximates when a visitor perceives the page as having actually loaded, since it tracks the biggest, most noticeable element rather than smaller supporting content that might render earlier but doesn’t register as “the page is ready” to a real visitor. A page can technically start rendering quickly while still failing LCP if the largest, most attention-grabbing element takes far longer, this mismatch between overall page speed and perceived load time is exactly why LCP exists as a distinct metric from generic page load time.
What causes slow LCP
- Slow server response times. If the server itself takes too long to respond, everything downstream, including the LCP element, is delayed.
- Unoptimized images. Large, uncompressed hero images are the most common single cause of poor LCP.
- Render-blocking resources. CSS or JavaScript that must load before the browser can paint the largest element.
- Client-side rendering delays. Content rendered via JavaScript after the initial page load often delays LCP compared to server-rendered content.
How to improve LCP
- Preload the hero image or LCP element using a
<link rel="preload">tag so the browser prioritizes it earlier. - Compress and serve images in next-gen formats like WebP or AVIF, cutting file size without visible quality loss.
- Improve server response time through better hosting, caching, or a CDN.
- Eliminate unnecessary render-blocking CSS and JavaScript, inlining critical styles and deferring the rest.
- Avoid lazy-loading the LCP element itself, lazy-loading is great for below-the-fold images but counterproductive for the element that needs to load first.
LCP thresholds
| Score | Threshold |
|---|---|
| Good | Under 2.5 seconds |
| Needs improvement | 2.5 to 4.0 seconds |
| Poor | Over 4.0 seconds |
Real example
For example, if a page’s biggest visual element is a banner image that finishes loading at 3.8 seconds, that page’s LCP is 3.8 seconds, landing in the “needs improvement” range and likely costing real visitors who leave before the main content ever finishes rendering.
LCP and AI search
LCP doesn’t directly affect AI Overview citation eligibility, which is driven by content relevance, but a slow-loading page that a visitor clicks through to from an AI-generated answer creates a worse first impression at exactly the moment that visitor is already primed to bounce back if the destination feels slow or broken.
FAQ
What’s usually the biggest cause of poor LCP?
Unoptimized hero images, most commonly. Large, uncompressed images that haven’t been converted to modern formats are the single most frequent culprit.
Should I lazy-load my LCP element?
No. Lazy-loading delays the LCP element specifically, which is counterproductive since it’s the element the metric is measuring, preload it instead.
Does LCP measure the whole page loading?
No, only the single largest visible element. A page can have a fast LCP while smaller, secondary elements are still loading elsewhere on the page.
Can server location affect LCP?
Yes. Physical distance between the server and the visitor adds latency, which is why a CDN serving content from geographically closer locations often improves LCP measurably.
Related terms
Your hero image is almost always the LCP element, and almost always the reason LCP is slow. Compress it, preload it, and check the score again before touching anything else.