Post Tags

Blogger Tutorials

Pretty posts

By Rubel
Remove render-blocking Javascript and CSS from Blogger/Blogspot
May be recently, you checked your website by google page speed tools and seen that google tells you to eliminate render blocking javascript and css from several notice and that's can effect on your page speed. If you want to increase google pagespeed score, you need to solve this problem. So let's follow my tutorial, how to eliminate render-blocking javascript and css from blogger/blogspot.

** Backup your theme before apply this tricks**


Eliminate CSS Bundle - Blogger automatically create two css widget bundles for your website. It's looks like.
Remove Blogger CSS Bundle
To remove these bundle, follow simple steps.
Step 1: Go to Blogger>Theme
Step 2: Click on Edit HTML
Step 3: Click anywhere inside the code area
Step 4: Press CTRL+F to open a search bar
Step 5: Now search following code
<head>
Step 6: Replace <head> tags by below code
&lt;head&gt;
Step 7: Again search following code
</head>
Step 8: And replace </head> tags by below code
&lt;/head&gt;&lt;!--<head/>--&gt;
Step 9: Click on Save theme and you are done.

Now again search your website by google pagespeed insights tools and you will see that css bundle issue is solved.


 Eliminate JS Bundle - Like css blogger automatically create widgets.js bundle for javascript. To remove these bundle follow below tutorial.
Step 1: Search following code
</body>
Step 2: Replace </body> tags by below code
&lt;!--</body>--&gt;&lt;/body&gt;
Step 3: Click on Save theme
That's it. Now see page speed score and it's improve.


How to fix contact form problem after applying JS bundle eliminate tricks - If you use contact form in static page and also want to remove js bundle then you need to follow my another trick. Because after removing js bundle, your contact from will not work anymore. This trick will not work, if you use contact form in sidebar or footer.
Step 1: Search following code
</body>
Step 2: Replace </body> tags by below code
<b:if cond='data:blog.url != &quot;http://www.codiblog.com/search/label/Contact_Us&quot;'>&lt;!--</b:if></body><b:if cond='data:blog.url != &quot;http://www.codiblog.com/search/label/Contact_Us&quot;'>--&gt;&lt;/body&gt;</b:if>
Customize: Replace http://www.codiblog.com/search/label/Contact_Us with your contact us page link url.
Step 3: Click on Save theme and you are done.

In this tricks, i have used blogger conditonal tags so that default javascript widget.js file only loads when someone visits contact us page, and other page it will be ignore.