Lazy Load Plugins for WordPress Preview image

Even with a caching plugin, your website is still too slow? If you have a lot of images on your website, this could be the cause for your bad speed metrix. In this case, lazy load plugins for WordPress may be helpful.

What does lazy load actually mean?

With the lazy load technique, certain contents of a website, such as images or videos, are only loaded when needed. And when is it needed? Of course, only when it is in or just before the user’s visible area. If the user does not scroll to the end of the page, the images at the end of the page are not loaded at all.

This avoids superfluous requests and improves the performance of the website, despite the large number of images. This is because they are replaced by a placeholder via a script. Only when the user scrolls into the area of the image, the placeholder is replaced by the actual image.

How does this affect the loading time?

For my test, I analyzed a blog post without and then with plugin using Pingdom’s performance tool.

You can clearly see what the lazy loading technique does:

  • The page size has decreased from 1.6 MB to 283 KB.
  • The number of requests has decreased from 45 to 15.

Of course, this also has an impact on the loading time. This has decreased from 821ms to 406ms. So the page is twice as fast!

Speed Test without Lazy Load Plugin

Pingdom Test without Lazy Load
Pingdom Test without Lazy Load Plugin

Speed Test with Lazy Load-Plugin

Pingdom Test with Lazy Load
Pingdom Test with Lazy Load Plugin by WP Rocket

Are there any disadvantages?

The only possible disadvantage of lazy loading concerns the user experience. If you set the delay (threshold) wrong, the user will have to wait too long for the image to load.
Usually, the treshold value for most plugins is set to 200, which means that the image is already loaded when it is 200px before the user’s visible area. The larger the value, the earlier the image is loaded. A value smaller than 200 is considered annoying by most users.

Lazy Load Plugins

There are many lazy load plugins for WordPress. All of them can of course load images with a time delay, some of them offer additional features. E.g. Lazy Load for videos and iframes or special visual features.
All plugins listed here I have already used or tested myself.

Even if you are using lazy loading, you should still optimize and compress your images.

a3 Lazy Load

a3lazy load

I have used the Plugin a3 Lazy Load very often and with good results. The special thing about this tool are the many features and setting options. So it offers lazy load not only for images, but also for videos, iframes and gravatars. Even the images in widgets can be lazy loaded.

If you want to exclude certain pages or image classes from lazy loading, you can easily set that. Because the plugin offers you a clear admin interface.

LazyLoad by WP Rocket

Lazy Load by WP Rocket

Also with LazyLoad by WP Rocket you can load images and videos only when they are needed. A big advantage is that the plugin does not require a JavaScript library like jQuery and is very small with only 10 KB.

The settings are very limited compared to a3Lazy Load. And you don’t have a menu item to set desired options.

If you want to load certain images normally, you can only set it up manually. The same applies to the value at which the images should be preloaded. For this you have to add the following code in the functions.php of your child theme:

function rocket_lazyload_custom_threshold( $threshold ) {
    return 100;
}
add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );

For my website, this tool provided the best values. In the meantime I use the caching tool from WP Rocket, which already contains the lazy load functionality.

Lazy Loader

Lazy Loader

With Lazy Loader you can delay loading your images, videos and iframes. For me, the lazy loading of images in the widget area unfortunately often did not work, but it works very well with Masonry layouts.

Lazy Loading in WordPress Version 5.5

The new version WordPress 5.5 already includes Lazy Load for images. If this feature is enough for you, you can do without additional plugins.

If you want to disable the WordPress lazy loading feature, you can add the following snippet to the functions.php of your child theme.

// Disbale WordPress Lazy Loading
add_filter('wp_lazy_loading_enabled', '__return_false');

Conclusion:

If you have a lot of images on your website, you should definitely try a lazy load plugin. Which of the plugins is the best for you, I can not say in general. It often depends on your theme and the layout.

Do you already use a caching plugin for WordPress? Then you can look there in the settings, whether the feature for lazy loading is included. Because some plugins like WP Rocket already contain this technology. So you save yourself another plugin.

* Affiliate Links
Share on Pinterest