How To Speed Up Blogger Template

How to speed up Blogger Template
Speed up Blogger Template

Introduction

In this Article we will discuss all things that effect our Speed of the Website. So we have to solve those things and try to increase our Blogger Theme. There are many way to grow the speed of Blog like some useful Code, Removing Elements, Compress Image, Change Font style etc.

I Specially Thanks to AnuTrickz , To help us to grow the website speed. Generally Speed is most important thing to rank our Article or Blog in Google. If our Blog is slow performing then user may leave our blog and If we use Google AdSense then our bounce rate will increase due to slow loading of our Blog or Website.

So In this Topic We will discuss Those ways which is used to improve our blog speed. So Let's Start.

Template

This is the main Reason to effect Speed, This is because in sometime we set the very heavy Template which have lots of Animation, Widgets, And Features. We think that after use these type of Templates our Blog will attractive and good looking. May be you right but This things will effect you speed of blog very badly.

The main thing is Speed, so we have to choose light and smooth Blogger Templates. You can easily find in Google to explore these kind of Templates.

Widgets

This is the second most important reason because many blogger set different types of widgets in their Sidebar or Footer. And this is also effect the Speed of Blog. So users who want to improve your Speed of Blog then try to remove unwanted widgets.

You can set these types of widgets like Popular posts and Categories. And try to set this Widgets in your blog sidebar.

Remove Default Code

In  Blogger Template there are already defined some codes like <head>, </head>. So we have to change the Following code and not only head tag but we have to change end body tag also.
  1. First Go to Blogger Dashboard
  2. Then Edit HTML
  3. And Change and paste Following Codes

After Do All Then save the Theme. And browse your blog and you feel the speed if you Do all steps one by one.

Lazy Load Script

This is the Java script which is help to speed up our Template. And we have to paste it before </head> (close head tag) .
<script type='text/javascript'>

//<![CDATA[

// Lazy Load

(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:"https://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/s1600/sun.gif",effect:"fadeIn",threshold:"0"})});

//]]>

</script>


After Do all steps Save the Template and check your blog that a speed grow.

Unused Code

If you found some unused code which is actually non working. So we have to remove the code to speed up our Template. Now the Question is how we find that so Go to PageSpeed Insights and Type you Blog Address then click analyze.

You will Find all unused CSS and JavaScript which is not required in your Blog. But First Download your Backup Template file.