How to Make Blogger Blog Load Faster

Having a blog with a good and responsive design is not only a factor we should consider in creating or customizing our own blog template. We should also make sure that our blog will load faster, so that our visitors will easily see a particular page of our blog and minimize the reduction in conversions.

Did you know that loading speed of our blog can be a ranking factor of Google? Page speed is really a big deal for all sites, especially for an e-commerce sites that is making money over $100,000 per day, because in a 1 second of the delay of their loading speed can loss $2.5 million in their sales yearly according to the study of kissmetrics. Also, according to them 40% of people will leave a site that takes 3 seconds to load.

Sometimes a template you bought or you downloaded for free is not totally optimize for faster loading, sometimes we need to optimize it manually. As you go on reading this page you will learn the simple things on how you can make your Blogger blog load faster.

The first thing you will do is to check your blog first on PageSpeed Insight tool. In this tool you will see some problems and things you must do on your blog to make it load faster.

Minifying CSS/JavaScript

Minifying your CSS and JavaScript is just deleting the white spaces in your template. Below is an example of CSS codes that is not minified.

#menu ul.menus
{
   height:auto;overflow:hidden;
   width:180px;background:#111;
   position:absolute;z-index:99;
   display:none;border:0;
}
#menu ul.menus li
{
   display:block;
   width:100%;
   font:12px Arial;
   text-transform:none;
}

CSS minified Version

#menu ul.menus{height:auto;overflow:hidden; width:180px;background:#111; position:absolute;z-index:99; display:none;border:0;}
#menu ul.menus li{ display:block; width:100%; font:12px Arial; text-transform:none;}

JavaScript Code that's not minified

<script>
var span = document.getElementsByTagName( ‘span’ )[0];
 span.innerText = ‘interactive’; span.style.display  = ‘inline’;

var loadTime = document.createElement ( ‘div’ );
loadTime.innerText = ‘You loaded this page on:  ’  + new Date();
 loadTime.style.color  =  ‘blue’;
 document.body.appendChild (loadTime);
</script>

Minified Version

<script>
var span = document.getElementsByTagName( ‘span’ )[0]; span.innerText = ‘interactive’; span.style.display  = ‘inline’; var loadTime = document.createElement ( ‘div’ ); loadTime.innerText = ‘You loaded this page on:  ’  + new Date(); loadTime.style.color  =  ‘blue’; document.body.appendChild (loadTime);
</script>

White space is just helping us to read easily the CSS and Java Script of our template and it doesn’t help the browsers to parse it. So if you remove some spaces in your CSS and Java Script file you will minimize the amount of data that browsers get on your template. There are some tools on the web that can help us to minify easily our CSS and JavaScript files. (csscompressor, minifyjs) 

Use Async Attribute to Script Tag

All JavaScript is render blocking, but on the other hand JavaScript is fast to execute on any browsers. Using external JavaScript file can take a lot of time before it will execute on a webpage. It’s because browsers will download first the JavaScript file to a site where it saved before it will execute in the browser.

Using Async attribute to the Script tag tells browsers to continue to parse the html without blocking the doom construction. In other words, it will continue to load the other elements on our blog without waiting to load the JavaScript file. Sometimes we can’t avoid using external JavaScript files on our blog template, the JavaScript file is helpful if you prioritize to minify your html code. Async can only be used in an external JavaScript file and it will not work on inline script.

Below is an example of external JavaScript file with Async attribute.
<script src="https://apis.google.com/js/platform.js" async="async"></script>

Removing Unused Text on HTML

This is just deleting other text on codes that is not used. In visiting your template codes I’m sure you will notice that there are some text looks like this <!-- end blah blah blah --> and /*------------*/. This text is just a way to say something about the codes on the html, it will not do anything on our site. So if you remove unused text you will decrease the amount of bytes of your html.

Optimizing Every Images

In terms of creating blog posts, we know that images can really help to increase our blog engagement rate on social media sites. So most of us are using images to improve the appearance of every page of our blog, but we should know that every one of it can make our blog load slower. Optimizing the file size of every image is the best thing to do, so, to do that you can use tinypng than can optimize file size of images without losing its quality