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.
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.
When your website uses Jquery anyway(because of necessity) you should defintely test bj Lazy Load or the Lazy Load plugin.