Home
Blogger

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='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/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

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

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

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

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.

14 comments

  1. Yeah the CSS file is removed but my blogger design is affected. How do I maintain the design but get rid of the CSS?
    • Hi Robert :t
      You should have some basic CSS coding knowledge. Blogger's default CSS script works on several widget like Comment box, Popular post, Blog pager and sometimes structure. So after disabling the Blogger default script your site will break. But after that by adding simple CSS script you can fix your site structure. And to do this you have to check all script of your current Blogger theme.
  2. I have added this code see the improvement Thanks



    would you please create image zoom script for us in blogger????
  3. I finded this code but code is same
    • Hi there,
      Thanks for your feedback. I have updated the tutorial with few extra steps. Please follow the additional steps. Now it should work.

      If still is not working then please let me know in comment section.

      Thank you.
  4. Well...this is unfortunately not good advice. You shouldn't modify *head* section this way, as it might cause more problems (now or in the future). If you're using PageSpeed, focus on "field data / origin summary". This is data collected from readers. If their experiences are good, then don't worry about a single .css file.
  5. My advice is to copy the render-blocking CSS code, from Google Page Speed Insights Report and paste it inside HTML document before applying this trick. Or else, though the render blocking CSS is removed, page styling breaks. Nobody loves losing page style just for speed.

    Page Speed Insights advises to defer the render-blocking resources or to make it inline. I believe making it inline is better than just removing it. It saves extra effort, also keeping the previous styling intact.

    And 2nd issue is, here the post is about how to solve render-blocking resources, but this website itself suffers from render blocking resources, I checked on Google Page Speed. Even the Speed Score is very volatile. It varies 20 to 30 points for every test. Sometimes, it goes as bad as 27, and sometimes it goes for the best 74-80. (I tested bloggerspice.com on page speed insights for 16 times) But this level of volatility was not expected from a blog that talks so much about SEO. They are suffering from many…
    • Hi Shreyas,
      Thanks for your fruitful feedback. This tutorial has been published in 2018. We have optimized on that time. But Google is continuously changing their algorithm. So this old optimization is not enough to cope with the new algorithm.

      But constantly we are working to overcome the problems.
    • All the best for your efforts, sir.
  6. if add defer or async tag of this javascript script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' then home page image & menu bar now show. how to fix it
    • Hi, Your question is not clear. Is it showing or not showing on home page?

      For displaying homepage image and menu bar 2.1.3 version is enough. You can use below script in your Blogger theme.

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

      Thank you.
    • If I use below script the home page image and menu bar are hidden.
      script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'
  7. After doing this comment box reply option didn't work
    • Hi, It seems you might have unintentionally removed the comment reply code from the theme. This could be causing issues with users receiving notifications when their comments are replied to.

      Could you please double-check the code changes before the removal or replacement is finalized?
Go Up