Render-blockierende Skripte: defer und async richtig nutzen

Warum das wichtig ist

Der Browser liest das HTML von oben nach unten. Stößt er auf ein normales <script src="...">, hört er auf zu lesen, lädt die Datei, führt sie aus und macht erst dann weiter. Im <head> heißt das: Solange das Skript lädt, gibt es keinen einzigen sichtbaren Inhalt. Kommt das Skript von einem fremden Server, hängt deine Ladezeit zusätzlich an dessen Tagesform.

Zwei Attribute ändern das. Mit defer lädt der Browser das Skript nebenher und führt es erst aus, wenn das HTML fertig gelesen ist, und zwar in der Reihenfolge, in der die Skripte im Code stehen. Mit async lädt er ebenfalls nebenher, führt das Skript aber sofort aus, sobald es da ist, ohne feste Reihenfolge. Skripte mit type="module" verhalten sich von Haus aus wie defer.

Unsere Empfehlung: Nimm defer als Standard. async lohnt sich für Skripte, die für sich allein stehen und von nichts abhängen, etwa ein Statistik-Skript.

So prüfst du es selbst

Der kostenlose Check zählt alle externen Skripte im <head>, die weder async noch defer noch type="module" tragen. Keins ist gut, ein oder zwei geben eine Warnung, ab drei ist es ein Fehler. Eingebettete Skripte ohne src zählen wir nicht mit.

Von Hand geht es so:

1. 01Öffne den Quelltext deiner Seite mit Strg+U (Mac: Cmd+Option+U).
2. 02Such mit Strg+F nach <script und geh alle Treffer bis </head> durch.
3. 03Jedes Tag mit src=, aber ohne async, defer oder type="module" blockiert.
4. 04Optional: Lighthouse in den Entwicklertools (F12) laufen lassen. Der Bericht listet render-blockierende Anfragen auf, dort stehen auch CSS-Dateien, die checkfrei bei diesem Punkt nicht zählt.

So behebst du es

Teste jede Änderung mit offener Konsole (F12, Tab Konsole). Rote Fehlermeldungen nach dem Umstellen zeigen sofort, wenn ein Skript jetzt zu spät kommt.

<!-- blockiert den Seitenaufbau -->
<script src="/js/slider.js"></script>

<!-- lädt nebenher, läuft nach dem HTML, Reihenfolge bleibt -->
<script src="/js/jquery.min.js" defer></script>
<script src="/js/slider.js" defer></script>

<!-- unabhängiges Skript, Reihenfolge egal -->
<script src="https://statistik.example/script.js" async></script>

wp_enqueue_script(
  'mein-slider',
  get_stylesheet_directory_uri() . '/js/slider.js',
  array(),
  '1.0',
  array( 'strategy' => 'defer' )
);

<script src="{{ 'theme.js' | asset_url }}" defer></script>

import Script from 'next/script';

<Script src="https://statistik.example/script.js" strategy="lazyOnload" />

Typische Fehler

• ·jQuery mit defer, Inline-Code ohne. Steht weiter unten ein <script> mit $(...) direkt im HTML, läuft es, bevor jQuery da ist. In der Konsole steht dann "$ is not defined". Pack den Inline-Code in eine eigene Datei mit defer oder in einen DOMContentLoaded-Listener.
• ·async bei Skripten, die aufeinander aufbauen. Das geht mal gut und mal nicht, je nachdem, welche Datei zuerst ankommt. Solche Fehler tauchen nur sporadisch auf und sind mühsam zu finden.
• ·Das Consent-Tool verzögern. Manche Consent-Tools müssen absichtlich als erstes und blockierend laden, damit sie Tracker zurückhalten können. Halte dich an die Einbauanleitung des Anbieters. Das ist eine berechtigte Ausnahme, auch wenn der Check sie mitzählt.