Verbindung fehlgeschlagen. Bitte versuchen Sie es erneut.

Zum Inhalt springen
SEO Tools
Hilfe und Dokumentation
Geschwindigkeit Hohe Auswirkung Einfach 5–15 Min.

Defer / async bei Skripten

Ein synchrones <script> blockiert das Rendern — verzögere es.

Was es ist

Wenn der Browser auf ein gewöhnliches <script> stößt, stoppt er das Rendern der Seite, lädt das Skript herunter und führt es aus, und fährt erst dann fort. Das nennt man ein „render-blocking“ (blockierendes) Skript. Die Attribute defer und async ändern dieses Verhalten.

Warum es wichtig ist

Jedes blockierende Skript im Header verzögert den Moment, in dem der Nutzer Inhalt sieht (verschlechtert LCP und First Paint). Bei mehreren Skripten summiert sich die Verzögerung. Auf dem Handy und langsamer Verbindung bedeutet das Sekunden leerer weißer Seite — und eine höhere Absprungrate.

So geht's

  1. 1Markiere Skripte, die für das erste Rendern nicht nötig sind, mit dem Attribut defer — sie laden im Hintergrund und werden nach dem Aufbau der Seite in ihrer Reihenfolge ausgeführt.
  2. 2Für unabhängige Skripte (Analytics, Chat) verwende async — sie werden sofort nach dem Download ausgeführt, ohne Rücksicht auf die Reihenfolge.
  3. 3Halte kritische Skripte minimal; den Rest lade am Ende des <body> oder mit defer.
  4. 4Faustregel: defer = hängt vom DOM oder von der Reihenfolge ab; async = eigenständig, von nichts abhängig.

Beispiel

Falsch
<head>
  <script src="/js/app.js"></script>   <!-- blockiert das Rendern -->
</head>
Richtig
<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Fazit

Defer/async ist eine der günstigsten und wirksamsten Geschwindigkeitsoptimierungen — oft genügt es, ein Wort am Tag zu ergänzen. Für die meisten Skripte ist defer die richtige Wahl. Prüfe nach dem Deployment, dass nichts aufgehört hat zu funktionieren (vor allem reihenfolgeabhängige Skripte) und miss die LCP-Verbesserung.

Verwandte Themen