Also Read

How To Add Lazy Load Images In Blogger?

What Is Image Lazy Loading?

Lazy Loading Images is a way of methods in web and application improvement that reduce the loading of pictures on a page for later. When those pictures are really required, rather than loading them front and center. These process help increasing the page loading time and increase the page speed.

Why Go For Lazy Loading Images?

Lazy Loading reduces the loading time of an image that isn't required on the page right away. An image, not apparent to the client when the page loads, is loaded some other time when the visitor scrolls and the image really becomes noticeable. Assuming the client never look over, a image that isn't apparent to the client never gets loaded.

• Execution Improvement.
• Increase Page Speed.
• Reduce Page Load Time.

 

Which Images Can Be Lazy Loaded?

The basic thought of lazy loading is loading whatever isn't required at the currently. For images it typically means any image that isn't necessary to the visitors front and center can be Lazy loaded.

You can figure out which images are a responsible for lazy loading and the number of bytes you that can save time on the underlying page load by using Google Lighthouse review instrument. The review performed by this device has a part committed for off screen images. You can use Image Kit's site analyzer to distinguish when your site uses lazy loading or not, what's more other basic image related enhancements on your page.

Lazy loading is basic for good execution, yet in addition to convey a decent visitors experience.

How Do You Implement A Lazy-Load Image?

Step 1: 

Go to Blogger dashboard.

Step 2: 

Then go to Theme > Edit HTML.

Step 3: 

Click anywhere in the code area and press Ctrl + F. 

Step 4: 

Search for </body>

Step 5: 

Copy the below code and paste it above </body>.

<script type='text/javascript'> //<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFt-Ftqm6zks11-pXPzINZw4p8kbqK6j7YIPNBzpz-5ysLwUFJOH9m2rJkfORyxBGt-rqZb8dRYTmIfYX5kAZcvkwoqXAxJVsn0YHZOE9UEaYQajQpnQXfWa4F16BjK_yrHHhDcxv11v6/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]></script>

Step 6: 

Now save the theme.

You are done.

Conclusion

Hope you have successfully added this code on your blog. If you like this way to add lazy load images in blogger, please share it to your friends.