How to Improve Largest Contentful Paint (LCP)
Largest Contentful Paint measures when the biggest visible element — usually your hero image or headline — finishes loading. It is the vital most site owners struggle with, but the fixes are well understood and, taken in order, reliably bring LCP under the 2.5-second target.
The short version
A good LCP is 2.5 seconds or less. Work in this order: speed up the server response (TTFB), remove render-blocking CSS and JavaScript, then optimize and preload the LCP image itself. A CDN helps every step. Measure before and after with our speed test.
First, find your LCP element
Before changing anything, identify what the LCP element actually is. In most page-speed tools it is named explicitly — often a hero image, a background image, or a large block of heading text. Every fix below targets getting that specific element to render sooner. For a refresher on the metric itself, see Core Web Vitals explained.
Prioritized fixes
1. Improve server response time
Nothing can render until the HTML arrives. If your TTFB is above 800 ms, fix that first: enable full-page caching, upgrade slow hosting, and reduce heavy database work. This is the foundation every other optimization builds on.
2. Remove render-blocking resources
Browsers pause rendering while they download CSS and synchronous JavaScript in the page head. Inline the small amount of CSS needed for above-the-fold content, defer the rest, and add defer or async to scripts so they stop blocking the first paint.
<script src="/js/app.js" defer></script>
<link rel="stylesheet" href="/css/below-fold.css" media="print" onload="this.media='all'">3. Optimize the LCP image
If your LCP element is an image, this is usually the biggest single win. Serve it in a modern format like WebP or AVIF, size it to the dimensions it actually displays at, and compress it. Our image optimization guide covers this in depth. Never lazy-load the LCP image — lazy loading delays exactly the element you want to appear first.
4. Preload the LCP image
Tell the browser to fetch the hero image early instead of discovering it late while parsing HTML. A single preload hint can shave hundreds of milliseconds:
<link rel="preload" as="image" href="/img/hero.avif" fetchpriority="high">Adding fetchpriority="high" to the image itself reinforces the hint in modern browsers.
5. Use a CDN and modern protocols
A CDN serves your HTML and images from an edge location near each visitor, cutting network latency for every request. Combine it with HTTP/2 or HTTP/3 so multiple resources download in parallel over one connection.
Rough impact at a glance
| Fix | Typical effort | Where it helps |
|---|---|---|
| Page caching / faster host | Low | Server response (TTFB) |
| Defer CSS & JS | Medium | Render start |
| Modern image format & sizing | Low | Image download |
| Preload + fetchpriority | Low | Image discovery |
| CDN + HTTP/2 or HTTP/3 | Medium | Network latency |
Frequently asked questions
What is a good LCP score?
2.5 seconds or less at the 75th percentile of real visits is “good.” Between 2.5 and 4 seconds needs improvement, and over 4 seconds is poor.
Should I lazy-load my hero image?
No. Lazy loading is for below-the-fold images. Applying it to the LCP element delays the very thing you are trying to show first and usually makes LCP worse.
My LCP element is text, not an image. What now?
Focus on server response and render-blocking resources, and make sure your web fonts don’t block text from painting. Using font-display: swap lets text show immediately in a fallback font.
Related guides
What Is TTFB (Time to First Byte)?
What Time to First Byte measures, what counts as good, and the most common causes of a slow TTFB.
Read →Performance & Core Web VitalsCore Web Vitals Explained for Non-Developers
LCP, INP and CLS in plain language — what Google measures, the thresholds, and how they affect rankings.
Read →Performance & Core Web VitalsHow to Reduce Cumulative Layout Shift (CLS)
Why pages jump around while loading and the concrete fixes that keep your layout stable.
Read →Check your site against this guide
Run a free ScanOpsPro scan and see how your site handles the fundamentals.
Run a free scan