How do I remove Render Blocking JS?

Question

A Google Page Speed Insights test has revealved that I need to remove render-blocking JavaScript.

I am following this tutorial - https://varvy.com/pagespeed/defer-loading-javascript.html which explains that I need to add the below code in my sites HTML just before the tag and to name my 'JS external file' in the code.

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "NAME_YOUR_JS_EXTERNAL_FILE.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Can someone advise me how I add this code to my HTML? Is there a specific file in my root directory I need to edit?

Also, how do I identify the name of my external JS file?

Thanks

Answer 1

Is there a specific file in my root directory I need to edit?

You're likely testing your homepage (index.html/index.php/etc) - if that's true, you are probably referencing external javascripts which can cause render-blocking errors. Take a look in the homepage code to see which javascript files you're including and you will start to get a better picture.

They will look like this:

Also, how do I identify the name of my external JS file?

Testing your domain from GT Metrix (or even Google Pagespeed) will give you detailed information about the render-blocking files. If you are referencing externally hosted javascript files (Twitter, AddThis, Etc) there may be little that you can do.

Can someone advise me how I add this code to my HTML?

As to Varvy's tutorial, you may defer certain scripts from loading asynchronously such as Google Analytics. If your homepage includes the code before the closing tag, you would select/cut all the code between the Analytics script tags.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','path_to_google_analytics.js','ga'); ga('create', 'UA-YOURKEY', 'auto'); ga('send', 'pageview');

Then, paste the code into a new text document - save it as 'defer.js' and upload to your server's JS folder (or path to wherever your javascript files are kept).

Then, following Varvy's tutorial, paste his code inside script tags: function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;

before the closing tag replacing 'defer.js' with the name of your custom .js file (reference above name: defer.js). Be sure you have specified the correct path to this .js file. HTH