Eliminate render-blocking JavaScript and CSS in above-the-fold content. You may have seen this line in Google Speed test for web pages.
Render Blocking Javascript
What renders blocking really means, Render means loading, so if a javascript is render-blocking, it means that the javascript is keeping the page from loading. Google recommends removing javascript that interferes with loading the above the fold content of your web pages. Many myths are there to remove javascript, but the possible solution is defer loading of javascript.
Defer Javascript Loading
The best solution to eliminate render blocking javascript is to defer javascript loading. Just place the following code in your HTML file before the </body> tag.
<script type="text/javascript">
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;
</script>If you’d like to learn more on how to do this or about this topic in general visit this article: [How To] Fix Defer Parsing of Javascript Warning in WordPress – CollectiveRay. It explains the concept of defer and the related keyword async (which allows the loading of javascript files in parallel to improve page speed).
This code instructs to load all important content first and then load defer.js file for better user experience according to Google page speed guidelines. Paste the above code in your HTML just before the </body> tag, change the “defer.js” to the name of your external JS file.