How to fix Largest Contentful Paint
Of the three Core Web Vitals, LCP is the one most sites fail — and on the majority of pages, the element being measured is an image. That makes it unusually fixable.
What LCP actually measures
Largest Contentful Paint is the time from navigation start until the largest visible element has finished rendering. Not when the page starts appearing, and not when everything has loaded — specifically when the biggest thing in the viewport is done.
Google's thresholds: good under 2.5 seconds, needs improvement up to 4 seconds, poor beyond that. The number that counts is the 75th percentile of real visitors, so a quarter of your traffic can be slower than your target and you still pass.
It is measured on real devices on real connections, which is why lab results on a fast laptop are so often misleading.
Find the element first
Do not optimise blindly. Open Chrome DevTools, run a Lighthouse report, and look at the LCP entry — it names the exact element.
Nine times out of ten it is a hero image, a product photograph, or an article header. Occasionally it is a large block of text, which changes the fix entirely: text LCP is usually about font loading, not images.
Also check Search Console's Core Web Vitals report, which uses real visitor data rather than a lab run. The two often disagree, and the field data is the one that affects ranking.
The fixes, in order
1. Make the image smaller. Resize to displayed dimensions, convert to WebP, compress to quality 75. This is usually enough on its own and typically cuts the file by 90%.
2. Never lazy-load it. loading="lazy" on your LCP image delays the exact thing being measured. Use fetchpriority="high" on it instead.
3. Preload it. A <link rel="preload" as="image"> in the head starts the download before the parser reaches the tag.
4. Remove what blocks rendering. The image cannot paint until CSS has parsed. Render-blocking stylesheets and synchronous scripts in the head delay everything behind them.
Things that look like fixes but are not
- A CDN alone. It reduces latency, not bytes. A 4 MB image is still 4 MB, delivered slightly closer.
- A placeholder or skeleton. It makes the wait feel shorter but does not change when the real element renders. LCP is unmoved.
- Lazy-loading everything. Helps the rest of the page, hurts LCP if applied to the hero.
- A caching plugin. Helps repeat visitors. LCP is measured largely on first views.
A realistic target
A hero image at 1920px, WebP, quality 75, is roughly 150–250 KB. On a normal mobile connection that arrives comfortably inside the 2.5 second budget, leaving room for everything else the page has to do.
Get the image right and LCP usually takes care of itself.