Let’s throw in some numbers first:
- One second delay in page load time can cost a webpage 11 per cent of views. (Source: HubSpot)
- 53 per cent of people will leave a mobile page if it takes longer than 3 seconds to load. (Source: Google)
There are countless such facts and statistics that underline just how important it is to have a fast website.
In fact, post-2018 Google Speed Update, if your website loads slowly, Google will rank it lower on SERP.
Meaning: you need a jet-quick website. Period.
Now, as simple as it may sound, it is easier said than done. At least for those who use Blogger (BlogSpot).
The Blogger vs. WordPress Battle
Yes, Blogger is better than WordPress on many fronts. But even the biggest fans cannot argue that the CMS, from Google, has some evident drawbacks.
One is, you cannot install a third-party plugin on it and let it magically speed up your website, as is the case with WordPress.
Also Read: List Of Powerful WordPress SEO Plugins For 2018
With Blogger, it’s all DIY, which is quite a pain for those who lag in HTML, CSS, and JavaScript. But that’s an entirely different topic altogether.
Here, I am talking about Blogger. And website speed.
While inbuilt templates of Blogger are pretty lightweight that load fast, the problem comes with the third-party downloads.
You install a new Blogger template by getting swayed with its look— only to realize later that its speed totally sucks.
Your Blogger website is too damn slow. What do you do now? Or a handier question is…
Read More:
How To Speed Up Your Blogger Website/Blog?
There are many strings you can pull to optimize your website and boost its speed by twice as much.
HOW?
Shoot your Blogger’s dashboard and follow these 5 steps:
(BUT hold on! First, go to Google’s PageSpeed Insight and analyze your website, as to where it stands now. After you’re done implementing these steps, you can re-analyze the website to measure the evident increase in its loading time.)
Note: Before doing any of these, ensure you have a backup of your existing template/design.
Reduce The Images Size
Large image files are the biggest killer of website’s speed, increasing the total page size significantly. So, the first step here is addressing this elephant in the room.
The smaller the image size, the better it is. But to give a general idea to measure the result with, you must aim to keep per image less than 30KB.
Thankfully, reducing the size of images are fairly simple and straightforward.
First, only use those images that are
small in size. Avoid the high definition (HD) ones.
Second, resize the image to adequately fit it in your post in its original length and breadth.
Third, compress them using Tiny JPG. If the image still looks large in KB, re-compress it using Compress JPG.
Tips:
- Don’t edit the image, like increasing its brightness and contrast. It will increase its total size.
- Expect the images to be a bit blurry. Relax. Unless your website is image-centric, this shouldn’t be much of an issue.
Just reducing the images’ size on your website will immediately boost its speed.
Yes, really! After implementing this step, go to Google PageSpeed Insight. You will see the difference yourself.
Get Rid Of CSS And JS Bundles
Blogger comes with pre-existing CSS and JavaScript bundles irrespective of the template you’re using. They look like…
https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css
https://www.blogger.com/static/v1/widgets/3401484092-widgets.js
These codes are entirely unwanted if you’re using a custom template. So, with no purpose, they need to be get rid of.
However, since default and in the Blogger’s backend system, you cannot delete these bundled codes. So, to overrule them, you need to make some changes in your code.
Here we go…
(I) Click on the ‘Theme’ section of your Blogger’s dashboard and then go on to ‘Edit HTML’.
(II) (A) This step will remove the bundled CSS
In the code section, pop a search box using “CTRL + F”. And then type to find <b:skin> and </b:skin>.
Cut all the codes you see between these skin headers. Now again use “CTRL + F” command keys to find </style>.
Paste all the codes you have cut from inside the skin tag right above the </style> tag.
Now, “CTRL + F” to find </head>. Paste the following code right above this head tag…
<style type="text/css&quo
t;>
<!– /*
<b:skin><![CDATA[*/]]></b:skin>
(B) This step will remove the bundled JavaScript.
“CTRL + F” to find </body>. Delete </body> and replace it with…
<!–</body>
–> </body>
THAT’S IT. You have successfully removed the unwanted, render-blocking CSS and JavaScript codes from your website. Kudos!
Slow Loading Fonts And jQuery
If you have installed a third-party Blogger template, you’re likely using a custom font. These custom fonts render block a website, slowing its loading speed by a large margin.
The good thing is even this problem has an easy fix.
Use Google PageSpeed Insight to find out about the render-blocking elements on your website.
(If you have purchased or downloaded the template from the likes of Sora Templates and Gooyaabitemplates, you will find Google Font, Font Awesome and jQuery playing culprits here.)
Remove these Render Blocking items from your website one-by-one. Delete them!!!
Now, “CTRL F” to find </head>. Copy the following code and paste it directly above the closing head tag…
<script type=’text/javascript’>
(function() { var ad = document.createElement(‘script’); ad.type = ‘text/javascript’; ad.async = true; ad.src = ‘//ajax.Googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js’; var sc = document.getElementsByTagName(‘script’)[0]; sc.parentNode.insertBefore(ad, sc); })();
//<![CDATA[
//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(“//fonts.googleapis.com/css?family=Open+Sans|PT+Sans+Narrow”);loadCSS(“https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css”);
//]]>
</script>
In the above code, change the ones in red with your own render-blocking Google Font and Font-Awesome links.
Once done, save the template. And voila, you’re done with this problem.
Remove ‘Quick Edit’ Icons
Small these icons may look, they eat a great deal of space. So, even if you find them handy, it’s best to get rid of them. It’s fairly simple.
“CTRL + F” to find…
<b:include name=’quickedit’/>
<b:include data=’post’ name=’postQuickEdit’/>
And DELETE all the instance of these codes you come across.
Note: Every time you add a widget, that widget would come with this ‘Quick Edit’ option. So, remember to repeat the above process of deleting the code after you’ve added a widget on your website.
Async Parsing JavaScript
To add to the functionalities of your Blogger, you would need to add third-party codes.
For instance, if you want the Sharing widget, you would have to add ‘AddThis’ JavaScript code in your website. Or, if you want a commenting system, you will have to add the codes of Disqus in the backend of the website.
Now, these extra lines of codes are of high-utility. So, even when they slow down your website, you wouldn’t want to delete them!
In such case, you can use the asynchronous directive, which looks like async=“async”.
When your website loads, different elements load simultaneously or very subsequently in their proper order. What ‘async’ code does is it tells the browser to load every other element first and then, at the very end, trigger the JavaScript that the ‘async’ command is used for.
It simply is the opposite of ‘Sync’, meaning it shouldn’t load in sync with other elements. It must wait for others to load first and then parse.
You can use this directive on all your external JavaScript to ensure your HTML loads first.
Your external JavaScript would usually look like…
<script src=“code” type=’text/javascript’></script>
All you have to do is add async=’async’ in this single line like this:
<script async=’async’ src=“code” type=’text/javascript’></script>
This line will ensure all the important components of your website loads first and only then these JavaScript parses.
CONCLUSION
These are 5 very simple steps that you can pull to seamlessly boost the loading time of your website in as less as 15 minutes.
After you’re done, go back to Google’s PageSpeed Insight and see how well-optimized your website is now.
If the website still lags, follow the recommendations you see on PageSpeed Insight. Remember though, you cannot ‘Leverage Browser Caching’ as the optimization suggestion would return.
So, aside from this, follow the rest of the recommendations the report offers.
Today, having a jet-fast website is essential. There’s no two-way to it. So, even if the process demands more of your effort and time, it’s imperative that you give that.
Now go ahead, follow the above mentioned 5 steps and see the result. If you encounter any problem, mention in the comment section below.
Also Read: How Using Lazy Load Can Make Your WordPress Website Load Fast?