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>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)
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>
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>
