Lazy Load by WP Rocket

Description

Lazy Load by WP Rocket displays images and/or iframes on a page only when they are visible to the user. This reduces the number of HTTP requests mechanism and improves the loading time.

This plugin works on thumbnails, all images in a post content or in a widget text, avatars, smilies and iframes. No JavaScript library such as jQuery is used and the script weight is less than 10KB.

You can also replace Youtube iframes by a preview thumbnail to further speed up the loading time of your website.

Dependencies

Lazyload script: https://github.com/verlok/lazyload

Related Plugins

  • Imagify: Best Image Optimizer to speed up your website with lighter images.
  • WP Rocket: Best caching plugin to speed-up your WordPress website.

Installation

  1. Upload the complete rocket-lazy-load folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

Installation Instructions
  1. Upload the complete rocket-lazy-load folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
How can I deactivate Lazy Load on some pages?

You can use the do_rocket_lazyload filter.

Here is an example to put in functions.php files that disable lazyload on posts:

add_action( 'wp', 'deactivate_rocket_lazyload_on_single' );
function deactivate_rocket_lazyload_on_single() {
    if ( is_single() ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );
    }
}
How can I deactivate Lazy Load on some images?

Simply add a data-no-lazy="1" property in you img or iframe tag.

You can also use the filters rocket_lazyload_excluded_attributes or rocket_lazyload_excluded_src to exclude specific patterns.

How can I change the threshold to trigger the load?

You can use the rocket_lazyload_threshold filter.

Code sample:

function rocket_lazyload_custom_threshold( $threshold ) {
    return 100;
}
add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );
I use plugin X and my images don’t show anymore

Some plugins are not compatible without lazy loading. Please open a support thread, and we will see how we can solve the issue by excluding lazy loading for this plugin.

Reviews

Best lazy load plugin we tried – and we tried almost all

We tried almost all lazy load plugins on the market, and this one came out completely superior winner.

Our server is running php7, mysql 5.7, multisite environment and we needed this for one of the sites with many images that were taking very long to load on mobile.

We looked at the reviews and user number first.

So we tried A3 first. It worked ok, but not quite. The problems were: our images that had smooth fade-in and zoom-in functions before lost them. We could not exclude these image because they had no classes. Also, the loading was not very smooth and fast, lagging quite a lot. Another problem was that our Slider Revolution disappeared every time we reloaded the page that we were in the middle of. We excluded image classes for the Slider Revolution, but it did not help (probably because they are background images by origin).

So we uninstalled A3 and installed BJ. BJ made our Slider Revolutions disappear completely right away, no matter if the page was reloaded or not. Tried excluding Slider Revolution classes, did not help. So we deinstalled.

We tried other less known plugins that did not meet the standards.

Deinstalled.

We were feeling reluctant towards trying Lazy Load by WP Rocket, because of several negative reviews on here, and not so many overall users. We installed.

Disco.

Slider Revolution in place, undisturbed. Fast. Smooth. Realy faaast and very smoooooth. You could barely detect images being loaded on desktop. We tested mobile environments: huge improvement! It worked flawlessly, exactly how you’d like it to.

There are many factors that affect how a plugin performs in different environments, configurations and situations.

For us, this one, Lazy Load by WP Rocket, was incomparably the best one, worked completely perfect and more than satisfactory.

Five stars. Highest recommendations. Do not let some negative reviews discourage you, this may be a winner for you too.

Poor support but great plugin nevertheless

I am grateful for the plugin which mostly works. Only minus points:

* Known, reported issues seem to stay unfixed for weeks
* No response for days/weeks to bug reports
* Poor documentation (although pointing the the well-documented verlok/lazyload README.md or repo would answer already many questions)

This could all be better from an organizational point of view.

But still 5 points since after some tweeking I got it working and our site loads much, much faster!

So I would really like to thank the developers!

Plugin works, but with image overscale bug

Okay support is tragic for this plugin, if not tragic, then probably there is no support.

