Hero image tanks LCP: too big, or discovered too late?

Part of our guide on adding review markup correctly

Distinguish if your hero image's large size or late discovery causes LCP failure, then fix each to restore Core Web Vitals.

How to confirm the hero image is actually the LCP element

Say you added a large hero image and see the Core Web Vitals fail LCP. Before fixing, confirm the hero image is the actual LCP element, not text or another image. Tools like Chrome DevTools Performance panel or WebPageTest show the largest content element reported.

Open DevTools, go to Performance, record page load, and look for the LCP event. It highlights which element triggered the LCP and its render timing. If the hero image's file name or element highlights, you have the right target to fix.

If the hero image is not the LCP, fix the actual element causing the delay. Focusing on the wrong element wastes time and effort.

Sometimes the hero image might look like the culprit, but a banner ad or a font file can be the true LCP element. Check carefully for elements that overlap visually with the hero image but load slower. If that sounds like your situation, read up on what to avoid on social media next.

Look at the size and timing details of the LCP event. If the timestamp matches when the hero image appears, that's confirmation. If it corresponds to a later element, fix that one instead.

Reading the LCP sub-parts: load delay and render delay vs load time

Imagine two websites with the same hero image size; one fails LCP, the other does not. The difference lies in how quickly the browser finds and renders the image.

LCP breaks down into load delay, render delay, and total load time. Load delay is how long before the browser starts fetching the image, often delayed by missing preload or lazy-loading. Render delay is time from fetch start to the image fully rendering. Total load time is the sum. There is more on google search console functions in a separate guide.

Understanding these parts helps pinpoint the bottleneck. A long load delay means the image is discovered late. A long render delay means the image is large or the server slow.

Load delay varies widely depending on network and server speed. On a fast connection, it might be under 300 ms, but on slow mobile, it can exceed 2 seconds, pushing LCP to fail.

Render delay depends on the image decoding speed and CPU usage. Large, complex images take longer. For example, a 2 MB JPEG might decode in 800 ms on desktop but over 2 seconds on low-end phones. We cover how to learn seo for beginners in its own article.

Checking these sub-parts in DevTools helps decide if you need to speed up discovery or optimize the image itself. Both can add up to an LCP failure.

Cause 1: too big – file size, dimensions, modern format, responsive srcset

Say you add a hero image with 2 MB file size and 3000 pixel width. It often causes LCP failures due to long render delay. Large file sizes increase image decode and paint time.

Reducing file size to 200–400 KB and width to match largest display (usually 1200-1600 pixels) cuts render delay drastically. Use modern formats like WebP or AVIF, which usually halve file size while preserving quality. If that sounds like your situation, read up on remove risky contacts safely next.

Setting responsive srcset attributes lets browsers pick smaller images on smaller devices, saving bandwidth and rendering time. Without it, all users download the largest image regardless of screen size.

Fixing image size is the most straightforward way to fix LCP caused by large hero images.

• File size reduction– target <500 KB for hero images
• Dimensions– scale to max 1600 pixels width
• Modern formats– WebP or AVIF preferred
• Responsive srcset– serve device-appropriate sizes

Cause 2: discovered too late – lazy-loading the LCP image, missing preload, no fetchpriority=high

Picture a site where the hero image is large but loads quickly. Now imagine the same image lazy-loaded or without preload. The browser delays fetching it, causing a long load delay and LCP failure. For the detail, see our notes on fast digital license delivery.

Lazy-loading a hero image is a common mistake. Browsers skip fetching it until user scroll or other triggers, which delays LCP by several seconds.

Missing preload hints or the new fetchpriority=high attribute means the browser treats the hero image as low priority and delays fetching until other resources finish. This causes the hero image to be 'discovered too late'.

Add a preload link tag in the document head for the hero image or ensure fetchpriority=high is set on the img tag. Remove lazy-loading on hero images.

Preload tags tell the browser to fetch the hero image early, but only if correctly used. Make sure the as attribute is set to 'image' and the href matches the image URL exactly, including query strings.

Fetchpriority=high is a newer attribute that signals the browser to prioritize fetching the image. It acts as a supplement to preload and can help in browsers that support it.

If you miss these hints or lazy-load the hero image, the browser treats it as non-critical and fetches it after other resources. That delay alone can add over 1 second to LCP on typical mobile networks.

• Lazy-loading hero image delays load start– avoid it
• Add preload link rel='preload' for hero image
• Use fetchpriority='high' on hero image tag

Why lazy-loading a hero is the most common self-inflicted cause

Imagine adding lazy-loading to all images to speed up page load. This usually helps except for the hero image. The hero image appears in the viewport immediately, so lazy-loading delays its fetch and breaks LCP.

Developers sometimes apply lazy-loading by default to all images, unaware that the hero image is exempt. This mistake is easy to fix but often overlooked.

Removing lazy-loading from the hero image alone restores fetch timing and fixes LCP without losing lazy-loading benefits on other below-the-fold images.

Check your image attributes and remove loading='lazy' from the hero image tag only.

How to re-measure in the field, not just lab, after the fix

Say you fixed image size and preload but want to verify improvements in real user conditions. Lab tools like Lighthouse simulate fast connections and can miss real-world delays.

Use real user monitoring (RUM) tools such as Chrome User Experience Report (CrUX) or browser performance API to collect field LCP data. This measures actual impact for your visitors across devices and networks.

Test on multiple devices and connection speeds, because mobile and slow 3G connections show the biggest LCP improvement after fixing hero image issues.

Measure before and after fixes to confirm your changes lower LCP times below 2.5 seconds, the recommended threshold.

1. Enable real user monitoring in your analytics or use CrUX data.
2. Collect LCP metrics from visitors over days or weeks.
3. Compare median LCP times before and after hero image fixes.
4. Adjust image or preload if LCP remains above 2.5 seconds.

How to stop hero image LCP failures from happening again

You fixed your hero image once; now you want to prevent regressions. Establish these habits:

Always check LCP with tools after changing hero images. Use DevTools to confirm the LCP element.

For every new hero image, optimize size under 500 KB, use responsive srcset, and modern formats.

Add preload and fetchpriority=high attributes every time you add or update the hero image.

Avoid lazy-loading the hero image even if lazy-loading other images site-wide.

Integrate performance checks into your deployment pipeline or content management process.

• Pre-optimize and compress hero images before upload.
• Automate adding preload and fetchpriority tags.
• Exclude hero images from lazy-loading site-wide rules.
• Regularly test real user LCP metrics after updates.

Questions people still ask

I’ve had to track down LCP regressions caused by hero images more times than I can count: knowing the exact cause saves hours.