How to lazy load images.


Lazy loading is when you stop a web object (usually images or scripts) from loading until the visitor of your website actually needs to load them. This concept is part of creating the perfect critical rendering path where you only load the web content you need for the critical above-the fold view of a page.

How can lazy loading images speed up my website?

Next to optimizing photos and reducing the amount of images your web pages use, lazy loading images is one of the more optimal ways of improving page speed. When you lazy load images you allow the browser of your visitor to only load the images which are used for the screen view of the visitor. This means that all the other images below the fold are not loaded until the visitor actually scrolls there. The visitor will get a very fast initial view of your web page because their browser only has to load the above-the-fold images to get a first display of your page.

Using a Javascript without Jquery (recommended)

There are some good small lazy load scripts available which do not use Jquery, do the job perfectly and are quite easy to set up. Two scripts we recommend are:
be Lazy.js is only 1.2kb in size and does the job it should be doing
Echo.js another great small 1kb script working greatly
Now both of these scripts require some reading as you have to manually set the scripts up. But it isn’t a lot of reading and both script websites have pretty good documentation to go with it.

Javascripts using Jquery (not recommended)

It's not recommended to use a Javascript library like Jquery to lazy load images, unless you were already loading the library on your web pages anyway. Loading the Jquery.js file isn’t optimal for page speed since Javascript libraries can slow your website down.

WordPress plugins

When you use WordPress as a CMS for your website it is not recommended using a plugin for the simple reason that all the good lazy load plugins for WordPress use the Jquery library to function. As explained above, loading Jquery on your web pages can slow them down and it is preferred to not use the library on your web pages unless you are able to defer load Jquery or you were using Jquery on your web pages anyway. Although there are a few plugins available that do not use Jquery, they aren’t the best plugins out there. After testing them we can come to the conclusion that none of them work properly or have coding mistakes in them causing them to work improperly in some browsers. That’s why it is recommended using one of the two above custom built Javascripts instead of using a WordPress plugin.
When your website uses Jquery anyway(because of necessity) you should defintely test bj Lazy Load or the Lazy Load plugin.