LazyLoad for images

LazyLoad delays the loading of images on your website until the user scrolls down the page and actually needs to see them.

LazyLoad addresses the Google PageSpeed recommendation to Defer offscreen images. We do this in an SEO-friendly way, as recommended by Google.

In this article

Note: WordPress introduced LazyLoad into core from version 5.5. This will be automatically disabled when WP Rocket's LazyLoad is active.

How does it help your website?

"When we lazy load images and video, we reduce initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance."
Ref: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Let’s say you have 10 images on your page, with a total of 2MB. If all 2MB worth of images have to be downloaded at once, that will impact the overall load time and perceived performance. This will especially impact mobile devices which have more limited processing power and are often on slower internet connections.

For mobile users that are paying for data, it also means they don’t have to pay to download images they won’t see, if they don’t scroll the entire page.

Standard images

All images, including those from external domains, found within <img> tags, added to your content in posts, widgets etc, should be lazyloaded automatically.

Images loaded from JavaScript will not be lazyloaded. And, for background images loaded from CSS files, please refer to this section.

Background images

Background images are a special case and are more complex to lazyload since there are multiple ways they can be added to a page.

WP Rocket's LazyLoad feature will work on background images when they are applied inline in the HTML on the following elements:

  • div
  • span
  • section
  • li
  • figure
  • a

An example of compatible markup:

<div style="background-image: url(image.jpg)">

The div element can have other attributes, classes, etc, it will still work.

The element will then be transformed into:

<div data-bg="url(image.jpg)" class="rocket-lazyload" style="">

An example of background image markup that will be lazyloaded:

With LazyLoad applied, the HTML is transformed to:

Some common page builders use this markup and therefore background images will be automatically lazyloaded when using:

  • Divi - using a parallax background image on a section
  • Avada - using a background image on a section

LazyLoad for background images is automatically disabled when the Bridge theme is used.

CSS background images

If the background image is added in a CSS file or internal CSS style tag, you can use the LazyLoad for CSS background images feature.

Picture element and WebP

Images added with the picture element will be lazyloaded, including WebP images added this way.

Each source element within the picture element will be lazyloaded.

How to check if LazyLoad is working

Use the Network tab in your browser

  • Open the developer tools in your browser. In Chrome: View > Developer > Developer Tools
  • Click the Network tab.
  • Click theImg filter
  • Reload the page
  • As you scroll down the page, images that are lazyloaded will appear in the Network tab as they are needed:

Markup changes

There are 2 places you will see changes:

  1. In the HTML of the page when viewing the page source
  2. When using the dev tools in your browser, the Elements/Inspector panel will show the HTML after the LazyLoad JavaScript has been applied

Standard images

Inside the <img> tag in the page source you will see:

  • The image URL in the src will be replaced with a placeholder:
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E".
  • data-lazy-src attribute is added.
  • If the images use srcset, you’ll see data-lazy-srcset and data-lazy-sizes
  • <noscript> tag added after the image.

In the browser's dev tools you will see:

  • lazyloaded class is added.
  • data-ll-status="loaded" is added.
  • <noscript> tag added after the image.

Background images

Inside the <div> or other tag, in the page source you will see:

  • rocket-lazyload class is added.
  • data-bg attribute is added.
  • <noscript> is not added.

In the browser's dev tools you will see:

  • rocket-lazyload class is added
  • lazyloaded class is added
  • data-ll-status="loaded" is added

Picture element

In the page source you will see:

  • The image URL in the src will be replaced with a placeholder:
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
  • data-lazy-srcset and data-lazy-sizesis added on each <source>
  • <noscript> tag added after the image

In the browser's dev tools you will see:

  • lazyloaded class added in the <img>.
  • data-ll-status="loaded" is added.
  • <noscript> tag added after the image.

Problem solving

If LazyLoad causes a problem you can disable it in various ways:

Technical notes

  • The LazyLoad feature uses this script: https://github.com/verlok/lazyload.
  • LazyLoad is applied on the template_redirect hook.
  • The LazyLoad script is already minified and is loaded at the footer asynchronously.
    wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js
  • srcset is supported.
  • If needed, the <noscript> element can be removed with this filter: add_filter( 'rocket_lazyload_noscript', function (){return false;});
The process:
  • LazyLoad is a two part process.
  • First we process the HTML in PHP, using a regex to detect images and rewrite the img src(s) with the placeholder.
  • Therefore if you have malformed code on your site it could cause issues here or images could escape detection.
  • We replace the image src with this placeholder:
    data:image/svg+xml,%3Csvg%20xmlns='https://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E
  • The second part of the process is handled by the LazyLoad script when the page is loaded.
  • By default the threshold is 300, i.e. images within 300 pixels of the viewport will be lazyloaded.
  • The threshold can be adjusted: https://docs.wp-rocket.me/article/1032-adjust-lazyload-threshold
  • When the images reach the threshold the placeholder is replaced with the real image. To do this, the <img> tag is modified:
  • The image src is replaced with the original image stored in data-lazy-src or data-bg.
  • Depending on the specific type of image (see above) a class is added to the <img> tag: lazyloaded and/or rocket-lazyload.
  • data-ll-status="loaded" is added to the <img> tag.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles