How to Remove Unused Javascript and CSS files in Blogger to speed up page load time
As a professional blogger, you always need to focus on speeding up the page loading time of every page added to your blog or website. As you know, page loading time is a very important factor in basic on-page SEO that search engines consider to give higher search rankings. In the case of a Blogger blog in particular, I've noticed that the default JavaScript and CSS code is automatically added within your blog's HTML template which may slow down your page's loading time. This is why you need to remove default blogger JavaScript and CSS code from blogger blog.
Default JavaScript (.js) and Stylesheet (.css) file types
There are four types of these files. Check out the list of different types of default JavaScript and CSS widget files that are automatically created and added by blogger:
1- Default Blogger CSS code: widget_css_bundle.css
This is the first file that is executed on the browser side once a visitor visits your blog. This file includes all default CSS package files for Blogger template widget stylesheet and all default widgets like related posts, review widget, popular posts, comment section, contact form, etc.
2- Blog ID: authorization.css
It's a small CSS code file that is delivered on every page load and holds your BlogID.
3- JavaScript for widgets: widget.js
This is the most influential file containing JavaScript code of all Blogger default widgets. It is a large file and thus requires more time to fetch and load on the browser side.
4- Google+ script: plusone.js
It's the JavaScript added to every Blogger blog for Google+ tools. Update: Google plus has been closed and thus removed automatically.
We have already discussed website speed optimization techniques and the importance of reducing page loading time and hence we suggest removing unused JavaScript files and unwanted CSS files from your blogger blog as soon as possible.
Why should you remove default CSS bundle widgets and Widgets.js from blogger?
Removing default JavaScript (Widgets.js) and CSS from your Blogger blog is the best way to make your blog load fast. But including the advantages, it also has some disadvantages.
Advantages and disadvantages of removing default JS & CSS files from Blogger:
Advantages : The main advantage of deleting the default JavaScript and CSS code files is improved blogger blog loading time which will provide better user experience and faster UI for all your visitors.
Disadvantages : When you remove all types of default JavaScript and CSS widget pack files that are automatically added by blogger, the design of your custom blog is affected, and all default widgets stop working like popular post widget, contact form, visitor count, etc.
Remove default blog scripts and CSS files
Default JavaScript (Widgets.js) & CSS (css_bundle_v2.css) code
Since it is hidden and added automatically by blogger settings, you can check the file once the page loads. To check the file, open any of your blog pages and open its source code. To open the source code, right-click anywhere on the page and click View page source.
A new page will open to get the code. Search for this code (Widgets.js):
The default JavaScript (Widgets.js) file in the template looks like this:
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2423294629-widgets.js"></script>
While the CSS style file (css_bundle_v2.css) appears in the form:
<link href='https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
Remove Default Blogger JavaScript and CSS to speed up page load time
Some basic basic knowledge is required to customize Blogger HTML template code to know how to configure widgets and work according to the theme design.
Follow the steps to remove default JavaScript and CSS package files from Blogger template:
Step 1 : Make sure to make a backup copy of your entire Blogger template. (Very important to avoid any error!)
Step 2 : Go to Appearance in your template, then click on the Customize arrow and choose Edit HTML
Step 3 : You will see the following code in the first 3-4 lines:
Step 4 : To remove the default CSS and JS files, you need to add b:css='false' & b:js='false' as shown below:
Step 5 : Now remove the default blogger CSS files, find the following code:
...
All your CSS codes
...
]]></b:skin>
Step 6 : Replace it with the following code:
...
All your CSS codes
...
</style>
Step 7 : Add the following code on top of the code generated in Step 6.
<!-- /*
<b:skin><![CDATA[*/]]></b:skin>
So the entire code looks like this:
<!-- /*
<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
...
All your CSS codes
...
</style>
Step 8 : To remove the authorization.css link of a Blogger blog, find <head> and replace it with the following code:
Step 9 : Now find </head> and replace it with the following code:
Step 10 : Now find <body> and replace it with the following code:
Step 11 : Find </body> and replace it with the following code:
Step 12 : Save the form. And check the speed of your blog
The important thing is that you cannot find the default blogger's CSS & JS tags in the HTML code editor as they are automatically added to your blog whenever the page is loaded in the browser. These default files are hidden in all blogs by default settings provided by BlogSpot server and only appear once the page is fully loaded in the browser.
How to remove default CSS and JavaScript from Blogger blog?
That's the question, I will show you how you can easily remove default Javascript (js) and blogger's Cascade Style Sheet (CSS) from your blog pages. These default tags are added by Blogger itself for each page load, to trigger the default JavaScript and CSS bundle widget files. With the help of the following steps, you can now quickly remove the blog's default CSS and js. By removing these unwanted default files "widget_css_bundle.css" (CSS) and "widgets.js" (JS) you will quickly improve your blog's loading speed.
Blogger automatically includes default CSS and JavaScript in your blog to ensure the proper functioning of its features. However, if you want to remove or modify the default styles and scripts, you can do so by editing your blog's HTML code. Keep in mind that making changes to the default code may affect the appearance and functionality of your blog, so proceed with caution.
Here's a general guide on how you can remove default CSS and JavaScript from a Blogger blog:
Removing Default CSS:
1. Access Blogger Dashboard:
- Go to [Blogger](https://www.blogger.com/) and log in to your account.
- Navigate to the dashboard of the blog you want to edit.
2. Access Theme Editor:
- In the left sidebar, click on "Theme."
3. Edit HTML:
- Click on the "Edit HTML" button to access the HTML code of your blog's theme.
4. Locate Default CSS:
- Look for the default CSS code in the HTML. It's usually included in the `<style>` tags or in an external stylesheet link.
5. Remove or Modify CSS:
- Delete or modify the default CSS code as needed.
- Be cautious not to remove any critical styles that might affect the layout or functionality of your blog.
6. Save Changes:
- After making changes, click the "Save theme" button to apply the modifications.
Removing Default JavaScript:
1. Access Theme Editor:
- Follow steps 1-3 from the CSS removal instructions.
2. Locate Default JavaScript:
- Look for the default JavaScript code in the HTML. It may be within `<script>` tags or linked externally.
3. Remove or Modify JavaScript:
- Delete or modify the default JavaScript code.
- Again, be cautious not to remove any critical scripts that might affect the functionality of your blog.
4. Save Changes:
- Click the "Save theme" button to save your changes.
Important Considerations:
- Before making changes, it's recommended to create a backup of your theme in case anything goes wrong.
- Removing or modifying default styles and scripts may affect the appearance and functionality of your blog.
- Some default styles and scripts are necessary for certain Blogger features to work correctly.
Always test your blog after making changes to ensure that it looks and functions as expected. If something goes wrong, you can revert to the backup or try to fix the issue in the HTML editor.
How to speed up blog loading
To speed up blog loading, you should remove blogger's default javascript & CSS code which is automatically added in the HTML source code of your blog template between and before the tag. You have requested to remove a couple of links and script tags in the source code like "b:template" and "b:skin" in case it is not compatible with CSS of blogger CSS package license as well as static widgets. Also make sure to remove the "plusone.js" encoded javascript as it is the biggest reason for slowing down your blog and causing more time to load your website.
Note: This method is only recommended for bloggers who are not using the default tools provided by the blogger. By disabling the default icons, the default stylesheet CSS and other native scripts of the blogger will stop working and you will no longer be able to use any of the default UI elements.
Blogger's default stylesheet CSS and JavaScript Widgets package is the biggest reason that affects your blog page loading speed and results in increased page loading time. Also, Blogger has no way to disable default JavaScript & CSS, so completely removing default CSS & JS from Blogspot blogger blog is the only option to speed up your blog's loading time.
These are some of the best methods and tricks to improve page loading time by removing Blogger default CSS package and JS files of unwanted JavaScript elements automatically added to blogger blog. If you find any difficulty while making changes, please let me know via the comment section given below.