What is Async and Defer?
Async and Defer are two attributes that can be used in the
<script>tag to optimize the loading of JavaScript files. Async and Defer are both used to tell the browser to download the JavaScript file while the HTML document is still being parsed. The difference between the two is that Async will execute the JavaScript file as soon as it is downloaded, while Defer will wait until the HTML document has been completely parsed before executing the JavaScript file.
How to Use Async and Defer
Using Async and Defer is simple. All you need to do is add the attribute to the
<script>tag. For example, if you wanted to use Async, you would add the attribute
asyncto the
<script>tag like this:
<script src="example.js" async></script>If you wanted to use Defer, you would add the attribute
deferto the
<script>tag like this:
<script src="example.js" defer></script>Benefits of Using Async and Defer
Using Async and Defer can help improve the performance of your website by allowing the browser to download and execute JavaScript files while the HTML document is still being parsed. This can help reduce the amount of time it takes for the page to load, as the browser does not have to wait for the JavaScript files to be downloaded and executed before it can continue parsing the HTML document.
Summary
Using Async and Defer can help improve the performance of your website by allowing the browser to download and execute JavaScript files while the HTML document is still being parsed. This can help reduce the amount of time it takes for the page to load, as the browser does not have to wait for the JavaScript files to be downloaded and executed before it can continue parsing the HTML document.
2 responses to “Optimizing HTML and JavaScript Code with Async and Defer”
This explanation of async vs defer is really helpful, especially the part about how they affect parsing and execution order. One thing I still find tricky in real projects is deciding which scripts should be async, which should be defer, and which (if any) should still be loaded synchronously. Do you have any practical rules of thumb or patterns you follow, for example for analytics scripts, third-party widgets, or critical in-house scripts that manipulate the DOM early? Some real-world decision criteria or examples would be great to see as a follow-up.
Clara, I am really glad the parsing vs execution part helped. As a practical rule of thumb beyond what I covered: start by marking *everything* as defer, then selectively change scripts that truly do not depend on DOM or other scripts (like most analytics and tracking) to async, and keep only the scripts that must run before first paint (e.g. critical feature flags or inline configuration) synchronous and as small as possible. In many real projects, that ends up being: inline/sync for tiny bootstrapping logic, defer for your app and vendor bundles, and async for third-party widgets or analytics that you can tolerate firing slightly later or in an unpredictable order.