perf/third-party-async

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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