- 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: The two line of CSS code are 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:
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.
CAUTION: Before you do changes to the template, do a full backup your Blogger template.
In case, you screwed up the template, while you were following this tutorial, you can restore it to its original configuration.
How To Remove Bundle V2 CSS And Dyn Authorization CSS
Now let's get rid of these two CSS code from the Google PageSpeed Insights results.
STEP #1: Get Bundle_2 CSS Code
1. To get the Bundle_2 CSS code, go back to #11.
2. Click on the link:
https://www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css
4. Leave it there for the time being.
STEP # 2: Get Mobile 2 Bundle CSS Code
1. To get this CSS code, first you need to open another new page on your browser.
2. Type your blog URL followed by ?m=1 onto the address bar.
3. The line should look something like this:
https://yourblogname.blogspot?m=1
5. Instantly you can see your blog homepage as how it appears on the mobile phone.
6. Now right click on this mobile appearance page.
7. A menu box pops up and you click on "View page source".
8. A page full of code will appear.
9. Look for the URL, which looks something like this:
https://www.blogger.com/static/v1/widgets/2143686045-widget_css_mobile_2_bundle.css
11. Instantly, another page of code will appear.
12. Leave it there for the time being.
STEP # 3: Paste Both CSS Code Within Header Tags
1. Go to your blog template and search for </head> tag.
2. 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>
<style type='text/css'>
</style>
<b:else/>
<style type='text/css'>
</style>
</b:if>
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
PASTE HERE
</style>
<b:else/>
<style type='text/css'>
PASTE HERE
</style>
<b:if>
<style type='text/css'>
PASTE HERE
</style>
<b:else/>
<style type='text/css'>
PASTE HERE
</style>
<b:if>
5. Then click the orange color "Save theme" button.
STEP #4: Change Opening And Closing Header Tags
1. Now Search for <head> tag.
2. Replace it with: <head>
3. Next search for </head> tag.
4. Replace it with: </head><!--<head/>-->
5. 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.