HI Guys, as you can guess from the title, In this post I will be taking a look at BJ Lazy Load plugin for WordPress.  Before we start with the plugin review,  lets talk about Lazy Loading and why it is worth implementing on your website.

What is Lazy Loading and how does it work?

The concept of Lazy Loading is quite brilliant and the brilliance lies in its simplicity. The idea is to defer the loading of images which are not in the view port.  In other words the idea is to only load images which are visible to users.  The images which are below the fold will not be loaded until the user  scrolls to them.  It reduces the amount of resources to be loaded thus resulting in faster webpages.

This technique can be extremely effective for websites with ton of images. So if you are developing a photography websites or a Pinterest like website the you should definitely look into this.

What are good Lazy Load Plugins for WordPress?

Now the question arises which Lazy Load plugin to choose for your wordpress site?  A quick search on wordpress.org throws up dozens of results. In this post I have decided to focus on the BJ Lazy Load Plugin, which in my opinion is the most comprehensive Lazy Load Plugin for wordpress.

Overview of BJ Lazy Load Plugin.

At the time of writing this article (16th Sept 2014), the plugin has over 110,000 downloads and over Fifty 5 star ratings.  Looking at the supports forums and the update cycle, it seems that the plugin is actively maintained and supported by the author. This plugin uses jquery Sonar for detecting the distance of element from viewport  and the Lazy loading  is done by a custom JS script. The plugin is developed and maintained by Bjørn Johansen (Twitter Profile.)

 

Configuring the Plugin

The option panel is quite comprehensive and provides user with wide array of choices.  Here is a complete list of settings:

 1.Apply to Content:

This setting allows you to configure whether you want to apply lazy loading to the images in your post content. If this choice is selected then it makes sure that the images in the post body are optimized for loading.

2.Apply to Post Thumbnails:

This setting lets you choose whether you want to apply lazy loading to post thumbnails.  If this is turned off then all the post thumbnails in a page are loaded at once. I believe that both the Settings 1 and 2 can be merged into a single setting.

3.Apply to Gravatar:

This setting lets you apply lazy loading to gravatar images. Generally gravatar images are smaller in size so I am not sure how much speed gain can be achieved by lazy loading the gravatar images but it is still nice to have this option.

4. Apply to Iframe:

IFrames can also be lazy loaded via this plugin. This can be particularly handy for websites which run advertisements as lot of ads are served via IFrames.

5.Theme Loader Function:

This is an advance feature and  allows you to specify whether to enqueue the js in the theme footer or the theme header. This function can be particularly handy if the theme which you use is missing the wp_footer call

6.Placeholder Image URL:

This function lets you choose a custom placeholder image.  It can be particularly handy if you want to use an image which matches your theme. Take note that you cannot directly upload the placeholder image as it only accepts URL value.   A simple way is to first upload a placeholder image to the WordPress Media Library and then simply copy paste the url.   In case you dont want a custom placeholder image, the plugin will simply load a default placeholder image.

7.Skip Classes:

This setting allows a user to skip lazy loading of certain images. So if you have an image with class i-am-not-lazy then you can specify it in the settings and the plugins will not touch that image. Take note that in order to make use of this setting you will most probably need to make CSS edits.

8.Threshold –

Generally the way lazy load works is that the images are loaded when they appear on the screen. However with this setting you can define the point at which the plugin starts loading the image.  So for example if you set the Threshold to 400,  plugin will make sure that all images within 400px of the viewport are loaded.  Tweaking the threshold  can result in a smoother experience for your users.

9.Infinite Scroll:

If your wordpress theme uses infinite scroll then make sure to turn on this setting. With this setting enabled, plugin will make sure that the Infinite scrolling and Lazy Loading goes hand in hand.  This feature was developed in response to a support request.   This alone proves that the quality of support provided for a free plugin is top notch

Experimental Features:

Currently the plugin has two features under beta

1) Retina Support: So if the device supports retina images, the plugin will automatically load the high res image.

2) Responsive Image: Enabling this setting will fetch the scaled down version of the image from the server

Bonus Feature:

Thats not all folks, there is one additional feature as well.

Skip Lazy Loading on Certain Posts:

This feature can be very handy if you want to skip lazy loading for certain pages / posts.  The small checkbox appears at the right bottom of the post / page editing screen. Checking it will make sure that images on that particular post are not lazy loaded.

 Conclusion

All in All BJ Lazy Load seems like a great plugin which is feature rich , well thought out , simple, useful and actively maintained. The author is helpful and very supportive.  Well that is a killer combo for any wordpress plugin 🙂