Guide to Eliminate Render Blocking Resources Blogger

Are you getting Eliminate Render-blocking Resources Blogger error? In this article, I will share with you few tips which will fix this error forever.
Eliminate Render Blocking Resources Blogger Fix

In the era of 4G and fibre internet, your website or blog must be fast enough to load within seconds. No one likes to wait until your webpage keeps on loading.

Even Google has said that Page speed is going to be an official ranking factor from now onwards. So it is very important to have an ultra-fast website or blog.

People who are using Google Blogger as their blogging platform might be aware of Eliminate Render Blocking Resources error thrown in Page Speed Insights while checking website load time. These render-blocking CSS and JS cause your website or blog to load slowly.

If you struggling with the "Eliminate Render-blocking Resources on Blogger" error then don't worry, in this article, I will share you few tips through which you will be able to fix this error. But first, let's learn more about this error.

What does eliminate render-blocking resources mean?

Render means loading. In simple terms, this error says that there are resources that are decreasing your blog’s rendering i.e. loading speed.

What are Render-blocking Resources?

Mostly there are three types of Render-blocking Resources viz: CSS, JS, and HTML imports. Not all these resources are counted as render-blocking. You only get this error message when:

  • A script located in the <head> of your theme doesn't have "defer" or "async" attribute.
  • A <link rel="stylesheet"> tag that doesn't have a disabled or media attribute.
  • A <link rel="import"> tag that doesn't have the async attribute.

How to find Render-blocking Resources?

It is very easy to find out all the render-blocking Resources of your blog, follow the below steps

  1. Visit page speed insights and check your blog's page speed.
  2. Once the process is complete, head over to the opportunity tab and scroll down until you see "Eliminate Render Blocking Resources"
  3. Make a note of all the CSS and JS mentioned in that tab as they are the main culprit.
Eliminate Render Blocking Resources Message

How to eliminate render-blocking resources in Blogger/Blogspot?

Before doing any changes, I would recommend you to backup your Blogger Template. Read this guide to know how to backup the Blogger template.

Follow the below methods to eliminate render-blocking resources in Blogger/Blogspot:

Eliminate render-blocking JS in Blogger

Method 1 - Remove unused default Google Blogger JS

  1. Log in to your Blogger Dashboard and go to the themes section in the left sidebar.
  2. Select "Edit HTML" and add b:js='false' just after <HTML> tag, check the below image.
Eliminate Render Blocking Resources Blogger Setting

Method 2 - Move your critical JS from head to body

One of the easiest way to eliminate render-blocking resources is to put the critical JS under the </body> tag.
Cut all the JS from <head> and paste it below </body> tag. By doing this you are telling the browser to load all the critical JS after the <head> section of the webpage is loaded.

Method 3 - Add Defer or Async tag to Critical JS

Once you come to know your critical Javascript codes, Add "defer" tag to your Javascript just like shown below. Adding defer tag will prevent the script to load when the webpage is loading.

<script defer="defer" src="Critical.js"/>

Add an "async" tag to your JavaScript just like shown below. To know more about "async" visit this page.

<script async="async" src="Critical.js"/>

Eliminate render-blocking CSS in Blogger

Method 1 - Remove unused default Google Blogger CSS

  1. Log in to your Blogger Dashboard and go to the themes section in the left sidebar.
  2. Select "Edit HTML" and add b:css='false' just after <HTML> tag,

Method 2 - Add media attribute in <link rel="stylesheet">tag

Once you come to know your critical CSS codes add media="all" just like shown in the below image. By doing this you are telling the browser that, "here is a CSS link which is only for reading".

<link href="print.css" rel="stylesheet" media="all"/>

Conclusion

These were some tips which can help you to fix "Eliminate Render Blocking Resources" error make your Blogger blog load faster than before. 

I have tried and applied these tips on my own blog and I am amazed  the results. I hope you too will be able to fix the problem. 

If you find any difficulties or are not able to apply the tips then do let me know in the comments section. I will surely help you.