April 28, 2016

Disable Blogger Template CSS bundle Get Higher Loading Speed


 Blogger Widget CSS Bundle is a default style sheet for all the templates of blogger. This style sheet has a higher load and significantly slow down the loading speed of the blog. If you are using a customized CSS style sheet, you can disable this CSS bundle and get higher loading speed.
I was searching in Google to find out the correct methods to do this but could not find anything. Then finally Stack Overflow programmers helped to figure out this. So kindly share this post, so that more people can make better website with faster loading speed.

shipmethis website loading page result in Google Page speed
Higher Loading Speed by Disabling Blogger Template CSS bundle

In order to check whether the template is having this CSS bundle, do the following;

1. Load the any post of the wesite

2. Press "CTRL U" or Right click on the website and select view source.

3. Press "CTRL F" to find the following code.

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/3645911276-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=9153048786707490797&zx=16763a68-59ae-4992-917a-b1c98647a1e1' />

The Blogger Widget CSS Stylesheet Bundle is a external stylsheet, That's why it is shown as a link. If you copy only the code after https such as "https://www.blogger.com/static/v1/widgets/3645911276-widget_css_bundle.css" [without quotes] and load it in the browser you can see the CSS codes. Every blogger template has these widget CSS bundle. As CSS codes are in an external style sheet, it will not be possible to compress or minify it. To find out how these blogger template widget CSS bundle affect the template loading speed, do the following steps.

If you have this above codes, then go to the next step.

1. Go to Page speed of Google. Page speed is a very useful online tool to find out the loading speed of your website and find out what are the components that have a higher load and slow down the website.

2. Copy the post URL and paste it on Page speed. Press "ANALYSE"

3. Find out how much is current loading speed of the website.

4. Go through each section and find the above codes under the section of "Eliminate render-blocking JavaScript and CSS in above-the-fold content".

Now you have found them which adversely affect the websites loading speed. Even Google needs to optimize and minify some of their codes for better loading speed.

How to Disable Blogger Widget CSS Bundle Link Stylesheet

These are external styles-sheets and cannot be minified. But we can disable the CSS bundle.

WARNING: Implement the Below Codes Only If Your Template is Having Customized CSS Stylesheet.

If the template is using any CSS codes of these Blogger style sheets, they will also be disabled. Hence careful while implementing. You can download a back up copy of your template for future purposes or copy the entire template codes to a notepad as a back up. You can remove widget_css_2_bundle.css with this steps below:

1. Search for <head> tag in the template.
2. Replace it with the below codes

&lt;head&gt;

3. Search for </head> tag in the template.
4. Replace it with the below codes

&lt;/head&gt;&lt;!--<head/>--&gt;
You may be using many variables in the template. However this method will not affect any variable in the template. If you have implemented the above codes, then go to the next step.

1. Go back to Page speed of Google.

2. Copy the post URL and paste it on Page speed. Press "ANALYSE"

3. Observe the difference in the loading speed of the template. You have got higher page speed because blogger authorization.css is disabled.

You are most welcome to be amazed. Kindly share my post if you found this tutorial useful. You can subscribe to more such posts from shipmethis.com.

Read More:

 Techniques to increase traffic and webpage display by cache

 How to reduce bounce rate of my website / blog - 14 amazing ways


person_outline   schedule