<b>defer vs async: the script attribute people guess wrong</b>

<b>defer vs async: the script attribute people guess wrong</b>

Both <code>defer</code> and <code>async</code> stop a script from blocking your page, but they behave differently, and choosing wrong can break things.

Think of two delivery drivers. <code>async</code> drops the package the instant it arrives, even mid-traffic — fast but order isn't guaranteed. <code>defer</code> waits until the road is clear and delivers everything in order.

The rule of thumb:
1. Use <code>defer</code> for your own scripts that depend on each other or on the page being ready.
2. Use <code>async</code> for independent third-party tags like analytics that don't care about order.
3. Never use plain script tags in the head for non-critical code — that blocks.

Getting this right speeds up both LCP and INP at once.

Try this: change one head script to <code>defer</code>, reload, and confirm the page still works — then keep it.