Defer vs Async Attributes & Their Impact On Performance

Have you ever looked up how to improve the load time of your website and been told to defer the JavaScript (JS) or load it with asynchronously? Do you have any idea what that means? Each method is similar, however there are distinct differences you need to know about.

Loading JavaScript in a non-render blocking way is quintessential in optimizing your website, especially for mobile devices. Many performance tests such as GTmetrix, Pingdom, or Google Page Speed Insights will tell you to defer the Javascript to the footer.

Services like Google AdSense or various tracking codes are loaded with the asynchronous (async) tag. These services do not impact your website's performance.

What Does The Defer Attribute Do?

The Defer attribute, like the async attribute, affects the way that your browser interacts with JavaScript files. The defer attribute downloads the JavaScript files at the same time the HTML is being parsed.

However, the file will only be executed after all the HTML has been parsed. Additionally deferred JavaScript files will always execute in the order that they appear in the document. This is useful to know in scenarios where you are not combining the JavaScript files.

What Does The Async Attribute Do?

The asynchronous (async) attribute is the younger and newer version of the defer attribute. The defer attribute is like the async attribute. This is because the async attribute will download the JavaScript file while the HTML file is being parsed. The difference with async is that it pauses the HTML parser when the JavaScript file is finished being downloaded so the JavaScript file can be executed. This circumvents the render blocking of a plain old script tag, the HTML parser will still be interrupted.

So What Does This Mean For Performance?

If you have JavaScript files that deliver a fairly large payload, such as an advertising network, then deferring the JavaScript until the document is ready will allow the document's HTML to be parsed. It will be ready before delivering a large amount of images, video, JavaScript, etc.

Essentially, "the most performant way" to include JavaScript is to load it in the footer with the defer tag (when available you can't always do this).