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

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

Comments: 20
data:blog.title
BloggerSpice

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 www.bloggerspice.com -->
<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:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
<!-- lazy load end www.bloggerspice.com -->

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. 

Related Post

Speak Your Mind

iliyas shaikh says: 8/08/2013

so thank you brother its work perfect,,

regards from www.shayrikiduniya.com

MM NAUMAN says: 8/08/2013

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

furqan haider says: 8/09/2013

thanks for sharing great article and plugin.

Faiq -Ul- Hussain says: 8/09/2013

what is this how to use in blogger

Faiq -Ul- Hussain says: 8/09/2013

what is this how to use this in blogger

Faiq -Ul- Hussain says: 8/09/2013

What Is This And How To Use This In Blogger

Faiq -Ul- Hussain says: 8/09/2013

hello

Faiq -Ul- Hussain says: 8/10/2013

Nice

Faiq -Ul- Hussain says: 8/10/2013

NIce

Syeda Zeenat says: 8/12/2013

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

Rizwan Saharan says: 8/12/2013

nice sharing bro

Mohammad Fazle Rabbi says: 8/17/2013

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

Mohammad Fazle Rabbi says: 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..

Mohammad Fazle Rabbi says: 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.

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

Mohammad Fazle Rabbi says: 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.

Hamid khan says: 2/02/2014

i talk to u, plz any contact no. send my mail>hamidkhan816@yahoo.com

Mohammad Fazle Rabbi says: 2/02/2014

Yes you can contact me through Contact page

Suresh Babu 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

Mohammad Fazle Rabbi says: 1/21/2016

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

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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

Name

Email *

Message *