Excluded images are still being lazyloaded

This article includes information about images being lazyloaded or broken even if they're excluded from the LazyLoad.

Expected behavior of an excluded image

If you've followed this guide to exclude an image from the LazyLoad, you should expect to see the following:

• The image is not using the lazyloaded class anymore.
• The image is loaded as you visit the page, regardless of its location in the page in relation to the browser viewport.

How to detect there is a problem with the exclusion

However, sometimes you may see an excluded image is:

• Still using the lazyloaded class, or similar.
• Using a loading="lazy" attribute, or similar.
• Only loaded when the viewport reaches its location.
• Triggering Lighthouse's Largest contentful paint image was lazily loaded audit, as per this.

Any of the scenarios listed above indicates that an image is still being lazyloaded. If that's the case, you need to perform a troubleshooting process as shown in the following sections.

Troubleshoot the problem within WP Rocket

Inside WP Rocket, you should make sure the exclusion matches exactly with:

• The image filename, path, and/or extension.
• The class needs to within the img tag. Using classes from div and other tags won't work.

Troubleshoot the problem outside WP Rocket

Sometimes, third party plugin, themes, or WordPress can be the ones lazyloading an image. Please follow these steps to verify if that's the case:

1. Visit your site while bypassing WP Rocket effects, by adding ?nowprocket at the end of the URL.
2. Locate the affected image.
3. Right-click on the image to open the contextual menu, and then click on Inspect/Inspect element.
4. Explore the image's markup and look for lazy load related markup, such as the lazyloaded class, the loading="lazy" attribute, or similar.
5. If your image has such markup changes, you've confirmed it's being lazyloaded by a third party.

At this point, you need to exclude the image from the third party lazyload. If you're unsure how to do it, you should contact their support team.

Note: If you're using WP Rocket's LazyLoad, you should disable the third party lazyload feature to avoid problems.

Common third parties that could be lazyloading your images

The following are a few of the most common third party plugins that could be lazyloading your images:

• Jetpack's Lazy Loading of images
• Opimole's Lazy Load
• Autoptimize lazy-load

Also, WordPress version 5.5 and above includes native lazyloading. If WP Rocket's LazyLoad is disabled, WordPress native lazyloading will be applied to your images.

You can disable WordPress native lazyloading by activating this external plugin:  Disable Lazy Load.

Example

In the below image, you can see how the troubleshooting process can be followed in the ?nowprocket version of the page. In this case, the image is being lazyloaded by Optimole, it's served from the Optimole CDN with the mlqfawd8mrcz.i.optimole.com URL, and contains the data-opt-loaded="true" attribute.