How to increase the loading speed of a Blogger blog by 10X [3 Solutions]

Do you want your blogger blog to load fast but can't find a way to increase it? Then use this code on your blog. Your blog will definitely load fast.
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. 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 slow, 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();?> 

Start write the next paragraph here


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 than four widgets in the sidebar, you can remove them.

ShowHideComments