How To Eliminate Render-Blocking Scripts And CSS - Blogger - 101Helper

PropellerAds
T Tuesday, February 14, 2017

How To Eliminate Render-Blocking Scripts And CSS - Blogger

eliminate-render-blocking-javascript-css


As page loading speed matters so much that's why I write frequently about how to make blog or site load faster and so is this post about and I am writing this post on request of a visitor to help him and also those who also have this problem in their blogs. So let me start with intro of what is render blocking scripts and CSS.

What Is Render-Blocking Scripts And CSS ?

Render blocking script is usually a script from any external source which is called by using a <srcipt src="...../files/style.css"/> tag and the problem lies in the URL or storage of the javascript file. Some common problems with external scripts are:

1. The URL which contains the Javascript file is redirecting to multiple URLs and then reach the Javascript file.

2. The URL which contains the Javascript file responds slowly due to server error.

3. The URL which contains the Javascript file sometimes does not respond due to down server status.

Similar to Javascript files, there are some CSS files which are stored externally have the same problems as mentioned above.

How To Identify Render-Blocking Scripts 

To identify render blocking script or css you need to use PageSpeed Insights. It will show you which scripts and css files are blocking and making your page load slow.

how-to-eliminate-render-blocking-scripts-css-in-blogger

How To Remove Render-Blocking Scripts And CSS From Blogger

Step 1: Find render-blocking scripts by using Google PageSpeed Insights as shown in the above image.

Step 2: Go to blogger dashboard > Template > Edit Html.

how-to-edit-template-in-blogger

Step 3: Search for that script or CSS using CTRL+F in the code which you found to be blocking in the PageSpeed Insights tool.

Step 4: Do following things:

For Javascript:

1. Add "Defer" Tag:

A defer tag is a tag which stops the script from loading and loads it when the whole page contents are loaded completely so it improves page loading speed. To add defer tag to your javascript simply add defer='defer' as showing in below example:

<script defer="defer" src="...file/code.js"/>

2. Add External Javascript Internally:

If you see that javascript loading on your blog is redirecting or taking time to load than add the code above </head> in your template or shift it to another host like GitHub.

 Recommended:  How To Store Blogger Codes On Github To Speed Up Blog ?

3. Remove Blocking Code:

If you do above things and still see that the script is blocking then remove that script or copy it and add it in the Layout as a gadget.

 Recommended:  How To Add Or Remove Gadgets In Blogger ?

4. Use "async" Tag:

This tag tells the page that the code which is asynchronised will be executed when it is available and will not be executed when not available so it minimizes page loading speed. To add async tag to your code simply add async='async' because blogger doesn't accept async alone. Here is a sample:

<script async="async" src="...file/code.js"/>



For CSS:

1. Add CSS in <head>:

If you have CSS code stored externally but you are loading it in body by using below code:

<link href="...file/code.css" rel="stylesheet" type="text/css"/>

Simply move it below <head> in your template

2. Use Github:

If your hosting is not responding in time or have many redirects(as in GOOGLE DRIVE) then use Githun to store your codes.

 Recommended:  How To Store Blogger Codes On Github To Speed Up Blog ?

Step 5: Save your template and you are done successfully.

What To Do For Internal Blocking Javacript Or CSS ?

If you have any internal codes which are blocking your pages then remove them because you can't modify them to get work and also avoid such scripts because they are coded by inexperienced bloggers.

Final Words:

By following above steps you can remove blocking javascript and css but if you need the codes and you want to keep them but minimize the loading speed then don't remove the codes but store them on github or in the layout. You may not see any improvement in the Google PageSpeed Insights tool but there will be surely some improvement which you will observe while loading your page.

I hope this post was helpful to you, if not ask me about it. Thanks for visiting 101Helper. Like us on Facebook and never miss a post.

Search keywords: How To Eliminate Render-Blocking Scripts And CSS - Blogger, Blogger blog page loading speed, how to remove blocking scripts and css from blogger blog,how to speed up blog,how to minimize page loading speed in blogger

