How To Remove Bundle V2 CSS And Dyn Authorization CSS From Desktop And Mobile Google PageSpeed Insights Tutorial 2017


Here is a definitely workable tutorial on how to disable or eliminate the two render blocking CSS:

* bundle_v2.css
*dyn-css/authorization.css,

When you disabled these two CSS, it can further improve the loading time of your Blogger blog.

Note: Your two line of CSS code would NOT EXACTLY be the same as I have shown below. But they are similar.

The key words would be still there, like: dyn-css/authorization.css and bundle_v2.css.  

You come across these two render-blocking CSS lines when you analyze your blog with Google PageSpeed Insights.

It looks something like this:

remove bundle v2 and dyn authorization css from google pagespeed insights

On top of these two lines, you can see loading speed results for both Mobile and Desktop.

Note: You won't find these two CSS set of code in the template, when you type "Edit HTML".

You can only see these two lines of CSS code when you view the page source.

1. To do that, you need to right click on your blog homepage.

2. A menu box pops up and you click on "View Page Source". 

3. Then it will show you a page full of code.

4. The two CSS lines are in there.

5. You can search to view them by pressing on "Ctrl" together with the letter "F"from your keyboard.

6. An empty box pops up with the word "Search:".

7. Next you type or paste any one of the code into the search box.

8. Then press the "Enter" key.

9. Instantly that particular code would be highlighted.

10. At the same time you can see the other line of CSS code next to it.

11. Leave that page alone for the time being. You need it later (#12 below) in this tutorial.

Warning: Before you do changes to the template, do a full backup your Blogger template.

In case, you screw up the template, while you following this tutorial, you can restore to its original configuration.

Now let's get rid of these two CSS code from the Google PageSpeed Insights results.

Step One: Get Bundle_2 CSS Code


12. To get the Bundle_2 CSS code, go back to #11.

13. Click on the link:

 https://www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css
14. Instantly it will open a page full of code.

15. Leave it there for the time being.

Step Two: Get Mobile 2 Bundle CSS Code


16. To get this CSS code, first you need to open another new page on your browser.

17. Type your blog URL followed by ?m=1 onto the address bar.

18. The line should look something like this:

https://yourblogname.blogspot?m=1
19. Press the "Enter" key.

20. Instantly you can see your blog homepage as how it appears on the mobile phone.

21. Now right click on this mobile appearance page.

22. A menu box pops up and you click on "View page source".

23. A page full of code will appear.

24. Look for the URL, which looks something like this:

https://www.blogger.com/static/v1/widgets/2143686045-widget_css_mobile_2_bundle.css
25. Click on this link.

26. Instantly, another page of code will appear.

27. Leave it there for the time being.

Step Three: Paste Both CSS Code Within Header Tags


28. Go to your blog template and search for </head> tag.

29. Right ABOVE </head>, paste this set of code:

<b:if cond='data:blog.isMobile'>
<style type='text/css'>

</style>
<b:else/>
<style type='text/css'>

</style>
</b:if>
30. Now go back to step #25, copy out the whole page of code and paste it at the position indicated in red color 'PASTE HERE'. (mobile 2 CSS code)

<b:if cond='data:blog.isMobile'>
<style type='text/css'>
PASTE HERE
</style>
<b:else/>
<style type='text/css'>
PASTE HERE
</style>
<b:if>
31. Then go to step #14, again copy out the whole page of code and paste it at the position indicated in blue 'PASTE HERE'. (bundle_v2 CSS code)

32. Then click the orange color "Save theme" button.

Step Four: Change Opening And Closing Header Tags


33. Now Search for <head> tag.

34. Replace it with: &lt;head&gt;

35. Next search for </head> tag.

36. Replace it with: &lt;/head&gt;&lt;!--<head/>--&gt; 

37. Finally click the orange color "Save theme" button.

That's all.

Now go back and check with Google PageSpeed Insights and type in your blog URL to analyze.

If you follow my tutorial correctly, both Bundle_2 and Authorization CSS code should have disappeared for both Desktop and Mobile.

And your page speed results should have improved as well.

Note: And probably you still have one blocking Javascript called plusone.js.

Here is the tutorial on how to remove this plusone.js from Google PageSpeed Insights result.


Written by: Kher Cheng Guan