LCP (Largest Contentful Paint): How Fast the Main Content Loads
LCP measures how long the largest visible element takes to appear. Learn what counts, what passes, and how to make it faster.
Largest Contentful Paint (LCP) is a Core Web Vital that measures how long it takes for the largest visible element on a page to render.
What LCP Measures
The LCP element is usually the hero image, a large heading, or a video frame. LCP records when that element appears, capturing how "loaded" the page feels.
The Good Threshold
- Good: 2.5 seconds or less.
- Needs improvement: up to 4.0 seconds.
- Poor: more than 4.0 seconds.
Google evaluates LCP at the 75th percentile of real sessions.
What Makes LCP Slow
- A slow server response time (TTFB).
- A large, unoptimized hero image.
- Render-blocking CSS or JavaScript.
- Lazy-loading the LCP element itself.
How to Improve LCP
- Reduce server response time with caching and a fast host.
- Preload the hero image with a preload link.
- Compress images and serve modern formats like WebP.
- Defer non-critical CSS and JavaScript.
The change: a product page with a large hero photo.
The setup: the image is compressed, resized, and preloaded.
The reading: the first meaningful paint drops from 3.8 to 1.9 seconds.
Why it works: the LCP element is now the first thing fetched, so it renders fast.
Quick Tip
Never lazy-load the LCP element. Lazy loading intentionally delays the largest element and can tank your LCP score.
Frequently Asked Questions
LCP, Bottom Line
LCP is the closest single number to how fast a page feels.
Compress the hero, preload it, and keep the server snappy.