<tutorialjinni.com/>

Eliminate Render Blocking JavaScript

Posted Under: Core Web Vitals, Google, JavaScript, Performance, SEO, Tutorials on Sep 7, 2018
Webpage loading time is an important factor for website ranking a delay in the loading time can give your competitors a head start and you may loose visitor and search engine visibility. Search engine pay huge attention to site speed. High response time means less visitors. You find your webpage speed issue using google speed test tool. There is huge chance you can encounter this suggestion "Eliminate render-blocking JavaScript and CSS in above-the-fold content". Eliminate render-blocking JavaScript

Render Blocking JavaScript are those scripts which, that block Above the Fold display. The solution is to load only "necessary" scripts and load other scripts after the page is fully loaded. An example of a necessary javascript can be jQuery library. And an example of non-necessary javascript is Google Analytics code. Its only the webmaster who can decide which script is necessary. Use the following code to load your javascript after the page loaded.
function loadRenderBlockingSafeJS() {
    var elm = document.createElement("script");
    elm.src = "PATH_TO_JAVASCRIPT";
    document.body.appendChild(elm);
}
if (window.addEventListener){
    window.addEventListener("load", loadRenderBlockingSafeJS, false);
}
else if (window.attachEvent){
    window.attachEvent("onload", loadRenderBlockingSafeJS);
}
else{
    window.attachEvent("onload", loadRenderBlockingSafeJS);
}
Add this JavaScript at the bottom page just before the </body> . Add path to your js file.
elm.src = "PATH_TO_JAVASCRIPT";
if you have multiple files add this block multiple files or make a parameterized function to make more easy to use.


imgae