Now you can lazy load images quickly using this code. Lazy Loading Images is essential If you want to fix your site core web vitals statistics and increase site speed then it has become important that you lazy Load images such that your site images do not load all together in one go and only those images which need to be loaded above the page fold load first and do not slow down rest of the page loading speed.
Simply adding async as done in scripts does not work with images. With the easy availability of free images for bloggers, using large high quality images with large file sizes is becoming common, therefore, lazy loading becomes even more important.
This is a 3 step process and will take only 3 minutes to implement on any site easily.
1. Add LazySizes Script to Lazy Load Images
Add the lazysizes script in the footer of your web pages. First you need to download it. It will load the Lazysizes script on all your pages.
Here is what typically the code will look like
<script src="lazysizes.min.js" async=""></script>
You can either upload it on your server or simply use a CDN. You can also source the latest code from cdnjs and use the power of CDN to deliver the script faster across the world or use your own CDN.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>
Why Lazysizes when there are so many such scripts? It is a SEO friendly lazy loader for images as it does not block images from Googlebot even if they are not scrolled and loaded. And of course there are other high performance features which you can read up on their site. Even Google recommends it in several of their support pages for Lighthouse and other core vital speed tests.
2. Edit Image Src Codes
The script will only work on those images where the image src has been replaced by image data-src and this will help the script to convert these images to image src when these images are loaded upon page scroll.
<img src="image.jpg" />
You need to change it by adding a data- as follows
<img data-src="image.jpg" />
If you are like us and use srcset to make images sharper on 4K screens, then you need to replace to data-srcset as well
<img src="image.jpg" srcset="image2x.jpg 2x" />
will be edited to
<img data-src="image.jpg" data-srcset="image2x.jpg 2x" />
3. Add LazyLoad Class
In this next step you need to add specific class to all the images which will help the script identify that these images need to be lazy loaded and then it will work like magic. The class to be added is lazyload and you need to add it to whichever images you want to lazy load else the script will not be able to defer loading of your images.
<img data-src="image.jpg" class="lazyload" />
and the code with srcset will look like this
<img data-src="image.jpg" data-srcset="image2x.jpg 2x" class="lazyload" />
So that’s it.
Now you can quickly scroll your long web page with images and see how images load delayed with page scroll to that area. You can also use site speed tests and see for yourself that those images are no longer counted in your page load times as they are not loaded!
What if you cannot edit all image tags of your site? Then it would be better to use a WordPress plugin which will automatically change image src codes in bulk. Most site optimization plugins now have the lazyload images script available and you can load it in a click. We use this option on W3-Total Cache plugin on this website which is recommended by A2 Hosting which we use. See other WordPress plugins we use on this site.