Script is written almost properly they’re not using any known open source lazyload library or at least not specifying which it is. In script there is some kind of filemod bug or something which scales images to full-width of screen and sets it as their natural size so guess it becomes embedded in file itself.

I’ve reported these problems but no one responds for more than a week.

But overall, maybe one of the best lazyload plugins that work out of the box on default template without any modifications (So its mostly suitable for demos only and not production).

How I do lazyload fixes, still unfinished.


// Stack which holds all callbacks to be executed after image is loaded.
window.afterLazyImageHasLoadedStack = [];

// The executer which iterrates through callback stack.
var afterLazyImageHasLoadedStackExecuter = function () {
    window.afterLazyImageHasLoadedStack.forEach(function (functionToCall) {
        functionToCall();
    });
};

// Binding executer to callback when image loaded trigger.
$(document).ready(function () {
    if (typeof window.lazyLoadOptions !== 'undefined' && Object.keys(window.lazyLoadOptions).length > 0) {
        window.lazyLoadOptions['callback_set'] = afterLazyImageHasLoadedStackExecuter;
    }
});
...
// This is how I push into the stack some callbacks which need to be recalculated after images are loaded

$(document).ready(function () {
        if (typeof window.afterLazyImageHasLoadedStack !== 'undefined') {
            window.afterLazyImageHasLoadedStack.push(positionSidebar);
            window.afterLazyImageHasLoadedStack.push(stickyAssignment);
        }
});

//Reloading images with proper naturalWidth and naturalHeight
jQuery(function($){
    $(document).ready(function() {
        window.afterLazyImageHasLoadedStack.push(function(element) {
            var imgNat = document.createElement('img');
            console.log(element.src);
            imgNat.setAttribute('src', element.dataset.hasOwnProperty('lazySrc') ? element.dataset.lazySrc : element.src );
            imgNat.setAttribute('height', element.getAttribute('height'));
            imgNat.setAttribute('width', element.getAttribute('width'));
            imgNat.setAttribute('alt', element.getAttribute('alt'));
            imgNat.setAttribute('class', element.getAttribute('class'));
            if (element.hasAttribute('data-lazy-srcset')) {
                imgNat.setAttribute('data-srcset', element.getAttribute('data-lazy-srcset'));
            }
            if (element.hasAttribute('data-lazy-sizes') && element.attribute) {
                imgNat.setAttribute('data-sizes', element.getAttribute('data-lazy-sizes'));
            }
            if (element.hasAttribute('data-copyright')) {
                imgNat.setAttribute('data-copyright', element.getAttribute('data-copyright'));
            }
            if (element.hasAttribute('data-description')) {
                imgNat.setAttribute('data-description', element.getAttribute('data-description'));
            }
            if (element.hasAttribute('data-headline')) {
                imgNat.setAttribute('data-headline', element.getAttribute('data-headline'));
            }

            imgNat.setAttribute('data-was-processed', true);

            imgNat.onload = function() {
                if (window.jQuery.length > 0) {
                    $(element).replaceWith($(imgNat));
                } else {
                    element.parentNode.replaceChild(imgNat, element);
                }
            };
        });
    });
});

As well I had written code for image rapplication, with newely created image element in js and replacing with it existing one, which makes it load with proper naturalWidth and naturalHeight.

Worked the First Time!

I use WordPress as a static site generator. External script can’t point to the plugin. This is the only one I could find that embeds the CSS and JavaScript on the page. I wrote about it here: https://www.rtcx.net/lazy-loading-youtube-videos.html

Read all 50 reviews

Contributors & Developers

“Lazy Load by WP Rocket” is open source software. The following people have contributed to this plugin.

Contributors

“Lazy Load by WP Rocket” has been translated into 2 locales. Thank you to the translators for their contributions.

