Largest Contentful Paint (LCP)

What this check does

Reads LCP from Google PageSpeed Insights (which runs Lighthouse against your URL). The value is the time, in seconds, until the largest above-the-fold element finishes rendering — typically a hero image, video poster, or large headline.

LCP value	Verdict
≤ 2.5 s	Good
2.5–4.0 s	Needs improvement
> 4.0 s	Poor

Why it matters

LCP is one of Google’s three Core Web Vitals. A poor LCP doesn’t just nudge rankings down — it cascades through every conversion funnel on your site. Google’s own data shows pages with LCP under 2.5 s have ~25% lower bounce rates than pages over 4 s.

LCP is dominated by how fast the LCP element loads — not how fast your JavaScript runs. The LCP element is almost always an image. So 80% of LCP fixes are about image delivery.

How to fix it

In rough order of impact:

1. Preload the LCP image. In your <head>:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

This starts the image download before the browser has finished parsing the rest of the HTML.

2. Serve modern formats. AVIF or WebP, with JPEG fallback for older browsers:

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="600" fetchpriority="high" />
</picture>

3. Set explicit dimensions on the <img> (width + height attributes). Browsers reserve space without waiting for the image to load.

4. Resize for the viewport. Don’t serve a 4000×3000 hero image to a mobile viewport. Use srcset with multiple resolutions.

5. Self-host fonts or use font-display: swap. A render-blocking webfont delays the headline-as-LCP element.

6. Move the LCP image out of lazy-loading. If your image library lazy-loads everything, the hero image must explicitly opt out (loading="eager", fetchpriority="high").

Frequently asked questions

My LCP element is text, not an image. What now?

You’re already in good shape — text renders fast. The fix is usually about render-blocking resources: defer non-critical JS, inline critical CSS, eliminate render-blocking webfonts.

Why does my LCP differ in PageSpeed vs my own browser?

PageSpeed simulates a slow 4G connection on a mid-tier Android device. Your dev machine is on fiber. Always trust the field data (CrUX), not your local DevTools.

Does CDN help with LCP?

Yes — a CDN reduces the round-trip time to your origin server, which directly cuts the time to start the image download. Cloudflare, Bunny, and Fastly are common picks.