Home / Articles / WordPress / Enable Lazy Loading For Images On Your WordPress Website!

Enable Lazy Loading For Images On Your WordPress Website!

Lazy loading is a very useful trick that loads your web pages a lot faster, or seemingly a lot faster. Let's say you have a web page with 20 images, which is not too uncommon. How long do you think it takes for all 20 images to load and how much of your page load time does it contribute to? One might think a significant chunk of the loading time for pages like that goes toward the images and other data heavy objects.

With lazy loading, on the other hand, you can delay the loading of images not yet in view of the reader. And this means that what the reader does actually see, loads a lot faster, suggesting that the website is a lot faster than it really is.

Lazy loading can be easily accomplished with free WP plugins. You should know that certain caching plugins like WP Rocket include lazy loading scripts as part of their functionality.

Rocket Lazy Load

This plugin reduces the total number of HTTP requests which means it reduces the number of times your server needs to communicate to convey the same amount of information. As a result, loading time and use of server resources decrease.

Rocket Lazy Load works to display only images visible to the reader. And it also works on pretty much all images (including thumbnails, images in post content or in text widget). The plugin does not employ jQuery, it works by adding some JavaScript to your page headers, and the script is incredibly light. And here's the most appealing part of the plugin in my opinion – it has no options at all, simple plug and activate, you are done.

The fact that it has no options may not be very appealing to a few people. You have other alternatives for lazy loading which permit more in the way of choice, please do read on!

[icon link] Download Rocket Lazy Load

Lazy Load

This Lazy Load plugin uses jQuery.sonar to load images as and when a reader scrolls down and the images come into view. Lazy Load was put together by some awesome people from Automattic. Lazy load should improve site load times and also improves server bandwidth. The plugin ensures decreased use of server bandwidth by loading only images that are in view of the reader load.
[icon link] Download Lazy Load

BJ Lazy Load

BJ Lazy Load reduces server bandwidth usage and also makes your site faster by replacing all post images, thumbnails, content iframes and gravatars with a placeholder. Embedded videos from YouTube and Vimeo are also covered by the plugin.

You can also try lazy loading on images and iframes in your theme as well.

BJ

The biggest difference is the availability of choice which isn't available with most other lazy loading plugins. You can choose among images in content, thumbnails, text widgets, gravatars, iframes and different image classes for which you can enable/disable lazy loading.

[icon link] Download BJ Lazy Load

Other Plugins

Advanced Lazy Load is yet another lazy loading plugin for WordPress powered websites and it does come with a lot in the way of options very similar to BJ Lazy Load. You can also opt for mobile specific lazy load settings which may be something websites with a large number of mobile page views may require.

Lazy Load XT is a free plugin that offers lazy loading for pretty much every type of content including iframes, videos and obviously images. The plugin is also a feather weight plugin and doesn't require too many resources to function effectively. Lazy Load XT works by replacing src attributes with data-src when sever requests are made for front end web page content.

Over To You!

Lazy loading definitely results in better user experience. Lazy Loading is very important for media heavy websites, it's a simple trick that ensures a very happy reader.

Remember a lazy load plugin only delays loading of images. For a truly efficient website with optimal performance, you may want to consider using a CDN to help serve all static data and a powerful caching plugin like W3 Total Cache to convert your dynamic content into static content.

Photo of author

Article by Vishnu

Keep Reading