Script Loading: async, defer, and type=module

A classic external script without loading attributes can pause HTML parsing while the browser fetches and executes it. For many page scripts, defer is a useful default because the browser can continue parsing and then run the script after the document has been parsed.

<script src="/scripts/site.js" defer></script>

async downloads the script in parallel and executes it as soon as it is ready. It does not preserve execution order, so it is suitable for independent scripts that do not rely on another script’s initialization.

Module scripts use type="module":

<script type="module" src="/scripts/app.js"></script>

Module scripts are deferred by default, support import and export, and run in module scope. If script B depends on script A, execution order matters. If a script only reports analytics and is independent, async may be appropriate. If a script needs the parsed DOM, defer or a module script is often suitable.

Measure the page and check the Network and Performance panels rather than assuming one attribute will make the whole site fast.