How to Increase the Loading Speed of a Blogger blog by 10X [3 Solutions]

Post a Comment
How to Increase loading speed of a blogger blog

Do you have a website on Blogger? And you have started your blog in it. But Your blog doesn't load fast and, even you don't like the loading speed. Then You're in the right place. If you have just started your blog or you have started it before, you may feel that your blogger blog loads very slowly, so stay here to. know. How to increase the loading speed of a blogger blog.

So to solve this problem, I have written 3 solutions. With this solution, you can increase your website loading time.

1) Expiration Header

The expiration header is the first thing you can do to increase loading speed. Utilizing Expiration Headers reduces the use of HTTP requests from the user and reuses the cache file which is already present in the user's browser. As a result of the decrease in requests, the speed of your blog increases.

Use the tutorial below to help you integrate the Expiration Header into your blog.

1. Go to the Theme Section.

2. Click on the drop-down menu beside the Customize Button, then select Edit HTML.

3. Paste the code below above </head> tag.

<include expiration='7d'path='*.css'/>
<include expiration='7d'path='*.js'/>
<include expiration='3d'path='*.gif'/>
<include expiration='3d'path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d'path='*.png'/>
<meta content='fri, 01 jun 2021 00:00:00 GMT'http-equiv='expires'/> 

4. Save HTML.

2) Gzip Compression

A second method for increasing loading speed is to use Gzip Compression. Gzip is a file format used to compress content before it's delivered to the client or user.

Basically, Gzip enables your blog to compress its content and deliver it to your readers in a compressed format.

How to use Gzip Compression in Blogger.

1. Go to the theme section.

2. Click on the drop-down menu beside the Customize Button, then select Edit HTML.

3. Paste the code just below the <!DOCTYPE HTML> tag.

<?php if (substr_ count($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip'))ob_start("ob_gzhandler");else ob_ start();?> 
4. Then click on save.

3) Lazy Loading Images.

Even though images are primarily responsible for reducing your loading speed, you cannot remove some images from your article because they are essential to the content. Rather than removing all the images, you may want to consider loading them lazily.

To use lazy loading images in blogger, follow the tutorial below:

1. Go to the theme section 

2. Click on the drop-down menu beside the Customize Button, then select Edit HTML.

3. Paste the code above </body> tag.

<script>
//<![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://3.bp.blogspot.com/-xtM_7x0_cU4/XIok1BisovI/AAAAAAAAPUc/QGJpBJZ3QBM_Spkd9r3-SMurEUbRI1pOQCLcBGAs/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

4. Then save the theme.

Conclusion

When you apply these codes to your blog, your loading speed will increase and your loading time will decrease. If your loading speed does not improve, you can also try changing your theme or if you have more then four widgets in the sidebar, you can remove them.

SAQUIB SHAIKH
SAQUIB SHAIKH
My name is Saquib Shaikh and I am a Technology enthusiast. I like to write about everything from smartphones to tech gadgets.

Related Posts

Post a Comment