How to speed up blogger using Lazy Load plugin - The WonderSpot - Know all in one spot
Breaking News:

How to speed up blogger using Lazy Load plugin

How to speed up blogger using Lazy Load

Today we discuss about How to speed up blogger using Lazy Load
Are you a Blogger blog owner and your blog is still loading, loading and loading again and take long time to fully loaded? Or you want to more speed up your blogger blog?

So are you looking for how to speed up your blogger blog? Text with new methods, tricks and tips to speed up your blogger blog. Then today you are in a right place.

How to speed up blogger using Lazy Load plugin
Like the WordPress or other blogging platforms, Blogger blog is not well facilitating.  Already you know that, Blogger blog platform has a very limited facilitates rather than other blogging platforms. But if you have an enough HTML and CSS knowledge you can Develop your Blogger blog to the next level. That not required a specialist knowledge about HTML and CSS coding, you can find a lot of tutorials, guidelines and tricks and tips from the internet. In WordPress blogging platform you can find thousands of paid or free plugs inns and widgets those are supported WordPress blog. But for Blogger blog platform not like that. There are few supported widgets. Also few days ago blogger team stopped and remove all third party other widgets that included in the blogger add a widgets section. But don’t warry about it. You can build up your own widget by using HTML and CSS knowledge.

Now lets move to our topic of How to speed up blogger using Lazy Load. Some default blogger widgets, default templates and Some HTML and CSS codes and JavaScript files cause to slow down your blogger load speed and slow it. Yes, that can be a headache for you as well as your readers. Normally if web page not load dawn with in three seconds your readers and visitors can be click the close button and go away without entering your web or blog because of that slow speed loading. 

But Sometimes except above reasons Some image files or images can be cause to slow down your load speed. Both Web/blog loading and image loading process happening at the same time then that can be cause to slow down your blog load speed. If we can reduce or delay the process of image loading, then we can speed up our blog load speed than before. For delay that images loading process we can use that Lazy Load plugin.

What is Lazy Load plugin?
Have you ever heard about lazy load before? Sometimes if you are using WordPress blogging platform, already you know about Lazy Load. Lazy Load is a famous Plugin which used to speed up web load speed.

Lazy Loader is a JQuery plug in written in JavaScript. It delays loading of images in your web page. Lazy Load makes the images load last or delay and makes the text in blog loads faster. This will help to landed or loaded on a site where text loaded before images or images loaded as you hovered over them. Those images won’t be loaded unless user scrolls over them. So that will help to reduces the server load and Speed up your web or blog load speed.

Don’t forget to Compare the blog load speed before and after adding the Lazy Load script into your blog.

Let see How to speed up blogger blog using Lazy load.

Step 01. GO to your Blogger blog
Step 02.  Go to Dashboard >> Template
Step 03. Click on Edit HTML button.
Step 04. Press Ctrl + F in the key board
Step 05. Type </head> and press enter.
Step 06. Copy given below Codes and Paste it in above the  </head>  

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

Step 07. Save your Template

Now check your web or blog page load speed. 

Lazy load function simply delays the loading of your blog images. Using Lazy load will make your texts and important sections show before the images are loaded. Also It loads your images on scroll with animations. As you scroll dawn your blog, all your images are loaded one by one thereby speeding up  your blogspot blog.

Now visitors wouldn’t have to wait for the page loading like before. If you have a blog or a website containing a lot of images, then that plugin will be very useful for you.

Also that will help you to decrease the bounce rate of your blog.

However sometimes there will be a disadvantages of Lazy Load script.
If your blog browsers where JavaScript is disable or doesn’t have support for JavaScript will show Blank Images. This is the only disadvantage you had. But that is so rare.

Lazy Load Script will help for better performances. Then I think today article about How to speed up blogger using Lazy Load is really helpful for you.

For more reading THEWONDERSPOT

Post a Comment