Home
Blogging

Disable CSS bundle and Authorization CSS Blocking Resources

Learn the trick to disable CSS bundle Authorization CSS blocking resources file to make Blogger template loading speed fast?
render blocking CSS resource

Render Blocking CSS resources always affect web site’s loading speed and make our site slower to load. And this is also bad for SEO, because search engine prefer fast loading website to serve then on search engine result page. Google’s new project is Accelerated Mobile pages (AMP) project whose main aim is to divert search traffic to fast loading website. So we must make our Blog site faster by all means.

As a new user you might be confuse about Render Blocking CSS resources. Generally Render Blocking JavaScript stops building DOM tree while parsing the HTML markup. When website loads in browser then it render a page and for rendering it has to build the DOM tree by parsing the HTML markup. And during this process render blocking CSS resources encounters the normal rendering process of a page. As a result it stops and execute before parsing the HTML markup.

So if you site containing multiple render blocking CSS resources then your site will take longer time to load. To check render blocking CSS resources just visit below URL and test your Blog site.
  • https://developers.google.com/speed/pagespeed/insights/

Google page speed inside

I am damn sure there are several render blocking CSS resources containing in your Blogger template. There are various render blocking JavaScript and CSS resources like JS file, Google font file, and various widget files and those can remove by manipulate. But we are deeply concern about CSS bundle Authorization CSS which automatically load with every blogger template. This is a default file from Blogger for smooth loading of Blogger default widgets. But this is really unnecessary for custom Blogger template users.

CSS bundle

After editing your Blogger template you won’t see those CSS bundle and Authorization CSS file. So we have to find a way to disable this script. But we are unable to delete those CSS files directly from Blogger HTML editor.

This tutorial is for Advance user of Blogger platform but I have simplified the procedure. First visit your Blog site and right click on your mouse pointer and click View Page Source. Now locate the scripts like below.
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/2973171168-css_bundle_v2.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=XXXXXXXXXXXXXXXXX&zx=c438423a-a8f4-4cca-b115-1e1bcd093875'/>
  • widget_css_bindle.css - This is a large CSS file which containing default code for generic blogger widgets like popular posts widget, labels widget etc.
  • authorization.css – This is a small CSS file which is consists of two or more lines of CSS code.
The above URLs are in blue color and clickable. Just click on it and see large CSS file open in a new tab of your browser. Every time those 2 large CSS files loading with your Blogger template and making your site’s loading speed slower. I will show you how to disable it.

After applying this trick your Blogger template’s Layout will break. But don’t panic it wont’ affect your site design.
Step 1 Please visit https://www.blogger.com and Sign in to your Blogger account

Please take a backup of your Blogger template first to avoid any unexpected Incident.

Step 2 Now from Blogger Dashboard Click ->Template ->Edit HTML 

Step 3 Please locate <b:skin><![CDATA[ by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 And replace the above code by below script.
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
Step 5 And again find the find the]]></b:skin> code snippet.

Step 6 And replace the above code snippet by </style>. Finally your all CSS script will go inside below script.
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
//Your All CSS Script Here
</style>

Step 7 Click Save template button to save changes on your Blogger template.
And now you can check your Blogger template’s source code and see that the CSS resources file text color turned Black. And you won’t able to click on it.  This means you have successfully disable the CSS bundle and Authorization CSS from Blogger template.  And to check render blocking CSS resources please visit below link and check your Blog.
  • https://developers.google.com/speed/pagespeed/insights/
And see CSS bundle and Authorization CSS file is not displaying in page speed test result.

Alternative Solution for Default Blogger template user

If you are using default Blogger template then you can adopt a safe procedure. Though clickable CSS resources count as render blocking so we will add the CSS bundle file inside style tag. From your Blog page source click on clickable URL and all CSS bundle file will open in new tab. And copy the whole CSS script and paste it in a notepad (Don’t paste the CSS code in any Rich text supported text editor like Microsoft Word).
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/2973171168-css_bundle_v2.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=XXXXXXXXXXXXXXXXX&zx=c438423a-a8f4-4cca-b115-1e1bcd093875'/>

In case of Authorization CSS file open it in Mozila Firefox browser then it will be visible. Because in Google chrome and Opera browser Authorization CSS file often remain blank.
And the finally tailor yours script like below.
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
[ Paste CSS bundle file code from Notepad  here ]
[ Paste authorization CSS file code from Notepad  here ]
[ Here is your all existing template’s CSS code ]
</style>
Finally save your Blogger default template and view the page source and see CSS bundle and Authorization CSS file has disabled. And your all widget is running smoothly. Now your template loading speed will increase.

