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.
- scripts
- stylesheets
- HTML imports
<script> tag that is in the <head> of the document and - does not have a
deferattribute. - Does not have an
asyncattribute.
<link rel="stylesheet"> tag that: - Does not have a
disabledattribute. When this attribute is present, the browser does not download the stylesheet. - Does not have a
mediaattribute that matches the user’s device.
<link rel="import"> tag that: - Does not have an
asyncattribute.
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.
Copy the highlighted codes. you can copy the links also.
<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'/><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:
media ATTRIBUTE IN <link rel="stylesheet">TAGExample
<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”.
<link rel="stylesheet"> TAG WHICH HAVE media ATTRIBUTE BUT STILL A RENDER BLOCKING RESOURCE:<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'/>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”.
<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.
- Cut(remove) above css link.
- 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.
Nice article. Thanks for publishing a good content.
Thanks a lot for reviewing our website.
successfully resolved the problem of render-blocking resources in blogger
thank you very much
Thanks this fixed my blog
Hello CEO Imran,
I own the first comment above by “abk” please kindly delete it for me as it contains my blog link pointing with ugc nofollow tag.
I have drop another comment without link below as replacement.
Thank you
successfully resolved the problem of render-blocking resources in blogger
nice info, thanks
Thanks, Dear!
It’s worked for me a lot, only one thing that I’m not available to do (PUT CRITICAL JAVASCRIPT BELOW THE HEAD:) so far and others thing is- bootstrapcdn.com/font- not done by me. due to errors (not showing icon proper)