perf/third-party-async

Why

A plain <script src> stops HTML parsing until a server you do not control answers and the script runs. A slow chat widget or tag manager then delays everything after it, and an outage of that server can leave the page half-rendered.

Fix

Add async to independent tags (analytics, chat), defer when order matters, or load the script after an interaction. In frameworks use the loader: Next.js <Script strategy="afterInteractive"> or "lazyOnload", Nuxt useScript, Astro <script> processing. Ask whether the third party is needed on this page at all.

Examples

<!-- bad -->
<script src="https://widget.example-chat.com/loader.js"></script>
<!-- good -->
<script src="https://widget.example-chat.com/loader.js" async></script>

Sources

• web.dev, Efficiently load third-party JavaScript
• MDN, the script element (async and defer)
• Next.js, Script component (strategy)

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/third-party-async