How to Eliminate Render-Blocking Scripts and CSS - Blogger

Anonymous July 24, 2018
Hello and Welcome to GetWebInfo. Here on this post i will tell you that how can you Eliminate Render Blocking Scripts and CSS In Blogger. 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 the request of the visitors who don't know that how can Eliminate Render Blocking Java and CSS.



What is Render Blocking scrip

What is Render Blocking scrip is usually a script from any external source which is called by using a <srcipt src="....../files/style.ccss"/> tag and the problem lies in the URL or storage of the javascript file. With this file some of JavaScripts are these:

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

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

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


How to Identify Render-Blocking Scripts

Here you can understand that how can you identify render blocking script or CSS in to your Website so you can use PageSpeed Insights. It will show you which script and CSS files are blocking and making your website page speed low down.




How to Remove Render- Blocking Scripts and CSS from Blogger

Step 01: First of All find render-blocking scripts by using Google PageSpeed Insight as show above image

Step 02: Go to your blogger dashboard> Template> Edit HTML



Step 03: Search for that script or CSS using CTRL=F in the code which you found to be blocking in the Pagespeed insights tool.

Step 04: Do Following things with your website.

For JavaScript

01: Add Defer Tag

A defer tag is a tag which stop the script from loading and loads it when the whole page contents are loaded completely so it improves page loading speed.

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


02: Add External Javascript Internally

If you see that javascript loading on your blog is redirecting or taking to load than add the code above </head> in your template


03: 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


04: Use "async" Tag

This tag tell the page that the code which is asynchronism will be executed when it is available and will not be executed when not available so it minimized page loading speed.

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

For CSS

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'/>

Finally Save Template and you are done successfully.


You can put these three codes together above <head>  If you don't know that how can you put these three codes together so here is a picture that help you out.



Conclusion

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 these codes but store them on github or in the layout. I hope this article is really help full for you and you can easily increase your website speed.