Why hero images should not use lazy loading

WordPress lazy loads images by default to improve page speed. This works well for images further down the page, but lazy loading the main image at the top — the hero image — can actually make your site feel slower. This guide explains why.

What is lazy loading?

Lazy loading is a technique where images are only downloaded when the visitor scrolls close to them. Instead of loading every image on the page upfront, the browser only fetches images as they are about to come into view.

Since WordPress 5.5, all images have loading="lazy" added to them automatically. This is generally a good thing — it means visitors do not waste time and bandwidth downloading images they may never scroll down to see.

Why the hero image is different

The hero image is the large image at the top of your page, often a banner or featured image. It is the first thing visitors see when the page loads.

Because the hero image is already visible on screen when the page appears, lazy loading it makes no sense. Lazy loading tells the browser: "Do not load this image until the visitor scrolls near it." But the visitor is already looking at it. The browser waits unnecessarily before starting to download the image, which delays it from appearing.

This delay directly hurts your LCP (Largest Contentful Paint) score. LCP measures how long it takes for the largest visible element to finish loading, and on most pages, the hero image is that element. If it is lazy loaded, your LCP time increases because the browser waited before even starting the download.

How WordPress handles this

WordPress is aware of this issue. Since WordPress 5.9, it attempts to detect the first image on the page and automatically sets it to loading="eager" instead of loading="lazy". This tells the browser to start downloading the image immediately.

However, this automatic detection does not work perfectly with every theme. Some themes output the hero image in a way that WordPress does not recognise as the first content image. In those cases, the hero image may still get loading="lazy", which hurts performance.

How to check your hero image

You can inspect your hero image to see how it is being loaded:

1. Open your website in Chrome or Firefox.
2. Right-click on the hero image and select Inspect (or Inspect Element).
3. Look at the <img> tag in the code that appears.
4. Check the loading attribute.

If you see loading="lazy", the hero image is being lazy loaded and this may be hurting your LCP score. If you see loading="eager" or no loading attribute at all, the image will load immediately, which is correct.

What to do if your hero image is lazy loaded

If your LCP score is poor and the hero image is the cause:

• Check your theme settings. Many themes have a setting for the featured image or hero banner. Look for an option related to image loading behaviour.
• Contact support. If you are unsure how to resolve it, get in touch and we can take a look at your specific setup.

For the majority of Web60 sites, WordPress correctly identifies the hero image and loads it eagerly. If your performance scores look healthy, no action is needed.