How to Improve Largest Contentful Paint (LCP) on Your Website
Largest Contentful Paint, or LCP, measures how long it takes for the biggest visible element on your page — usually a hero image, banner, or headline block — to fully render. It's one of Google's three Core Web Vitals, and it directly affects both user experience and search rankings. A good LCP score is under 2.5 seconds; anything past 4 seconds is considered poor. Here's how to actually fix it.
First, Identify What Your LCP Element Actually Is
Before optimizing anything, find out which element is being measured. Run your page through Google PageSpeed Insights or Chrome DevTools' Performance panel — both will explicitly tell you which element was flagged as the LCP candidate. It's often a hero image, but it can also be a large text block, a background image, or even a video poster frame. You can't fix what you haven't identified.
Optimize the LCP Image Itself
If your LCP element is an image (the most common case):
- Compress it properly. Use modern formats like WebP or AVIF instead of PNG/JPEG — they're often 25-50% smaller at equivalent visual quality.
- Size it correctly. Don't serve a 3000px-wide image into a 600px container and let CSS scale it down; that wastes bandwidth and delays render.
- Preload it. Add
<link rel="preload" as="image" href="...">in your document head so the browser starts fetching it immediately, rather than discovering it late during HTML parsing. - Avoid lazy-loading the LCP image. Lazy loading is great for below-the-fold images, but applying
loading="lazy"to your hero image actively delays LCP since the browser waits to fetch it until it's about to enter the viewport.
Reduce Render-Blocking Resources
CSS and JavaScript that block rendering push back when your LCP element can even start painting:
- Inline critical CSS needed for above-the-fold content directly in the
<head>, and defer the rest. - Add
asyncordeferto non-essential JavaScript so it doesn't block HTML parsing. - Remove unused CSS and JS — every byte the browser has to parse before rendering adds delay.
Improve Server Response Time (TTFB)
LCP can't happen until the browser has the HTML to begin with. If your Time to First Byte is slow, everything downstream — including LCP — gets pushed back:
- Use caching (page cache, object cache) to avoid regenerating dynamic pages on every request.
- Choose hosting with adequate resources for your traffic; an overloaded server delays every response.
- Use a CDN to reduce the physical distance data has to travel to the visitor.
Use a CDN for Static Assets
Content Delivery Networks cache your images, CSS, and JS at edge locations closer to your visitors. For a visitor on the other side of the world from your origin server, this alone can shave hundreds of milliseconds off load time — directly improving LCP.
Watch Out for Web Fonts
Custom web fonts can delay text-based LCP elements if the font file itself is slow to load. Use font-display: swap so text renders in a fallback font immediately rather than staying invisible while the custom font downloads, and preload your primary font file.
Test on Real Conditions, Not Just Your Office Wi-Fi
A page that loads instantly on your gigabit office connection can be painfully slow on a visitor's 4G connection. Test using Chrome DevTools' network throttling, or real-user monitoring data if you have it, to get an accurate picture of what actual visitors experience.
The Bottom Line
LCP improvements almost always come down to the same short list: shrink and prioritize your largest visible asset, remove render-blocking resources, and speed up server response time. Fix those three things in order, and most sites see meaningful LCP improvement without needing a full rebuild.