How to add lazy load plug-in to load your blog faster

How to add lazy load plug-in to load your blog faster


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  Now click on -> Template -> Edit HTML-> Unfold code  

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. 
How to add lazy load plug-in to load your blog faster
4 Stars stars - "How to add lazy load plug-in to load your blog faster" Blog Page speed is a biggest factor to hold visitors in your site. Everyday huge visitors surf...

Post a Comment

so thank you brother its work perfect,,

regards from

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

thanks for sharing great article and plugin.

what is this how to use in blogger

what is this how to use this in blogger

What Is This And How To Use This In Blogger

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

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

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

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.

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 ...????

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.

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

Yes you can contact me through Contact page

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

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

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *