perf/third-party-cost

Dlaczego

Tag managers, chat widgets, video players and A/B testing tools often outweigh the site's own code, run long tasks during load and interaction, and change without your review. They are a common reason for poor INP and LCP.

Poprawka

List every third party with its owner and purpose; remove what nobody uses. Load the rest after the page is usable (async, defer, framework strategies, or on interaction). Replace embeds with a facade: a static preview image and a play or "load map" button that inserts the real iframe on click. Self-host small libraries instead of loading them from a CDN.

Przykłady

<!-- good: a video facade -->
<button type="button" class="video-facade" data-id="abc123">
  <img src="/img/video-poster.webp" alt="" width="1280" height="720">
  <span>Play video: setting up sync</span>
</button>

Źródła

• web.dev, Efficiently load third-party JavaScript
• Chrome for Developers, Lazy load third-party resources with facades
• web.dev, Best practices for using third-party embeds
• Chrome for Developers, Third parties insight

Przeczytaj w terminalu

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