January 27, 2020

Textual description of firstImageUrl

How To Remove Bundle V2 CSS And Dyn Authorization CSS For Blogger

|
Here is a workable tip on how to disable or eliminate the two render blocking CSS for Blogger.

  • bundle_v2.css
  • dyn-css/authorization.css

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

how to remove bundle V2 CSS and Dyn Authorization CSS

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:

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.

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

3. Instantly it will open a page full of code.

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

4. Press the "Enter" key.

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

10. Click on this link.

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>

3. 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>

4. 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)

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: &lt;head&gt;

3. Next search for </head> tag.

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

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.

RELATED TIPS: