How to defer load JavaScript

When it comes to optimizing page speed, as a general rule you should aim to remove all JavaScript your web pages do not explicitly need to load. When you do need one for a certain aspect that can be replaced with CSS (like visual effects) you should try to replace the effect or function the JavaScript helps you with CSS.

Defer loading JavaScript

When defer loading JavaScript you basically tell the browser to load the JavaScript after a web page (the DOM) has finished loading. This allows the browser to load the most important visual parts of your web page first so a quick initial view of the above the fold content can be shown, which can be defined by your critical rendering path. Deferring scripts this way makes the page load more quickly but without the average user even realizing some JavaScript are loaded after the DOM has loaded. You can do the same with images, which is also recommended.

Find JavaScript that isn't required for the initial view

A lot of JavaScript, for example JavaScript that is used for user-interactive or visual functions, can be loaded after the DOM has loaded and still perform their function. You don’t actually need to load this JavaScript to load the initial view of a page. However, your web pages may load a few JavaScript that are required to load the initial view content of a page.
Find out what JavaScript your web pages don't need for the initial above-the-fold view and copy & paste all of them in a single JavaScript (.js ) file.

Which JavaScript files should I defer load?

You should defer load all render-blocking JavaScript files. To see which file are render-blocking you can run your website through our website speed test.

The recommended way of defer loading JavaScript

The easiest, and most recommended way is using this simple HTML defer script snippet to call a JavaScript file: <script defer="defer" src="yourscript.js"></script> Replace yourscript.js with the .js file you created in the step before this one and place the above snippet in the HTML footer. By using the above snippet on your web page you tell the browser to load the yourdeferscripts.js file after your web page has finished loading.

Another way

Add the following small code to the bottom of your web page just above the closing </body> tag and replace yourscript.js with your JavaScript file: <script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "yourscript.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>

Test Your Website

First visit your website in a browser to make sure your website has not been negatively affected by defer loading the JavaScript files. When defer loading the JavaScript causes dysfunctionality or errors on your website you should immediately reverse your changes. If all looks and functions okay try the website performance test to check if the JS files on your website are being properly defer loaded. If you find any JavaScript files listed under the "Remove or replace render-blocking resources" warning it means that these files are not being defer or asynchronously loaded.