How To Eliminate Render-Blocking Resources In Blogger

Blogger Page Speed

How to eliminate render-blocking resources in blogger. Everyone like a fast loading website. Nobody loves a webpage which takes unexpected time to load fully. Even google itself don’t give priority to a lazy loading webpage. You might also worry about your website that is taking a lot of time to load. If you will check your website in Google page speed tool you will see an opportunity that is, “eliminate render-blocking resources”. In this article I will tell you that, how you can eliminate these render blocking resources to supercharge your blogger’s loading speed. I’ll also tell you that what are these render blocking resources how you can find them in your blog, also what are the impact of these resources on your website’s loading speed.

Before moving ahead first check your website in Google page speed tool.
Click here to check your website.
Have you done it. ok.

WHAT IS THE MEANING OF RENDER-BLOCKING RESOURCES?

Render means loading. Now you can understand the meaning of the sentence which is, the resources which are decreasing your website’s loading speed are, render-blocking resources.
In short, the tags which are decreasing your website’s loading speed are render-blocking resources.

WHAT ARE RENDER-BLOCKING RESOURCES?

The most responsible render-blocking resources are JavaScript and CSS which located in your head area of theme.

According to Google
There are three types of render-blocking URLs.

  1. scripts
  2. stylesheets
  3. HTML imports
<script> tag that is in the <head> of the document and 
  • does not have a defer attribute. 
  • Does not have an async attribute.

<link rel="stylesheet"> tag that: 
  • Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet. 
  • Does not have a media attribute that matches the user’s device.

<link rel="import"> tag that: 
  • Does not have an async attribute.

Click here for knowing more.

ARE IMAGES RENDER-BLOCKING RESOURCES?

No. Images are not render-blocking resources but, it is recommended not to forget optimizing your images to make your blogger outstanding.

KNOW YOUR RENDER-BLOCKING RESOURCES

In order to fix your blogger’s Render-blocking resources you need to know that what type of render-blocking resources are those. They may be JavaScript or they may be CSS. In both the cases you need to apply different method to fix the issue.

HOW TO KNOW, A RENDER-BLOCKING RESOURCE IS JAVASCRIPT OR CSS:

Steps for doing this are as follows.

Just analyze your website in page speed tool and go to opportunity “Eliminate Render- blocking resources”. Copy highlighted code in image to your clipboard and open your blogger’s theme.xml file in any HTML editor and search the code which you have copied from page speed tool.

How to Eliminate Render-blocking resources in Blogger.

Copy the highlighted codes. you can copy the links also.

If a snippet contain codes like <script ,  .js , .min.js ,  <type='text' , 
 <type='javascript' etc. Then it’s a JavaScript. Like the following code is a JavaScript. 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
If a snippet contain codes like, 
 <link , <.css ,  <media='xyz' rel='stylesheet'>
 rel='import'>  type='css' etc. Then it’s a css. Like the following code is css.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i' media='all' rel='stylesheet' type='text/css'/>

HOW TO ELIMINATE RENDER-BLOCKING JAVASCRIPT IN BLOGGER:

Once you identified the critical JavaScript, now it’s time to repair them. Here are some method to resolve the issue.

PUT CRITICAL JAVASCRIPT BELOW THE HEAD:

One of the best practice to eliminate the render blocking JavaScript is that, you need to put the critical JavaScript below <body> tag in your theme. Just cut the critical JavaScript from the head and past it below the <body> tag.

<html>
<head>
<title>your title</title>
<----cut your code from here---->
</head>
<body>
<----past your code here---->
</body>
</html>

WHAT IT WILL DO:

This instruction will tell the html parser to load the critical JavaScript after the loading the head of the webpage.

DEFER THEM:

Add defer tag to your JavaScript.

<script defer="defer" src="...file/code.js"/>
<script defer='defer' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

WHAT IT WILL DO:

It will prevent the script to load when whole webpage is loading.

ASYNC THEM:

Add async tag to your JavaScript.

<script async="async" src="...file/code.js"/>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

HOW TO ELIMINATE RENDER-BLOCKING CSS:

ADD media ATTRIBUTE IN <link rel="stylesheet">TAG

Example

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

The above code is telling “here is a CSS link”. And also telling “the CSS is only for printing”.

WHAT TO DO WITH A<link rel="stylesheet"> TAG WHICH HAVE media ATTRIBUTE BUT STILL A RENDER BLOCKING RESOURCE:
Some time you may face a problem that a <link rel="stylesheet"> tag has media attribute but still a render-blocking resource. So in this situation you need to give a specific instruction to media attribute. Like in the following tag, media attribute doesn’t contain a specific instruction.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i' media='all' rel='stylesheet' type='text/css'/>
In this situation you need to specify the instruction for media attribute. Like I specified mediaattribute with a instruction read . Now see updated code.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i' media='read' rel='stylesheet' type='text/css'/>

WHAT IT WILL DO:

It tell the HTML parser that “here is a CSS link” and will also tell ” the CSS is only to read not for everything”.

HOW TO ELIMINATE RENDER-BLOCKING CSS LINKS WITH <link rel="import". Tag: 

Mark them with async attribute:

<link rel="import" href="myfile.html" async>

FIXING maxcdn.bootstrap LINKS:



<link href=’//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’/>

when you will identify your render-blocking resources, surely you will get the above css link. In this css link none of the above method will work. It’s a only exception on which any of the described method will not work. Steps are as follows for resolving this condition.

Note. Make sure to backup your theme.xml file to avoid any problem.

  1. Cut(remove) above css link.
  2. Now put the following JavaScript below <body> tag.
<script src="https://kit.fontawesome.com/699d058cf1.js" crossorigin="anonymous"></script>

It is advised to make your own font-awesome kit by clicking here because so many installation of above kit can create problem in your blogger

That’s it.

If you have any problem regarding the issue, you can ask me in comment box.

You can also tweet your problem on Twitter and tag us. We will help you personally and will embed your tweet here below the article. Our Twitter handle is @realtechandbio.

You may also like.

9 Ways To Make Your Blogger Fast And Mobile Friendly

Minify JavaScript, And CSS In Blogger In 2021.

Ensure Text Remain Visible During Webfont Load In Blogger.

How To Serve Images In WebP Format In Blogger.