What Is LCP and Why Images Are the Main Cause

LCP (Largest Contentful Paint) is the Core Web Vitals metric Google cares about most. It measures how fast the largest visible element in the viewport finishes rendering. For 80% of sites, that element is an image. Here's how the metric works and the practical fixes.

What LCP measures

LCP is the time from navigation start until the largest element above the fold finishes rendering. "Largest" is measured by pixel area as the page loads. The candidate changes as content arrives, then locks once the user scrolls or interacts.

What counts as a "contentful" element:

• <img> and <picture> (and SVGs inside <img>)
• <video> poster images
• Background images set via CSS background-image
• Block-level text content with first-paint of a meaningful block

What doesn't count: skeleton loaders, low-resolution placeholders, blank space.

The thresholds

• Good: ≤ 2.5 seconds
• Needs improvement: 2.5 – 4.0 seconds
• Poor: > 4.0 seconds

These are 75th percentile across real-user data, not your developer-laptop number.

Why images dominate LCP

Most landing pages have an above-the-fold image that's larger than any text block. That image's download + decode time is the bottleneck. A 2 MB JPEG over a 4G connection takes 2-3 seconds just to download, before the browser can decode or paint it.

A few common patterns where images destroy LCP:

1. Uncompressed hero image. Designer hands you a 5 MB photo. You upload it as-is. LCP goes to 6 seconds on mobile.
2. Lazy-loaded hero. loading="lazy" on the LCP image means the browser waits to start downloading. LCP can double.
3. Picture element with wrong source order. AVIF after WebP means modern browsers waste a request choosing the bigger file.
4. CSS background image. Browsers de-prioritise CSS-loaded images. The hero appears late.

The five fixes that matter

1. Compress the hero image aggressively

Your hero image should be no larger than necessary. A 1600px-wide hero rendered in a 900px-wide viewport is wasted bytes. Use Image Compressor to ship a ~150-250 KB file instead of a multi-megabyte one.

For format choice: AVIF if your audience is on modern browsers (most are in 2026). WebP is a safe second. Skip PNG for photographs.

2. Use fetchpriority="high" on the hero

This tells the browser "this image is critical, start downloading immediately."

<img src="hero.avif" alt="..."
     width="1600" height="900"
     fetchpriority="high">

Without fetchpriority, the browser starts the image download alongside CSS, fonts, and other resources, often losing precedence.

3. Don't lazy-load above-the-fold images

Hero image should NEVER have loading="lazy". Lazy-loading defers download until the image is about to enter the viewport, which is the opposite of what you want for the LCP candidate.

<img src="hero.avif" alt="..." loading="eager" fetchpriority="high">

4. Preload the hero font (if your headline is the LCP)

If your LCP is a text headline, the custom font has to download before the headline can paint. Preload it:

<link rel="preload" as="font" href="hero-font.woff2" type="font/woff2" crossorigin>

5. Use a <picture> element with correct ordering

AVIF first, WebP second, JPEG fallback:

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

See How to Use the HTML Picture Element for the full syntax.

Tools to measure LCP

• PageSpeed Insights: shows field LCP from real Chrome users + lab LCP from a single synthetic test.
• Chrome DevTools → Performance: lab LCP with full timing breakdown.
• Lighthouse CLI: scriptable. Useful for CI.
• Web Vitals JS library: capture LCP in your own analytics.

Don't trust just lab LCP. Field data tells you what real users see.

A diagnostic recipe

If LCP is bad:

1. Identify the LCP element via PageSpeed Insights or DevTools Performance tab.
2. Is it an image? If yes:
   • File size > 300 KB → compress it.
   • Lazy-loaded? Remove loading="lazy".
   • Wrong format? Add AVIF / WebP via <picture>.
   • Below the fold? It shouldn't be the LCP. Check your layout.
3. Is it text? Check font loading: preload the font or use a system fallback for the first paint.

Related

• How Image Compression Improves Core Web Vitals
• How to Pass Google PageSpeed Image Audits