How to defer load Javascripts.


When it comes to optimizing page speed, as a general rule you should aim to remove all Javascripts 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 with CSS.

Defer loading javascripts

When defer loading Javascripts you basically tell the browser to load the Javascripts 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 Javascripts are loaded after the DOM has loaded. You can do the same with images, which is also recommended.

Find Javascripts which aren't required for the initial view

Many Javascripts, for example Javascripts that are 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 these Javascripts to load the initial view of a page. However, your web pages may load a few Javascripts that are required to load the initial view content of a page.
Find out which Javascripts 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 Javascripts

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(s). Also, when defer loading the Javascript(s) causes disfunctionality or errors on your website you should of course immediately reverse your changes. If all looks and functions okay try the website performance test to check whether any of the JS files on your website are not 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.