How to Make Your Blogger or Blogspot Blog Blazing Fast

On with 0 Comment
Whether you're running a blog or a website, site speed is one of the important factors that decide its success when it comes to attracting and retaining traffic. All major search engines including Google encourage and recommend making sites responsive and fast. Today, we're going to focus on the latter feature and specifically for blogs hosted on Google's blogger platform. Before, we dive into the tutorial; I'll advice you to gain basic or working knowledge of copy and pasting HTML or CSS code within blogger templates. If you're already tinkering with your template design, nothing can be better than that. After completing the steps mentioned below, you can speed up your blog by many folds. Several principles mentioned here can be applied on other platforms too. As always, I'll warn you to first try these techniques on a dummy blog. And, while exercising it on your live blog, keep a backup of your existing design and content. So, let's kick start this optimization process for making our blogger blog, a flyer.

This guide aims to make a blogger blog as fast as it can by eliminating whatever we can.

Analyze Current Condition

We'll start with analyzing the current state of the blogger blog in question. For that, Google provides an excellent tool called PageSpeed Insights. Type the address of your blog in the text box and hit enter. After processing it, the tool will display speed score for both mobile and desktop mode along with the pitfalls and the suggestions to fix them.

Google PageSpeed score for desktop
As shown in the image above, you can see a sample score for desktop mode. Ideally, this score should be 85+ both for mobile and desktop mode. Anything below it requires attention. Remember, if you're publishing long posts containing large number of images, their score may still remain below 85 which is quite reasonable and can be safely ignored even after the optimization process is complete.

So, I'm assuming that you've used this tool and have got your PageSpeed score both for desktop and mobile mode and they're way below 85. Right below these scores, you'll find the reasons and descriptive suggestions to fix the bottlenecks.

We'll focus on the most important section which addresses render blocking assets responsible for slowing down your blogger blog.

Render blocking CSS and JavaScript resources
So, the major culprits are external CSS and JavaScript resources you're using with your existing template. This may include Google fonts CSS, a popular JavaScript library like jQuery and additional CSS files. This is just an example of files which may be blocking timely rendering of web pages associated with your blogger blog.

You'll get a complete list of such render blocking files on the PageSpeed score page so that you can work on them. So let's started and start the speed optimization process.

Eliminate Font Files

Most blogger publishers use Google fonts for enhancing the typography of their blog. These fonts may pep up your template but they come with a cost. It's one of the render blocking resource that slows down the blog. So what's the solution? In case, you're using WordPress or some other CMS with your own web server, I'll suggest once trying this technique for optimized font loading times.

I've not tested this technique, so I'm not sure if it'll work correctly on your server. Now, back to our blogger blog that needs our attention. The solution is dead simple. Do NOT use any font file at all. I'm using Georgia, Arial and Helvetica on this blog and it works without any external font CSS file. If you're removing Google fonts, make sure you replace them with a right combination of web safe fonts which gels well with your design template.

Google fonts call in the header
So, if you're really interested in making your blogger blog, a zipper, simply remove any font CSS file requests in your template.

End Reliance on jQuery & Make Small Script Files Inline

Most blogs now rely heavily on jQuery for seamless working of various features and effects. But with the improvement of new HTML and CSS standards, most of these features can be completed with pure CSS & HTML code.

If you're still using some of the features that require jQuery, try to find a solution that doesn't need one. At this point, Google search engine is your best friend. Once you've ensured you no longer need jQuery, simply delete inclusion request of that file too.

It is either present in the header or in the footer of a blogger template.

You may still be using one or more JavaScript files which have no dependency. While your blog fetches these files from an external server, web page rendering process is blocked. The solution to this problem is very simple. Unless, these files are very large, just make their code inline within your template.

In simple words, instead of calling these files from an external server, you'll directly paste their code right within your blogger template. Start with saving all these files on your desktop and one by one open them in your favorite code editor. Make sure you comment out these script file inclusion tags in your template so that inline code working can be tested.

Remember, do not open these files in a rich text editor (e.g. Microsoft Word) else your code may get corrupted. For each file code, create the following snippet of script inclusion code block either in the header or right before the end of template body within the template. Let me explain it in the following steps.

<script type='text/javascript'>
// Paste file's script code here...

For each file code, copy it from the text editor and paste it at the place indicated above in the code snippet. Now copy this entire code snippet and paste it right before the </body> tag. Now once open the posts of your blog to check if the feature/function requiring that script code is working fine or not. If it's not working, transfer the code to the template header and paste somewhere before the </header> tag.

