Before proceeding, be aware that unless you're not understanding what exactly you're doing, do not edit your blog's template. It can break the design or make it non-functional.
I've applied each and every technique mentioned here on my blog. It is well-tested and works like a charm. First, you can practice it on a private test blog and then apply it on your live blog.
This guide aims to make a blogger blog as fast as it can by eliminating whatever we can.
Analyze Current Condition
We'll start by 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.
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 a 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.
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 resources that slow 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.
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 the 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, the 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 into 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'>
/*<![CDATA[*/
// Paste file's script code here...
/*]]>*/
</script>
</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.
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 the header.
<b:skin><![CDATA[<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
]]></b:skin></style><style type="text/css">
<!-- /*<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 ]
</style>
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.<!--</body>--></body>
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.
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?