How to Add Lazy load Plugin in Blogger BlogSpot For Faster Loading?

How To Install Jquery Lazy Load For BlogSpot Blogs? How To Optimize Blogger Blog For Faster Loading? How To 2x Your Blogger Blog Loading Speed? Do You want LazyLoad Plugin on your blog to increase your page speed metrics? I will show you the way to speedup a Blogger Blog by using the Lazy Load Script.
Blog Page speed is a biggest factor to hold visitors in your site. Everyday huge visitors surfing many blogs but if they found higher loading time and containing heavy image then it takes longer time to load a blog or website.

Page speed not only an important factor for visitors but also it is a biggest factor for search engine and Page rank. 

Earlier Page loading time was not a big issue but Google is giving importance on it. Even if you are AdSense user then you would see on AdSense Score card about Page Speed Score.

If your score is low then it will give alert to improve your page loading time. Currently my page speed score is very poor due to heave design so I am also trying to improve it.

We know a blog with high quality Graphics make slower in loading. Sometime a blog become unresponsive and your visitors may leave your blog. Even I am experiencing the same problem in my blog because I have emphasize on Design rather than loading speed. 

Recently trying to overcome from this problem. And I think only lazy load plug-in can solve this problem. Though many blogger has given argument against this but to hold your visitors for longer time you must adopt various techniques. 

This plug-in will work like magic even if your blog has many high contrast images. When you would enter into blog landing page and scroll down to bottom then your blog images will load part by part. 

For this reason it won't give any pressure on your internet connection. On the other hand your heavy loading image will be load easily within slower internet connection. 

Step #1: Log in to your Blogger account and Go to your Blogger Dashboard

Step #2: Click on -> Theme -> Edit HTML-> 

Step #3: Now Find this code </Head> by pressing Ctrl + F

Step #4: Copy the code from below and Paste it Before/above </Head>

<!-- lazy load start -->
<script type='text/javascript'>//<![CDATA[
(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:"",effect:"fadeIn",threshold:"-50"})})//]]></script>
<!-- lazy load end -->

Step #5: Now hit the Save Button

Hope this Plug-in will help you to make your website faster and you would gain more visitors which would engage longer time. If you face any problem then feel free to leave a comment below. 
Go Up