Repeat this process for all the small scripts you want to inline within your code.

Transfer Entire CSS Code in Header

Blogger template CSS is divided into 3 parts. The most common and visible part is the template design code embedded in inline form within the header. Users work on this CSS code to make changes in the template design. But, there are two other external CSS files which come under the category of render blocking resources contributing in slowing down the blog.

These two files are:
  • 728935430-widget_css_bindle.css - This CSS file consists of the default code for generic blogger widgets like popular posts widget, labels widget and many more. (The numeric prefix of this file may be different in your template.)
  • authorization.css - This file consists of two or more lines of CSS code. To be honest, I'm not sure what its usage is.
Blogger platform automatically fetches these two render blocking CSS files with each page request. Now, to get rid of this problem, we need to remove these two files. But, if we directly remove these files, the template using generic blogger widgets may break distorting the entire design.

So, an ideal solution is to not only remove these files but also to copy their code right before our existing template design. This is a two step process which should be completed carefully. Make sure you take backup of your template before completing this step.

First of all save the contents of both these files in separate plain text files. Now, find the following code within your blogger template. It is present at the beginning of your template CSS code within header.


Replace it with the following code snippet.

&lt;style type=&quot;text/css&quot;&gt;

&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>

Now, find the following code snippet. You can find it at the end of template CSS code within header.


Replace it with the following code snippet.


Now, copy the widget CSS bundle code from the text file and paste it right below the first code snippet we've replaced earlier. Thereafter, copy the authorization CSS code from the second text file and paste it right below the widget CSS bundle code. Finally, your code structure would be something like this.

&lt;style type=&quot;text/css&quot;&gt;

&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>

[ Paste widget CSS bundle file code here ]

[ Paste authorization CSS file code here ]

[ Here is your existing template design code ]


Now, save your template. You've just fixed the two render blocking CSS files which were slowing down your blogger blog. By this time, your blogger blog is opening quite fast when compared to its older version.

Exclude Widgets & Google+ Script Files (Footer)

Another two render blocking resources are two JavaScript files included automatically by Blogger platform. One of them is a Google+ script and the other one is related to all the blogger widgets used on the blog. Both these files are called at the end of the template.

Disabling inclusion of these two files is dead simple. But, after excluding both these files, few changes happen within blogger dashboard's Layout section and some other important things need to be taken care of to ensure you do not break your design template.

First, let's see how to easily exclude both these files from our template. Go to the end of your template code and find the </body> tag. Replace it with the following code snippet.


Now save the template. As I said before, excluding both these files requires more attention by the blog owner while working with the template. If you open one of your blog posts in a web browser and examine its source code, you'll notice lot of code commented out at the end of template which also includes both files we wanted to get rid of.

Blogger widget code in footer
As shown in the image above, you can see both the script files are now commented out and no longer hinder the page rendering process thereby speeding up your blog significantly.

At this point, if you click the Layout option within your dashboard, you'll notice that the entire layout structure is now aligned vertically like a stack of boxes kept on top of one another as shown in the image below.

Blogger widgets layout stack
There's no need to panic. Just take care of one extremely important thing from here onwards. If you're making some changes in existing widgets within your design template, nothing needs to be done and you can edit them freely. But, if you're going to add a new widget or looking to delete an older widget, replace the code snippet back to the original </body> tag.

Once you've made that change and have saved the template, you can add or delete widgets. Once, you've completed the widget addition or deletion process, you can again replace the </body> tag with the code snippet mentioned above. This way, your template will not break and it will work smoothly.

So, this completes the optimization process for speeding up your blogger blog. You can again check your blog speed through the PageSpeed Insights tool and you'll notice that you're getting a good score which is way higher than your older score. Your blog visitors will also get surprised to see significantly faster load times of your blog posts.

Miscellaneous Guidelines for Speed Optimization

Apart from completing these vital steps, you can follow additional best practices and guidelines to ensure your blog remain blazing fast giving the best browsing experience to the visitors. Here are some of these tips.
  • While using images in blog posts, make sure you web optimize them to reduce the overall page size.
  • Do compress your template design CSS code to further reduce the web page size.
  • While adding all the inline JavaScript code snippets, make sure you compress these scripts too.
  • If possible, reduce the number of widgets used on your blog.
  • Use image sprites, wherever possible.
  • Create a responsive design and trim down unnecessary elements in the design for small devices. Sounds Geeky?


Post a Comment