Drittanbieter-Skripte blockieren Interaktionen: diagnostizieren und eindämmen

Was passiert

Drittanbieter-Skripte — Analytics, Tag-Manager, Werbung, Chat-Widgets, A/B-Tests — laufen auf demselben Main Thread wie dein Code. Wenn ein Tag-Manager fünfzig Regeln auswertet oder ein Werbeskript ein Payload parst, wartet der Klick deines Nutzers genauso, wie er auf deine eigene lange Aufgabe warten würde.

Die Long Animation Frames API ordnet lange Aufgaben ihrer Source-URL zu, sodass du genau siehst, welche Domain dich INP kostet.

So erkennst du es

Lange Aufgaben in den DevTools Performance werden externen Domains zugeordnet (googletagmanager.com, connect.facebook.net, Widget-CDNs).
Der INP wurde schlechter, nachdem ein Marketing-Tag hinzugefügt wurde, ohne Änderungen an deinem eigenen Code.
Der Input Delay schnellt kurz nach dem Laden hoch, wenn Drittanbieter-Skripte initialisieren.

So behebst du es

Lade jedes Drittanbieter-Skript mit async oder defer; niemals synchron im <head>.
Prüfe die Tag-Liste: entferne Tags, die niemand nutzt — ein Skript zu löschen ist die einzige Lösung, die null Millisekunden kostet.
Verlagere Tags mit Partytown vom Main Thread (führt sie in einem Web Worker aus) und lade Widgets wie Chat auf Nutzerabsicht (erster Klick) statt beim Seitenladen.

Problem

<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->

Lösung

<script async src="https://cdn.example-widget.com/loader.js"></script>
<!-- or better: inject on first user intent -->
<script>
  chatButton.addEventListener("click", loadChatWidget, { once: true })
</script>

Scanne deine Website kostenlos →