Post-Thumbnail
0
Speed Up Blogger Blog

Speed? It matters whether you own a car or a blog. Even Google considers Speed an essential factor for ranking websites. So it is right to be concerned about your blog's speed. And from the time the mobile ranking factor has taken over Google website's speed has become an essential factor for ranking.

Google has introduced the AMP framework for websites to make the mobile version of the website load faster. But unfortunately, the AMP framework is not available for Blogger officially. You might find many sites giving AMP Blogger templates or tutorials to use the AMP framework in your current Blogger template.

But the reality is that you cannot implement the AMP framework in your Blogger Blog, and all the AMP Blogger templates available on the internet are not AMP at all. Here is what Mohammad of MyBloggerTricks has to say about AMP Blogger Templates
AMP is not a good option for Blogger platform at present because there is no official support present for it currently. Forcibly converting the code of a template to AMP will only make it a headache for people not quite well versed with code tweaking.
Therefore it creates a significant problem for the Blogger users to make their blog load faster in this time of AMP. Moreover, it results in the loss of blog readers and users. According to a survey, 40% of people will abandon your website if it takes more than 3 seconds to load and every extra second your site takes to load will cause a 7% decrease in your conversion rate. [Source: Quick Sprout]

Therefore for your help, we are going to share with you 14 Effective ways to Speed Up your blog in 2019. Let's get started.

Prioritize Visible Content

Okay, so the first way to speed up your Blogger Blog is to prioritize visible content. If you have used the Page Speed Insights Tool by Google, then you might be familiar with this problem. Here is a screenshot of it.

Prioritize Visible Content

Okay, so here is the fix. This problem mainly occurs because you have used big chunks of javascript or CSS codes in your blog rather than hosting them on an external server. It may be the Jquery or the Font Awesome code.

So to solve this go to Blogger and Edit HTML section of theme and look for the big chunk of codes present. Now open your notepad and write the codes in the following format:
<script>
    //A BIG CHUNK OF JAVASCRIPT CODES

    //SECOND BIG CHUNK OF JAVASCRIPT CODES
 </script>
Save the file as javascript.js. Now upload it on an external server like Your Javascript and place it in your blog as:
<script src='Your Javascript URL'/>
Replace Your Javascript URL with the URL you obtained after uploading the file.

For CSS place it in Notepad in this format:
<style>
    //A BIG CHUNK OF CSS CODES

    //SECOND BIG CHUNK OF CSS CODES
 </style>
And save it as CSSCodes.CSS and upload it on an external server. You can use Your Javascript again for uploading CSS.

Place it in your blog as:
<link href='Your CSS URL'/>
Replace Your CSS URL with URL of the file you uploaded.

Remove Unwanted Javascript And CSS

Go to the Edit HTML section of your blogger theme and look for the unwanted Javascript and CSS code present in it and remove them as they make your blog load slower. 

It is possible that you might have installed an external plugin, but you remove it later, but the Script or CSS code might be present. So search for it and remove it.

Defer Loading Javascript

Another way to speed up your Blogger Blog is to defer or async external Javascript. The externally hosted Javascript on your blog is Synchronous by default and may load more than once and cause the webpage to slow down. Therefore it is necessary to Defer or Async them.

Deferred Javascript

Deferring your Javascript means letting all the HTML in your blog load before the Javascript loads. It makes your site load earlier and makes it seem like your site is super faster. Almost all the Browsers support this function.

But you cannot use it for the scripts necessary for your blog to show up like the Jquery Script etc.

To defer the Scripts present in your blog add defer in the <script> tag like <script defer>.

Asynchronous Javascript

Asynchronous loading of scripts means that Loading and Parsing of your Javascript will go on, but your scripts will only execute when it's ready. Thus it Takes the least amount of load speed. But this function is not supported by all the Browsers.

For Asynchronous loading of your Javascript add the script tag as <script async>

Load Scripts And CSS Only On Required Pages

One essential way to speed up your blogger blog is to load scripts and CSS only on the pages that require it. To do this, we can use Conditional Tags. By using Conditional Tags, you can show or hide a widget only on Homepage, Post Page, Static Page or Archive Page.

For example you the Pagination Script and Read More Script only needs to be loaded on the homepage. So you can add an appropriate conditional tag. Similarly, Related Post scripts load on Post Pages.
<b:if cond='data:blog.url == data:blog.homepageUrl'> //To Show on Homepage
<b:if cond='data:blog.pageType == "item"'> //To Show on Post Pages
<b:if cond='data:blog.pageType!= "item"'> //To Hide on Post Pages
<b:if cond='data:blog.pageType == "static_page"'> //To Show on Static Pages
<b:if cond='data:blog.pageType != "static_page"'> //To Hide on Static Pages
<b:if cond='data:blog.pageType == "archive"'> //To Show on Archive Pages
Close the tags by adding </b:if> in the end.

Compress HTML, CSS, and Javascript

Compressing HTML, CSS, and Javascript results in reducing the load speed of your blog. 

If you are someone with no or little knowledge of coding, you can compress your template by download your current theme by doing to Blogger's Theme section, and Clicking Backup/Restore button. 

Then head to HTML Compressor, and upload your Theme file. Select code type to Blogger and click the compress button.

After that, you will obtain a Compressed version of your Blogger Theme. Download it and upload it on your blogger blog. It will help load your blog faster.

Compress Images

Another common problem you face while speeding up your site. If you use the Google Page Speed Test tool, then it will tell you to compress the images present on your site. Large image files take a longer time to load thus slowing down your site.