26 comments :

  1. hello, can I introduce defer="defer" and/or async="async" to optimise css resources?

    ReplyDelete
  2. Plus give me an example of a sync or defer added css code. I added but it is not working

    My blog : https://techincraze.blogspot.com

    ReplyDelete
    Replies
    1. If you added defer='defer' to your script it will load after all the contents are loaded so it will not add burden on your blog and if you add async='async' to your script it will be loading only if its available and if not it will not be loaded. Also this works for external scripts like stored on Github etc. Also some javascript codes are sensitive to it so if you added any of the tag, the script will stop working

      Delete
  3. So, I should add async tag to css. Where to add these tags, after <link tag or where.

    ReplyDelete
  4. It's not working

    Check my blog : https://techincraze.blogspot.com

    ReplyDelete
    Replies
    1. Its working for link tag but in the script your need to add defer="defer" not just defer as I saw it in your blog code. [script defer src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"][|script]

      Delete
  5. Hi, iam getting following optimize suggestion from Google Pagespeed tool,
    Optimization Suggestions
    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 3 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.
    None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    Remove render-blocking JavaScript:
    http://cdnjs.cloudflare.com/…ookieconsent2/3.0.3/cookieconsent.min.js
    http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js
    https://www.blogger.com/static/v1/widgets/3358558032-widgets.js
    Optimize CSS Delivery of the following:
    https://www.blogger.com/…/v1/widgets/3213516723-css_bundle_v2.css
    https://fonts.googleapis.com/css?family=Roboto:400,500,700|Oswald
    http://cdnjs.cloudflare.com/…okieconsent2/3.0.3/cookieconsent.min.css
    https://www.blogger.com/…&zx=2aae11d1-ee59-4e2e-8972-4075cf56802b

    My doubt is for which one need to defer tag and which one need to add async tag. please explain one by one please.

    ReplyDelete
    Replies
    1. Go to your blog theme > Edit Html and search for these, remove every single and its done. But the problem is after remove all these things your blog's theme will be totally messed up because there is a link to font and some CSS and java so I recommend you to use another good theme rather than to eliminate and waste your time.

      Delete
  6. Hello Fahim.....
    How to go about with this?

    link href='https://maxcdn.bootstrapcdn.com/font-aweasome/4.7.0/css/font-aweasome.min.css' rel='stylesheet'

    Partially Loaded....

    ReplyDelete
    Replies
    1. rel='Stylesheet' loads CSS files only when I visit https://maxcdn.bootstrapcdn.com/font-aweasome/4.7.0/css/font-aweasome.min.css it is not a CSS file. Store the CSS file on github or your own hosting site and use its link. It will work now.

      Delete
  7. Don't actually get you right you mean I should remove the code automatically from my blog?

    Go-to Google Pagespeed insights and test my blog https://www.TechzBot.com and see the code I ealier drop here.
    Please Sir Fahim your recommendation and Respond will be very appreciated.
    Regards.

    ReplyDelete
    Replies
    1. If i simply say then the link which contains your css code does not show any css code that's why css is not loading properly. Your css code should be stored in such a way that when we visit the link we see the code for example link should be "github.com/mytheme.css" and after visiting this link i should see my css code.

      Delete
  8. Thank you for the fast response, Now I understand you that means, that specific code is not of use anymore, so now I can remove it from my blog right?

    ReplyDelete
    Replies
    1. If the link is not reaching any external css code then definitely its slowing down your blog so you should remove it.

      Delete
  9. Thank you Sir.....
    Gonna remove it asap

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. You have to remove comments from your theme code. Go to theme Edit html and search for comments and remove it.

      Delete
  11. Hello, so I got these 4 blocking CSS resources:

    https://www.blogger.com/static/v1/widgets/2437439463-css_bundle_v2.css
    http://fonts.googleapis.com/css?family=Montserrat:400,700
    http://fonts.googleapis.com/css?family=Roboto%3A400%2C900%2C700%2C500%2C300%2C400italic%7CMontserrat%3A700&ver=4.6.6
    http://maxcdn.bootstrapcdn.com/…t-awesome/4.5.0/css/font-awesome.min.css

    Any ideas on how to fix the first and last ones?
    As for the second and third I think if I switch the fonts roboto and montserrat for arial or trebuchet then I won't need these 2 blocking css, right? but need help for the first and forth please.

    ReplyDelete
    Replies
    1. 1. http://maxcdn.bootstrapcdn.com/…t-awesome/4.5.0/css/font-awesome.min.css

      2. https://www.blogger.com/static/v1/widgets/2437439463-css_bundle_v2.css

      You can remove the above by searching it but you can't remove 2nd one, there is trick to remove it, I will do a post about it soon but When you remove it, everything is misplaced in blogger as it contains all the CSS so after remove it you need to make your own CSS so I recommend to use other templates not created by blogger.

      Delete