What causes LCP to fail?

The four main causes of LCP failure are: (1) Late image discovery — the browser does not find the hero image until late in HTML parsing; fix with in the document head. (2) Resource contention — JS and CSS downloads compete with the image; fix with fetchpriority='high'. (3) Payload bloat — the image is too large; fix by converting to AVIF and sizing to viewport dimensions. (4) The lazy loading trap — applying loading='lazy' to the hero image explicitly tells the browser to download it last.

How do I fix LCP with images?

Five steps in order: (1) Remove loading='lazy' from the hero/LCP image. (2) Add fetchpriority='high' to the LCP tag. (3) Serve the image in AVIF format (30% smaller than WebP). (4) Size the image to the viewport — don't serve a 4000px image to mobile. (5) Add in the document pointing to the hero image, so the browser starts fetching before DOM construction. Execute all five and LCP typically drops below 2.5 seconds.

Should I use fetchpriority='high' on my hero image?

Yes. fetchpriority='high' on the LCP image element tells the browser's network layer to prioritize this resource over competing downloads like JavaScript bundles and CSS files. Combined with a tag in the document head (which triggers early discovery before DOM construction) and AVIF format (smallest file size), these three attributes together are the most impactful LCP improvements available. Also set decoding='sync' on the LCP image to force immediate rasterization.

What is the fastest possible LCP score?

The fastest LCP is achieved by not using a rasterized image at all. Inline SVG or CSS gradient heroes have zero network overhead — the LCP element is painted the exact millisecond the DOM renders, consistently producing LCP scores of approximately 400ms globally regardless of connection speed or CDN coverage. For sites where the hero must be a photograph, combining AVIF format, fetchpriority='high', a preload link tag, and CDN caching with Cache-Control: immutable achieves LCP scores in the 800ms-1.2s range for returning visitors.

Why Your LCP is Failing and How to Fix It Once and For All

Key Takeaways

✓San Francisco origin server + London user = 150ms TTFB before download starts — CDN is mandatory
✓Cache-Control: immutable means returning users see LCP from local disk cache, near-zero milliseconds
✓AVIF serves 30% fewer bytes than WebP — for a 4MB hero, that is 1.2MB less to download before LCP
✓CLS and LCP fail together when images lack width/height attributes — browser cannot reserve space

The Tyranny of the LCP Metric

Google introduced Core Web Vitals to quantify user experience, but it created an engineering nightmare. Among the metrics, Largest Contentful Paint (LCP) reigns supreme. It demands that the largest visual element on the screen (almost always a Hero Image or a massive text block) fully renders within 2.5 seconds.

If you fail, Google Search Console flashes red, your SEO algorithms quietly dock your search rankings, and your users internally perceive your brand as "slow."

In 2026, dropping an <img> tag onto an HTML page and hoping for the best is no longer sufficient. High-fidelity web design demands sprawling, cinematic hero images. Here is the definitive guide to wrestling your LCP down to the sub-1-second golden zone.

Diagnosis: Why LCP Frequently Fails

Before fixing it, identify why the browser is taking 3 seconds to paint your image. The browser's critical rendering path is chaotic.

Discovery Time: The browser downloads HTML, parses it, and doesn't notice the hero image until line 140.
Resource Contention: Your image request competes against 15 Megabytes of React hydration scripts, CSS files, and third-party analytics trackers.
Payload Bloat: The image is fundamentally too heavy. Downloading 4MB of raw pixels takes a full second over an average 4G connection, regardless of how fast your server is.
The Lazy Loading Trap: The single worst mistake developers make is putting loading="lazy" on their Hero image. This explicitly tells the browser "this image isn't important, download it last." (Lazy loading is the right call for everything below the fold — see the complete lazy loading implementation guide for where it actually belongs.)

Step 1: Force Early Discovery via Preload Scanners

You cannot make light travel faster, but you can tell the browser to start downloading earlier.

The browser's "Preload Scanner" reads the raw HTML string searching for <link> tags before it even constructs the DOM. Leverage this heavily. Add a preload directive to the <head> of your document targeting the exact LCP hero image.

<head>
  <!-- Force the browser to fetch the LCP candidate instantly -->
  <link 
    rel="preload" 
    as="image" 
    href="/images/hero-lg.avif" 
    imagesrcset="/images/hero-sm.avif 400w, /images/hero-lg.avif 1200w"
    imagesizes="100vw"
  >
</head>

By the time the browser finishes parsing the CSS tree, the image is already downloaded and sitting in cache, ready for an instant render.

Step 2: The `<picture>` Element Priority

If you are using modern formats (and you must use AVIF and WebP for LCP), you cannot just slap a .jpg in the source attribute. But <picture> tags can cause discovery issues if not structured properly.

Combined with fetchpriority="high", you explicitly command the network layer to pause background JavaScript and focus entirely on this asset.

<picture>
  <source type="image/avif" srcset="/images/hero.avif">
  <source type="image/webp" srcset="/images/hero.webp">
  <img 
    src="/images/hero.jpg" 
    alt="Spectacular Hero Image"
    fetchpriority="high"
    decoding="sync"
  >
</picture>

Note: We force decoding="sync" for LCP images to enforce immediate rasterization, whereas below-the-fold images should use decoding="async".

Step 3: Server-Side Aspect Ratios (The Anti-CLS Measure)

LCP often fails alongside CLS (Cumulative Layout Shift) if the browser doesn't know the dimensions of the image before it downloads.

Always supply physical width and height attributes mapped to the intrinsic aspect ratio. The CSS will constrain the physical width to responsive sizes, but the browser utilizes the HTML attributes to reserve the exact vertical space in the DOM instantly.

img.hero {
  width: 100%;
  height: auto; /* Uses the intrinsic aspect ratio from HTML attributes */
}

Step 4: Edge CDN Architecture

If your LCP image is sitting on a node in San Francisco, and the user is in London, you lose 150ms to TTFB (Time to First Byte) latency before downloading even begins.

Your media must be cached heavily at Edge nodes. Configure your CDN headers to ensure LCP assets are effectively immortal:

Cache-Control: public, max-age=31536000, immutable

This guarantees that returning users experience an LCP of almost zero milliseconds, as the file pulls directly from the local disk cache without revalidating.

Step 5: SVGs, Gradients, and the CSS Bypass

The ultimate LCP hack? Do not use a rasterized image at all.

If your hero design is geometric, uses illustrations, or abstract shapes, convert it entirely to an inline SVG or a complex CSS gradient.

When you inject <svg> directly into the HTML document, there is strictly zero network overhead for the image. The HTML payload increases by maybe 5KB, but the LCP is painted the exact millisecond the DOM renders. This consistently results in LCP scores of 400ms globally.

<!-- Inside your Hero Section -->
<svg viewBox="0 0 100 100" class="absolute inset-0 w-full h-full"> ... </svg>

Summary Checklist for Perfection

If your LCP is in the red, run through this ruthless checklist:

Is loading="lazy" removed from the hero image? (It better be)
Is fetchpriority="high" added to the <img> tag?
Is the image served in AVIF format?
Is the image physically sized to the viewport, rather than loading a 4000px Desktop image on a mobile device?
Are you using a preload <link> tag in the document head?

Mastering LCP is not an art; it is a rigid science. Execute these five steps flawlessly, and you will secure the elusive green Web Vitals checkmark that modern SEO demands.

Continue reading

Try Optimage — it's free

Compress, convert, and optimize images in seconds. No sign-up, no limits.

Start Optimizing Free

← Back to The Optimage Journal