Many online websites offer the service of compressing images for free. Some of them are:

Use Lazy Load For Images

Another way to speed up the images is to add lazy load effect to images. To do so add the following script above the </body> tag of your site's HTML.
<script type='text/javascript'>
// <![CDATA[
 /*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
        !function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
        $(function() {
          $("img.lazy").lazyload({
            effect : "fadeIn"
          });
        });
// ]]>
</script>
Now to add the lazy load effect to an image add the class='lazy' tag to that image. For example
<img class='lazy' src='Image URL'>

 Remove Default Wrench And Quickedit Blogger Icons

The default Blogger wrench icons are of little use but contribute to your blog's load speed. Therefore to remove them head over to your blog's HTML section and search for the following code:
<b:include name='quickedit'/> 
 Use CTRL+F to search. Remove all the instances of the above code.

To remove Quick Edit Pencil Icon head to the Layout Section and click the edit link of Blog Post Gadget and untick the Show Quick Editing option.

Remove Quick Edit (Blogger)

Use Share Buttons Rather Than Share Widgets

Use unofficial share buttons rather than the official share widgets. This because the official share widgets require heavy Javascript that adds to your site's load speed and thus slows down your blog. And they mainly slow down your site's mobile version of the webpage.

A few days ago I check my blog's speed via Page Speed Insights Tool and my blog's score was 50 for the mobile version. I realized that the Facebook Page Plugin was mainly causing this. So I removed it from my blog and rechecked my Page Score. My Page Score jumped from 50 to 85.

It proves that social widgets do slow down your webpage. That's why I have reverted to the social buttons.

Use Fast Loading Templates

Many Blogger Themes are available on the web, and many of them claim to be super fast and ultra light. But they are not. Therefore before buying or using a template check the Page Speed of the demo URL of the theme. 

You can use the Jabeen Theme. It is a minimal and responsive blogger template and is designed keeping the speed aspect in mind. Do check it out.

Speed up Custom Fonts

Custom Fonts are hosted externally and result in slowing down your blog. So the easiest way to speed up your blog is to get rid of the custom fonts. But a Blog without Custom Fonts looks dull and ugly. Therefore Custom Fonts are necessary.

However, you can choose the type of font you want to use. If you select a font family in Google Fonts, you can customize it. Google Fonts also tells about load time. The more fonts you choose, the more load time.

Or you can also reduce load time by grouping all the fonts in one link. For example, if you are using Oswald and Open Sans, then you can add them as a single link rather than multiple links. For example:
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
 Or you can also make the fonts load faster by using the following script
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
//CSS Ready
function loadCSS(e, t, n) {
    "use strict";
    var i = window.document.createElement("link");
    var o = t || window.document.getElementsByTagName("script")[0];
    i.rel = "stylesheet";
    i.href = e;
    i.media = "only x";
    o.parentNode.insertBefore(i, o);
    setTimeout(function() {
        i.media = n || "all"
    })
}
loadCSS("https://fonts.googleapis.com/css?family=Oswald");
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Just add the script before </head> tag of the HTML section of your Blogger Theme. It already has Font Awesome Script Installed.

Replace  https://fonts.googleapis.com/css?family=Oswald with your Google Fonts link.

Use CDN

A costly way of speeding up your blog is to use CDN. CDN is short for Content Delivery Network and delivers pages and other files to users based on their location, origin, and server.

CDN like MaxCDN can be used to host your external Javascript. CDN provides a fast and secure route to your files. And thus it speeds up your blog.

However, If you are not willing to spend money on CDN, you can still speed up your blog by using the CDN version of the standard scripts in your blog like Google Fonts, Jquery and Font Awesome.

Reduce The Number Of Posts on Homepage

The more the number of pages on the homepage the more the number of images and other content on the homepage and more the time it takes time to load.

To reduce the number of posts on the homepage follow the following steps:

Step #1: Login to Blogger Dashboard. Select your blog. Head to Settings and then go to Posts, Comments, and Sharing.

Posts, Comments, And Sharing
Step #2: Type the number of posts, and that's it.

Setting Number Of Posts

Remove Background Image

Background

Background Images are usually large in size and contribute to your blog's load speed. So it's better to remove them to speed up your blog. Colors are not bad. So you can use them instead of images.

Avoid Excess Ads

Ads are either scripts or images or both. So they can be a cause of the slow speed of your blog. Therefore it is advised to reduce the number of Ads on your blog. The readers also do not like having many ads placed on a webpage. Thus you should avoid excess ads. 3-4 ads per page are ok.

Thing To Avoid

One thing to avoid is to not to remove the default Blogger Scripts that are shown in the Page Speed Insights Tool. These stylesheets and scripts are the skin of your blog layout. Removing them will mess up your widget appearance on different browsers, and your widgets will look broken.

So it is not recommended to remove them. That's why unlike others I have not included that in my post. The sites that remove them have no image and contain few widgets so that their design doesn't look messed up.

Conclusion

That's all from me. Speeding up your blog is like a part of SEO in 2018. And Google even penalizes the slow webpages. Therefore it is necessary to speed up your blog and make it load faster.

 I hope you find this helpful and your site loads faster. If you found this useful, then please share it with your friends and help this community grow.

And don't forget to subscribe to our newsletter to get tips like this directly in your inbox. If you have any question, you can ask me in the comments. Sayonara!

You May Also Like

0 comments:

Post a Comment

Zero tolerance to Spam. Comments containing links will be deleted upon review.