Myth: async and defer do the same thing

Myth: async and defer do the same thing
Swapped defer for async on 3 scripts: FCP 1.2s -> 1.2s, but LCP 2.1s -> 3.0s.
Both download without blocking the parser. The difference is execution timing.
— async executes the instant it lands, mid-parse, and can preempt the main thread right as your LCP image is decoding.
— defer waits until DOM parse completes, then runs in order.
Three async scripts firing during render = 900ms of contended main thread.
Use defer for anything touching the DOM; reserve async for independent beacons.
Takeaway: async on render-path scripts cost +900ms LCP here.