Remove Default Blogger JavaScript, And CSS To Speed up Page Loading Time




Types of default JavaScript (.js) and Stylesheet (.css) filesCheck out the list of various types of default JavaScript and CSS widget files generated and added automatically by blogger:

Default Blogger CSS code: widget_css_bundle.css

It is the first file that executed on the browser side as soon as the visitor visits your blog. This file includes all the default widget stylesheet CSS bundle file of Blogger template and all default widgets like related posts, review widget, popular posts, comment section, contact form, etc.


Blog ID: authorization.css
It is a small CSS code file delivered on every page load that holds your BlogID.


JavaScript for Widgets: widget.js
This is the most affecting file contains the code of JavaScript for all the default Blogger widgets. It is a big code file and so causing more time to fetch and load on the browser side.


Google+ Script: plusone.js
It is the JavaScript added into each blogger blog for Google+ widgets. UPDATE: Google plus is shut down and so it is auto removed.

We have already discussed website speed optimization techniques and the importance of reducing page loading time and so suggesting to remove unused javascript and unwanted CSS files from your blogger blog ASAP.


Why you should remove blogger default CSS Bundle widgets and Widgets.js?Removing default JavaScript (Widgets.js) & CSS from the Blogger blog is the best way for making your blog fast to load. But including advantages, it has some disadvantages too.

Advantages and disadvantages of removing Blogger's default JS & CSS files:
Advantages: The major benefit of deleting default JavaScript & CSS code files is the improved blogger blog load time that will provide a better user experience and faster user interface to all of your visitors.

Disadvantages: When you remove all types of default JavaScript & CSS stylesheet widget bundle files which are added automatically by blogger, your custom blog design gets affected, all the default widgets stop working like popular posts widget, contact form, visitors count, etc.

Remove Default Blogger JavaScript, And CSS To Speed up Page Loading TimeSome basic background knowledge of customizing Blogger HTML template code is required to know how widgets are configured and work as per the theme design.

Follow steps to remove default javascript and CSS bundle files from blogger template:

STEP 1: Make sure to backup your whole blogger template code. (It's important!)

STEP 2:
Go to the blogger HTML code of your template.

STEP 3: You will see the following code in the very first 3-4 lines:

<HTML b:version='3' class='v3' expr:dir='data:blog.languageDirection'... ...

STEP 4: To remove default CSS and JS files, you have to add b:css='false' & b:js='false' codes as shown below:

<HTML b:css='false' b:js='false' b:version='3' class='v3' expr:dir='data:blog.languageDirection'... ...

STEP 5: And now removing default blogger CSS files, find the following code:

<b:skin><![CDATA[
...
All your CSS codes
...
]]></b:skin>

STEP 6: And replace it with the following code:

<style type='text/css'>
...
All your CSS codes
...
</style>


STEP 7: Add the following code above the code created in step 6.

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/]]></b:skin>So that the whole code will looks alike:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>
...
All your CSS codes
...
</style>

STEP 8: For removing authorization.css link for your Blogger blog, find <head> and replace it with the following code:

&lt;head&gt;

STEP 9: Now find </head> and replace it with the following code:

&lt;!--</head>--&gt;&lt;/head&gt;

STEP 10: Now find <body> and replace it with the following code:

&lt;body onload=&quot;script();&quot; onload=&quot;callFunction();&quot; onload=&quot;loaded();&quot; data-progrecss-mock=&quot;5&quot; class=&quot;progrecss green fixed mock staggered&quot; class=&#39;index&#39; expr:class=&#39;&amp;quot;loading&amp;quot; + data:blog.mobileClass&#39; itemscope=&#39;itemscope&#39; itemtype=&#39;http://schema.org/WebPage&#39;&gt;

STEP 11: Find </body> and replace it with the following code:

&lt;!--</body>--&gt; &lt;/body&gt;

STEP 12: Save template. And check your blog speed with Top 10 Free Mobile Speed Test Tools | Loading Optimization | Website Testing Tools

Blogger’s default stylesheet CSS and JavaScript Widgets bundle are the biggest reason which affects your blog's page loading speed and causes to increase page loading time. Also, Blogger doesn't have any way to disable default JavaScript and CSS, so completely eliminating default CSS & JS from your Blogspot blogger blog is the only option to speed up your blog load time.

So these are some of the best techniques and tricks to improve page loading time by removing Blogger default CSS bundle & unwanted JavaScript widget JS files added automatically to your blogger blog. If you find any difficulty while making changes then please let me know via the comment section shown below.

Xem Thêm