Script loading: defer and async

A script without attributes blocks HTML parsing. defer and async avoid that.

Updated

  • defer: parallel download, runs after HTML parsing, in order. A good default.
  • async: runs as soon as ready, no order guaranteed. For independent scripts only (analytics, widgets).
  • type="module": deferred by default.
<script defer src="script.js"></script>
<script async src="analytics.js"></script>
<script type="module" src="app.js"></script>

Documentation: script element - MDN. Less blocking JS improves LCP; less executed JS improves INP.