Async vs defer
Both download scripts without blocking HTML; defer preserves order after parsing, while async runs each file whenever it arrives.
See it
What it is
Both async and defer let an external script download while HTML keeps parsing. A classic script with async runs as soon as its download finishes, so it can interrupt parsing and async scripts can execute in any order. A classic script with defer waits until parsing finishes, then deferred scripts run in document order before DOMContentLoaded.
Use defer for application scripts that touch the DOM or depend on each other; it is the modern replacement for the old Steve Souders advice to park every script tag at the bottom of the body. Use async for independent work such as analytics that can run whenever it arrives. JavaScript modules are deferred by default; adding async to a module asks it to run as soon as the module and its dependencies are available.
Gotcha: async is not shorthand for faster. Put a dependency and its consumer in separate async tags and network timing decides which runs first. The defer attribute does nothing for an inline classic script, so move that code into an external file or place the inline bootstrap where its synchronous execution is intentional.
Ask AI for it
Audit every <script> on this page. Add defer to ordered application scripts that read the DOM, add async only to independent analytics or advertising scripts, and leave type='module' scripts deferred by default unless they are genuinely order-independent. Remove defer from inline classic scripts because it has no effect, preserve dependency order, and verify the final execution sequence with Performance marks and the DOMContentLoaded event. Output the revised script tags plus a table of download timing, execution timing, and dependency for each.