Home > Wordpress > How to Eliminate Render Blocking JS & CSS in Above the Fold Content
How To Wordpress

How to Eliminate Render Blocking JS & CSS in Above the Fold Content

Render Blocking JavaScript in WordPress

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";
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

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.

About the author

Syed Moin Ali

Hello My Name is Syed Moin Ali and I am the founder of PC Learnings Here on this blog I write about Blogging, SEO, Internet Tricks, Social Networking Site, and Make Money

/* ]]> */