How to install lazy load on Blogger

Lazy load: There is so much way to make your blog faster but the best way is using lazy loading script. In this article, I will talk about how you can install the lazy load script on Blogger. There is so much lazy loading script but the same time lazy loading script makes down your blog full load time this why I am all problem and make a new lazyloading using javascript. Let's tell you some facts about lazy loading.

What is the lazy load

When anyone browses your blog or website all script and image it's load when the person opens your blog this why your blog loses speed. Now if you use lazy load script it's run image and script when the user needs this image or script. If you want to know more about lazy loading then you can read in Wikipedia (https://en.wikipedia.org/wiki/Lazy_loading).

Compare

So let me show you my blog speed without lazyload script and with lazy load script. 

Without lazy load script

See on the below image it's the speed of my Blog. If you see on the image carefully then you see this not a good speed, impact, in my opinion, it's world waste speed ever.

Without Lazy Load Script Speed

Now you can see on the image it's not a dem speed the main loading speed is only 89%.

With lazy load script

Now I am already showing you the speed without lazy loading script so now let's show you the speed using lazy load script on my blog.

With Lazy Load Script Speed

Now if you see on both images with lazy load script without lazy load script there is so much different fast one is the speed then fully load time and on the last the page size and request number. I hope you will understand both differences.

How to install the lazy load script

Open your Blogger dashboard go to the theme section then and HTML edit of your theme. Now search for </body> tag then add the below code after </body> tag.

<script>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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/AVvXsEikEvizAoMhvDjmuraphNwQn_HRsonwx0VKl2sB0JxpnTIO5V2a2-L2wodctZ9rlBv0EneDC8WWXhLh09zeCL_hMKzWRAnEGnnXliaAE9FKpm6PSsZEeHC7wQtSQhOngPqF1GOXtHtZadCM/s1/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Now save your theme and enjoy the fastest blog.

Last word

So you are now at the end of the post I hope you enjoy this article about installing lazy loading speed on Blogger. If you face any problem then tell us on the below comment box. Thanks for reading us.