Load JavaScript asynchronously

By default, JavaScript files will only be loaded one at a time. To improve your site’s performance, load JavaScript asynchronously so that the files can be downloaded in parallel.

The HTML5 way

With HTML5, you have the option of using the async tag. The tag will cause the browser to download the script asynchronously.

<script async src="http://example.com/script.js"></script>

Browser Support

We’re a long way from using only the HTML5 version so you will still need to use the non-HTML5 method.

The standard non-HTML5 way

Here’s a self calling function created by Mathias Bynens that will load the scripts asynchronously.

(function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.src = '//example.com/script.js';
    s.parentNode.insertBefore(g, s);
}(document, 'script'));

If you’re planning on loading multiple scripts this way, you can use the function below that I created. It’s a modified version of the one shown above.

function asyncLoad(path) {
    var g = document.createElement('script'),
        s = document.getElementsByTagName('script')[0];
    g.src = path;
    s.parentNode.insertBefore(g,s);
}

Send the path of the script you’d like to load to the function and you will be set!

asyncLoad('//example.com/script.js');