defer und async über die WordPress Script API verwenden

Cookbook: Ziel und Ergebnis

Nicht kritisches JavaScript blockiert den HTML-Parser möglichst nicht. Abhängige WordPress-Skripte behalten ihre Reihenfolge.

Rezept: Schritt für Schritt

1. Handles und Abhängigkeitsgraph bestimmen. Inline-Skripte, jQuery-Plugins und DOM-Abhängigkeiten kennzeichnen.
2. defer für geordnete, DOM-abhängige Skripte bevorzugen; async nur für unabhängige Skripte ohne Reihenfolgegarantie.
3. Strategie über die WordPress Script API setzen, nicht per blindem String-Ersetzen am Tag.
4. Navigation, Formulare, Consent, Checkout und langsames Netzwerk ohne Cache testen.

Rechenweg oder Entscheidungsregel

Regel: defer führt nach Parsing in Dokumentreihenfolge aus; async sofort nach Download in beliebiger Reihenfolge. Ein abhängiges Skript darf nicht früher laufen als seine Bibliothek.

Praxisbeispiel

Analytics ohne abhängigen Inline-Code kann async sein. shop.js hängt von jquery und woocommerce ab: gemeinsam defer ist meist kontrollierbarer. Drei unabhängige Chat-/Tracking-Skripte werden erst nach Consent geladen.

Prüfen, ob es funktioniert

• Keine „is not defined“- oder DOM-Race-Fehler im Browserlog.
• Long Tasks und Parser-Blockade sinken; INP/LCP werden nicht schlechter.
• WordPress-Abhängigkeiten erscheinen in gültiger Reihenfolge.

Rollback

Strategy-Argument oder Filter auf den Ausgangswert zurücksetzen, Minify-/Combine-Cache vollständig purgen und Funktionstest wiederholen. Nicht gleichzeitig mehrere Delay-/Defer-Systeme aktiv lassen.

Unterschied

defer führt Skripte nach dem Parsen des Dokuments in Reihenfolge aus. async führt ein Skript aus, sobald es geladen ist; die Reihenfolge ist nicht garantiert. Abhängige Bibliotheken sind daher meist keine Async-Kandidaten.

WordPress-nativer Weg

wp_enqueue_script(
    'beispiel',
    plugins_url( 'beispiel.js', __FILE__ ),
    array(),
    '1.0.0',
    array( 'strategy' => 'defer', 'in_footer' => true )
);

Seit WordPress 6.3 berücksichtigt die API den Abhängigkeitsbaum und wählt eine zulässige Strategie. Das ist robuster als ein Filter, der blind defer an jedes Tag hängt.

Test

Prüfe Initialisierung, Ereignisreihenfolge, Consent, Formulare und dynamisch nachgeladene Komponenten. Eine niedrigere Blocking-Zeit darf nicht mit JavaScript-Fehlern erkauft werden.

Quellen und Prüfstand

• WordPress: wp_enqueue_script()
• WordPress: Assets einbinden

Inhalt fachlich geprüft am 17. August 2026. Konkrete Werte sind Ausgangspunkte, keine Universaldosierung.