HTML properties async and defer on script tag

Often, the JS package documentations make you write piece of code like :

<script src='https://some.cdn/my/lib.js'>

with this piece of code, the browser will wait the script is loading before continue to load the DOM. This is a performance issue and a risk especially if the js library is not hosted by your server : which is really not recommended.

To avoid any blocking issues, async and defer manage the script loading asynchronously. The difference those 2 attributes is that defer will warranty that js will be loaded in the order they are found on the DOM.

Also, the script tag with module type use defer by default. It is possible to overwrite it with async attrubute.

Conclusion

Don’t forget to load your js asynchronously

<script src='https://some.cdn/my/lib.js' async>

Leave a Reply

Your email address will not be published. Required fields are marked *