How to eliminate render blocking CSS bundle Files from Blogger Theme?

How to remove "widget_css_bundle.css" or "css_bundle_v2.css" render blocking CSS File from Blogger Theme? If you view the HTML source of your blog, you will see Blogger is automatically adding a CSS file into your Blogger theme. Learn how to remove those large CSS file from your blogger theme.

Almost every blogger is concerned with the loading speed of their website or blog. This is a common issue for new bloggers. You may be using a basic blogger theme with few widgets to keep your blog speed up, but it is taking an unusual amount of time to load.

Also, you might be worried about your website loading speed. You are using a very simple blogger theme with few widgets but it is taking unexpected time to load completely. You have taken many steps to improve your site loading speed but those are not working.

The main reason behind this, there are many JavaScript and CSS Files loads in the background with a default and custom Blogger theme and that cause delay to load your site. And those scripts are called removing the render-blocking file. 

How to eliminate render blocking CSS bundle Files from Blogger Theme?

Blogger Platform use those CSS Files for - 

1. Default Blogger widgets like 

  • Popular Post Widget 
  • Featured Post Widget 
  • Label Widget 
  • Archive Widget 
  • Contact Form Widget 

2. And for default features like 

  • Commenting system 
  • Post Locations 
  • Emotion 
  • Share buttons 
For Default Blogger theme users those CSS files are ok but obviously, this will affect the site loading speed, but if you are using customize Blogger themes then those CSS files are unnecessary. Generally in a custom Blogger theme developer uses a custom script to design the theme. So if default CSS script files load with custom CSS script then your theme may conflict with both scripts. As a result, the CSS script may not give you actual output against JavaScript files. 

So Blogger user should remove render-blocking CSS and JavaScript from your Blogger theme. Just visit your Blogger site and view the HTML source of your page by using Mouse or by pressing Ctrl+U. And you can see the Render blocking CSS files in your theme. But by editing the HTML of your theme you won’t able to see it. 

How to remove "widget_css_bundle.css" or "css_bundle_v2.css" render blocking CSS File from Blogger Theme?

How to Check the Perfect Score of your Website on Google PageSpeed Insights?

You can easily check your website loading speed in Google. So, before proceeding just check your Blogger theme loading speed by visiting the below URL 

And after applying the below trick again check the page speed so you can understand the loading speed improvement. After applying the trick my site loading speed has increased 20%.

How to Remove Blogger Default CSS
Website Loading Performance on Desktop In Google PageSpeed Insights 

You can check your website speed on a Mobile device also. In the below image, you can see my website loading speed on a smartphone. If the score is above 89% then Google will count it as a good website.

Google page speed inside
Website Loading Performance on Mobile In Google PageSpeed Insights

How To Block CSS Bundle + Authorization + Widgets.Js + Google Plus.Js In Blogger Theme?

In this tutorial, I will show you how to eliminate render-blocking CSS files from the Blogger theme by following a super easy step. 

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard 

Step #2: Click on Now click on Theme -> Edit HTML

Step #3: Now locate opening html or HTML from the top of the Blogger theme by pressing Ctrl+F (Windows) or CMD+F (Mac). 

Step #4: Now add b:css='false' after the html or HTML code. The script would be similar or nearly look like the below code line.

<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='' xmlns:b='' xmlns:data='' xmlns:expr=''>

Step #5: Now locate <head> and replace it with this encoded heading &lt;head&gt; code.

Step #6: And replace the closing head </head> with below code


Step #7: Search the closing body </body> at the end of the blogger theme and replace that by below encoded code


Step #8: Finally hit the Save theme button from the top.

Now you will see the magic. View your blogger theme’s page source and see render-blocking CSS file has gone after applying the above trick.

Wrapping Up

You can see your blogger theme source code by using Ctrl+U. And locate the widget_css_bundle.css and authorization.css file. CSS is highlighted in green, indicating that it is not in use or inactive. Now I would say that your website's loading pace will undoubtedly improve, implying that your website rating will improve as well 😃. 

Furthermore, after using the above trick your website Layout section can be misplaced or break at the backend but don't worry, it will not impact your website or blog frontend design.

This small trick will help to boost website loading speed and this will remove Blogger default CSS files. Now your Blog visitors will able to surf your page smoothly.

Go Up