Some images are not lazyloaded

If you've already activated the LazyLoad and LazyLoad for CSS background images features, you've verified the page is cached, but some images are still not lazyloaded and/or PageSpeed lists some images under the Defer offscreen images audit, then it's possible to be caused by one of the reasons presented in this article.

WooCommerce product gallery

These images use the data-src attribute which is on the compatibility list below.

The images are excluded for compatibility

When the code of the image contains certain attributes which are known to be used for conflicting purposes, they are automatically excluded.

If you want to check this for your site:

  • Visit your page while bypassing WP Rocket, by adding ?nowprocket to the URL, e.g.
  • Go to View > Page Source to see the HTML
  • Find the image that isn't lazyloaded. Check the img tag for any of the following attributes or values which will cause the image to be excluded from LazyLoad:


Images encoded in Base64

Background images with Base64 encoding are not lazyloaded to ensure compatibility.

Background images and Bridge Theme

Lazyloading of background images for Bridge theme is disabled for compatibility.

Conflict with ShortPixel Global WebP rewrite

When this feature in ShortPixel is activated, our LazyLoad doesn't work correctly.

The markup isn't supported

  • Images which markup has double quotation marks around the value of the src attribute are can't be lazyloaded by

    • Non-supported markup:
      <img src=https:/ class="photos">
    • Supported markup:
      <img src="https:/" class="photos">
  • Background images added in CSS files or from internal style tags, can be lazyloaded from WP Rocket 3.15 using the LazyLoad for CSS background images feature.

    However, if you're using WP Rocket in a version older than 3.15, this specific LazyLoad feature won't be available, and those background images will not be lazyloaded.

    A common case is background images from Elementor which are loaded in separate CSS files instead of in the HTML directly. In that case you may try this plugin (no affiliation with WP Rocket): Lazy Load Elementor Background Images.

Conflict with another lazy load script

If your theme or another plugin is also applying lazy load, this could cause conflicts and our LazyLoad may not work as expected.

Images injected by JavaScript

WP Rocket can only apply LazyLoad to images which are present in the HTML when the page loads. If a plugin is injecting images into the page with JavaScript after the page has loaded, they will not be lazyloaded.

On the other hand, the LazyLoad for CSS background images feature will work on images associated with new HTML classes that were injected by JavaScript.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.