LCP: What It Means and How to Improve It
LCP is the time until your biggest hero element appears. It's the most important Core Web Vital — and usually the easiest to fix.
Table of contents
- What LCP measures
- The thresholds
- Why your LCP is slow (5 common causes)
- 1. The LCP image is huge
- 2. The image is discovered too late
- 3. The server is slow
- 4. Render-blocking CSS
- 5. Lazy-loaded LCP image
- How to fix LCP (in order of impact)
- Fix 1: Preload the LCP image
- Fix 2: Use modern image formats
- Fix 3: Size images correctly
- Fix 4: Add `fetchpriority="high"`
- Fix 5: Inline critical CSS
- Fix 6: Improve your TTFB
- Fix 7: Don't use background images for LCP
- How to find your LCP element
- Verify your fix
- The bottom line
Largest Contentful Paint (LCP) is one of Google's three Core Web Vitals and worth 25% of your PageSpeed performance score. It's also the single metric users notice most: it's how long until the page feels loaded.
Here's exactly what LCP measures, why it's usually slow, and the fixes that actually work.
What LCP measures
LCP records the render time of the largest visible element in the viewport. That's almost always:
- A hero image
- A large headline (H1)
- A video poster image
- A big text block
Smaller elements like the navigation, logos, and footer don't count. Off-screen elements don't count. LCP is about: what's the biggest thing the user sees, and how long until they see it?
The thresholds
| LCP | Rating |
|---|---|
| ≤ 2.5s | ✅ Good |
| 2.5–4.0s | ⚠️ Needs improvement |
| > 4.0s | ❌ Poor |
These thresholds are for 75th percentile of real users — meaning if 75% of your visitors have LCP under 2.5s, you pass.
Why your LCP is slow (5 common causes)
1. The LCP image is huge
A 2MB hero image takes seconds to download on mobile. Compress it, convert to WebP, and resize it to the exact dimensions it displays at.
2. The image is discovered too late
The browser doesn't know your hero image exists until it parses the HTML, sees a <img> tag, and starts downloading. If you're loading the image from a CSS background or via JavaScript, discovery is even later.
3. The server is slow
LCP includes Time to First Byte (TTFB). If your server takes 1.5 seconds to respond, your LCP can't be under 2.5s no matter what else you do.
4. Render-blocking CSS
If your stylesheet is huge or slow to load, the browser waits before showing anything — including your hero image.
5. Lazy-loaded LCP image
Adding loading="lazy" to your hero image will absolutely destroy your LCP. Lazy loading is for below-the-fold images only.
How to fix LCP (in order of impact)
Fix 1: Preload the LCP image
The single biggest win. Add this to your <head>:
<link
rel="preload"
as="image"
href="/hero.webp"
fetchpriority="high"
>
This tells the browser to start fetching the image before it finishes parsing the HTML. On mobile this can shave 500–1500ms off LCP.
Fix 2: Use modern image formats
WebP is roughly 30% smaller than JPEG at the same quality. AVIF is another 20% smaller than WebP. Use them:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="..." width="1200" height="600">
</picture>
Fix 3: Size images correctly
A 4000px-wide image displayed at 800px wastes 80% of the bytes. Use srcset so mobile devices download mobile-sized versions:
<img
src="/hero-800.webp"
srcset="/hero-800.webp 800w, /hero-1200.webp 1200w, /hero-2000.webp 2000w"
sizes="(max-width: 768px) 100vw, 800px"
width="800"
height="400"
alt="..."
>
For more on image optimization, see how images affect website speed.
Fix 4: Add fetchpriority="high"
Even without preloading, this attribute on your LCP image hints to the browser that this resource is more important than the others:
<img src="/hero.webp" fetchpriority="high" ...>
Fix 5: Inline critical CSS
If your stylesheet is render-blocking, the browser shows nothing until it loads. Inline the styles needed for above-the-fold rendering directly in <style> tags in the <head>.
Fix 6: Improve your TTFB
If your server response is over 600ms, your LCP starts in a hole. Options:
- Add a CDN (Cloudflare's free plan helps immediately).
- Cache database queries.
- Move static assets to edge storage.
See how hosting affects website performance.
Fix 7: Don't use background images for LCP
If your hero is a CSS background-image, browsers can't preload it the same way. Either use a real <img> tag or preload the URL manually.
How to find your LCP element
In Chrome DevTools:
- Open DevTools → Performance tab.
- Hit reload (with throttling on if you want a realistic test).
- Find the "Largest Contentful Paint" marker in the timeline.
- Click it — DevTools highlights the exact element on the page.
You can also check the PageSpeed Insights report or run a free audit on RateMySite — both show the LCP element.
Verify your fix
After every change, re-run a Lighthouse audit. Look for:
- LCP under 2.5s
- "Preload Largest Contentful Paint image" opportunity gone
- "Properly size images" opportunity gone
If your LCP image is fully optimized and your TTFB is good, you'll easily pass.
The bottom line
LCP is the most important Core Web Vital and the easiest to improve. Preload your hero image, modernize the format, size it correctly, and your LCP will almost always drop into the green.
After that, work on reducing JavaScript for INP and setting explicit dimensions for CLS — the other two Core Web Vitals.
Frequently Asked Questions
What's a good LCP score?+
2.5 seconds or less is considered good. Between 2.5 and 4 seconds needs improvement. Over 4 seconds is poor and likely hurting both your SEO and conversions.
What element counts as the LCP element?+
Usually the largest image or text block visible in the initial viewport. On most marketing sites it's a hero image. On article pages it's often the headline or hero image. Chrome DevTools shows you exactly which element on your page.
Does preloading the LCP image always help?+
On most sites, yes. Preloading tells the browser to fetch the image with high priority before parsing the HTML. The exception is if your image is already discovered very early — measure both ways.
See how your site really performs
Run a full website health check on mobile and desktop in 30 seconds — no signup needed.