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.

How To Optimize Blogger Blog For Faster Loading?

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. 
shaikh iliyas says: 8/08/2013

so thank you brother its work perfect,,

regards from

MM Nauman says: 8/08/2013

Bro Please Please Check My Blog If I Need This Or Not....

Unknown says: 8/08/2013

thanks for sharing great article and plugin.

Syed faiq ul hussain says: 8/09/2013

what is this how to use in blogger

Syed faiq ul hussain says: 8/09/2013

what is this how to use this in blogger

Syed faiq ul hussain says: 8/09/2013

What Is This And How To Use This In Blogger

Syed faiq ul hussain says: 8/09/2013


Syed faiq ul hussain says: 8/10/2013


Syed faiq ul hussain says: 8/10/2013


Unknown says: 8/12/2013

I think lazy loading is not good for SEO
And most of visitors don't like lazy loading

Rizwan says: 8/12/2013

nice sharing bro

BloggerSpice says: ADMIN 8/17/2013

Yes Nauman ur site loading time is 11.605 seconds which is very slow..You should use it.

BloggerSpice says: ADMIN 8/17/2013

Hi Faiq you can see the effect on my blog..I am using it. And you would get details in above tutorial..

BloggerSpice says: ADMIN 8/17/2013

Hi Zeenat.. My site was very slower..And my Page Speed scorecard was 1 dot but after installing this plugins Now I got 3 dots.It has improved the loading time.If you go for Google Image search then you would see this effect.Google is using lazy load effect.

Unknown says: 8/19/2013

There are lot of ways to improve your site speed ....
let see
if you Check out your site footer area widget are not working properly
What you say about this ...????

BloggerSpice says: ADMIN 8/19/2013

Hi Zeenat..Everything is working fine. I have checked it on several browsers. Can you tell me which widget doesn't work??

For your kind information...Animated Google Plus follower box sometimes create problem in BETA version of Firefox. But work fine on Full Version.

Anonymous 2/02/2014

i talk to u, plz any contact no. send my mail>

BloggerSpice says: ADMIN 2/02/2014

Yes you can contact me through Contact page

Unknown says: 1/21/2016

I implemented your code into my blog and its working fine. Thanks for the entire information which is really useful a blogger

BloggerSpice says: ADMIN 1/21/2016

Thanks Suresh..I am glad to hear that this widget helped you to boost up your site loading speed. :-bd

Contact Form


Email *

Message *