After applying this trick your template Layout will completely break. But don’t panic it won’t affect your site traffic or SEO. For any further query please feel free to leave a comment below.

27 comments

  1. vai, amar site a google analytics er code diye verification kora jasce na. template edit kore head er moddhe code bosiye save dile save hoy na, ekhon ki korte pari?
    • Site je kono ekta way te verify korlei hobe. Meta tag use koren. easily verify hoye jabe. Multiple verification is not necessary.
  2. google analytics a to ektai matro way ace ar ta holo code add kore, ekhon ki korte pari?
    • Please follow the Google site verification tutorial-

      http://www.bloggerspice.com/2015/03/how-to-verify-custom-domain-by-using-meta-tag-from-webmaster-central.html
      http://www.bloggerspice.com/2015/03/how-to-verify-domain-ownership-by-using-TXT-record-in-blogger.html
      http://www.bloggerspice.com/2015/03/how-to-verify-domain-ownership-in-blogger-by-Google-Analytics.html

      use any method. You don't have to follow all verification procedure. use Meta tag or TXT record for verification. but don't verify multiple ways.
  3. Thanks Sir.

    Sir Blogger Lab Full Width V1.1 Responsive Template এর Demo তে দেখেছিলাম Releted Post । কিন্তু এখন ব্লগে Template সেট করার পর দেখি Releted Post নেই । এখন কি করে ব্লগ পোস্ট এর শেষে Blogger Lab Full Width এর মতো Releted Post টা আনবো ?
    • Mukul Vai apni template file ta Mouse use kore right button a click koron. Tarpor "Ope With" thene "Notepad" select koron. Ekhon notepad theke all code copy koron. Tarpor Blogger dashboard theke Template->Edit Html a ager shob code delete kore notepad er code gola paste koron. And Save Template button a click koron. Ekhon shob show korbe. Dhonnobad. :>
  4. Thanks All for As Brother?
  5. This comment has been removed by a blog administrator.
    • It will work 100%
  6. Thank you very much sir, I save first.
    • Welcome Putuberbagi :)
  7. Do you know how to stop the unwanted Google Analytics injection on Pagespeed? I have removed google analytics and yet, it still shows an error:

    99 / 100 Suggestions Summary
    Consider Fixing:
    Leverage browser caching
    Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
    Leverage browser caching for the following cacheable resources:

    google-analytics com/ga.js (2 hours)
    • Hi Night Owl, Please follow the tutorial from below. Hope it will work.

      http://www.bloggerspice.com/2016/02/how-to-remove-widgets-and-Google-plus-script-to-make-blog-faster.html

      ^_^
  8. https://www.blogger.com/dyn-css/authorization.css?targetBlogID=8894727874904624913&zx=7ef0df93-6f9d-4d25-8430-a4f7f34590c7

    This CSS still comes when using your method. Can you pls help ?

    Earlier it was not coming but since some days it is coming even after using your method.
    • I think you have added script inside b:skin so authorization CSS is still appearing. So remove all CSS and also follow the below URL for disabling Google Plus script from Blogger theme.

      http://www.bloggerspice.com/2016/02/how-to-remove-widgets-and-Google-plus-script-to-make-blog-faster.html

      Thank you. :)
  9. not working, i still got message about rendering css from google page speed insight.
  10. Very useful information despite the difficulty of applying this explanation, but I worked to implement it as it should and with all accuracy .. Thank you very much, my friend.
    • Welcome Brother. I am very glade to hear that. :)
  11. I implemented it but am getting this error XML error message:
    The character reference must end with the ';' delimiter.
    • Hi There ^_^
      Have you change all the script at once or one by one? Just follow 1 step and save your theme and again follow another step then save your them. I think this will work.

      Also you can follow the below tutorial--

      https://www.bloggerspice.com/2018/07/render-blocking-css-file.html
  12. Best job . very good guiding . 👍👍👍👍👍👍👍👍
    • Thank you :dn
  13. 1. the below issue is not fix as per above guidelines, i try it but not fix, please suggest me sir
    www.gkforyou.com

    Optimize CSS Delivery of the following:
    https://www.blogger.com/…/v1/widgets/2437439463-css_bundle_v2.css
    • Hi Kumar :up
      This will work 100% and with this tutorial please also follow the Tutorial by visiting below URL

      https://www.bloggerspice.com/2018/07/render-blocking-css-file.html
  14. thanks for sharing
Go Up