Translate “Lazy Load by WP Rocket” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.4.9

  • Enhancement: Update lazyload script to the latest available version
  • Enhancement: Use lazy-sizes to prevent W3C validation error when sizes is defined but srcset is not
  • Enhancement: Parse images or iframes only if the element is selected to be lazyloaded in the options
  • Fix: Prevent warning for lazyload+v in Google Search Console
  • Fix: Prevent PHP Notice with WooCommerce for product images

1.4.8

  • Notice: Minimum WordPress version required is now 4.7
  • Enhancement: Update lazyload script version
  • Enhancement: Remove placeholder image to improve perceived loading time
  • Enhancement: Compatibility with Youtube privacy URL
  • Enhancement: Update play image to match Youtube logo
  • Enhancement: Support Youtube URL parameters
  • Enhancement: Lazyload images displayed with wp_get_attachment_image(). /!\ no fallback if JavaScript is disabled
  • Fix: Use the correct size set in srcset for the lazyloaded image
  • Fix: Prevent Youtube thumbnail replacement on playlists
  • Fix: Prevent iframe lazyload on AMP pages
  • Fix: Correct text domain for translations (thanks @ Chantal Coolsma)

1.4.7

  • Fix compatibility with infinite scroll
  • Prevent lazyload on masterSlider images

1.4.6

  • Correctly include version 8.5.2 of lazyload script
  • Prevent 404 error on lazyload script if URL contains “-v”

1.4.5

  • Rename Setting Page Name in WP Menu
  • New Product Banner in Settings Page
  • Conditionally load a different version of the script depending on browser support of IntersectionObserver
  • Fix a bug where images initially hidden are not correctly displayed when coming into view (slider, tabs, accordion)

1.4.4

  • Admin Redesign

1.4.3

  • Plugin is compatible again with PHP < 5.4

1.4.2

  • Update lazyload script to bring back compatibility with IE9/10

1.4.1

  • Fix bug caused by a too aggressive cleanup

1.4

  • New option: replace Youtube videos by thumbnail. This option can improve your loading time a lot, especially if you have multiple videos on the same page

1.3.3

  • 2017-09-16
  • Prevent scripts and styles being removed during html parsing

1.3.2

  • 2017-09-12
  • Fix images not displaying in certain conditions because image attributes exclusion was not working correctly

1.3.1

  • 2017-09-07
  • Don’t apply lazyload on Divi slider

1.3

  • 2017-09-01
  • Improve HTML parsing of images and iframes to be faster and more efficient
  • Make the lazyload compatible with fitVids for iframes
  • Don’t apply lazyload on AMP pages (compatible with AMP plugin from Automattic)
  • Use about:blank as default iframe placeholder to prevent warning in browser console
  • Don’t apply lazyload on upPrev thumbnail

1.2.1

  • 2017-08-22
  • Fix missing lazyload script
  • Don’t lazyload for images in REST API requests

1.2

  • 2017-08-22
  • Update lazyload script to latest version
  • Change the way the script is loaded

1.1.1

  • 2017-02-13
  • Bug fix: Remove use of short tag to prevent 500 error on some installations

1.1

  • 2017-02-12
  • New
    • JS library updated
    • Support for iFrame
    • Support for srcset and sizes
    • New options page

1.0.4

  • 2015-04-28
  • Bug Fix: Resolved a conflict between LazyLoad & Emoji since WordPress 4.2

1.0.3

  • 2015-01-08
  • Bug Fix: Don’t apply LazyLoad on captcha from Really Simple CAPTCHA to prevent conflicts.

1.0.2

  • 2014-12-28
  • Improvement: Add « rocket_lazyload_html » filter to manage the output that will be printed.

1.0.1.1

  • 2014-07-25
  • Fix stupid error with new regex in 1.0.1

1.0.1

  • 2014-07-16
  • Bug Fix: when a IMG tag or content (widget or post) contains the string “data-no-lazy”, all IMG tags were ignored instead of one.
  • Security fix: The preg_replace() could lead to a XSS vuln, thanks to Alexander Concha
  • Code compliance

1.0

  • 2014-01-01
  • Initial release.