jQuery in WordPress verzögert laden

Warum jQuery verzögert laden?

jQuery wird immer noch mit jeder WordPress-Installation ausgeliefert und die meisten Themes laden es ohne Defer. Das bedeutet, dass es das HTML-Parsing bei jedem einzelnen Seitenaufruf blockiert. Hier erfahren Sie, wie Sie das beheben.

Zuletzt überprüft von Arjen Karel im März 2026

Laut dem Web Almanac 2024 ist jQuery auf 74% aller Webseiten vorhanden, maßgeblich angetrieben durch WordPress. Dennoch verwenden nur 47% der mobilen Seiten das defer-Attribut für ein beliebiges Script. Das bedeutet, dass die Mehrheit der WordPress-Websites jQuery immer noch synchron lädt, das HTML-Parsing blockiert und jede Paint-Metrik auf der Seite verzögert, insbesondere den Largest Contentful Paint.

Werfen Sie einen Blick auf das Bild unten. Es zeigt den Unterschied im HTML-Parsing zwischen normalen, deferred und async Scripts. Wenn jQuery nicht verzögert (deferred) wird, blockiert der Browser das HTML-Parsing, bis das Script ausgeführt wurde. Wenn jQuery verzögert wird, muss der Browser den Parser nicht blockieren. Und das spart Ihnen eine ganze Menge Zeit. Für einen vollständigen Vergleich siehe async vs. defer und wie sich dies auf die Core Web Vitals auswirkt.

Der Grund, warum Theme-Entwickler jQuery nicht standardmäßig verzögern, liegt an Legacy-Code. Einige Plugins fügen (Inline-)Scripts hinzu, die von jQuery abhängen. Wenn jQuery verzögert geladen wird, aber das Script, das jQuery benötigt, nicht verzögert ist, entsteht ein Konflikt (und ein Fehler).

Methode 1: jQuery manuell verzögert laden

Schritt 1: Finden Sie heraus, wo jQuery eingereiht (enqueued) wird

Finden Sie zunächst heraus, wo jQuery in Ihrem WordPress-Theme eingebunden ist. Normalerweise befindet es sich in der Datei functions.php des Themes oder direkt in der Datei header.php. Suchen Sie nach Zeilen wie:

wp_enqueue_script('jquery');    

Wir wissen nun, dass das Handle für jQuery 'jquery' heißt.

Schritt 2: Verwenden Sie ein Child-Theme

Wenn Sie ein Parent-Theme ändern, erstellen Sie zuerst ein Child-Theme. Andernfalls werden Ihre Änderungen beim nächsten Theme-Update überschrieben.

Schritt 3: jQuery mit dem 'defer'-Attribut einreihen

Fügen Sie in der Datei functions.php Ihres Child-Themes den folgenden Code hinzu und passen Sie ihn an den Speicherort und das Handle Ihrer jQuery-Datei an. Wir verwenden die WordPress 6.3 Defer-Strategie:

function defer_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);

Schauen wir uns das im Detail an:

• wp_deregister_script('jquery'): Hebt die Registrierung des Standard-jQuery-Scripts auf.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy' => 'defer']);: Registriert jQuery mit der 'defer'-Strategie.
• wp_enqueue_script('jquery'): Reiht das modifizierte jQuery-Script ein.

Et voilà: Sie haben jQuery auf Ihrer WordPress-Website nun erfolgreich verzögert. Und als Bonus wissen Sie jetzt, wie man jedes Script verzögert, denn der Prozess ist exakt derselbe! Weitere Techniken zur Verzögerung außerhalb von WordPress finden Sie unter 16 Methoden, um JavaScript verzögert zu laden.

Achten Sie auf Inline-Scripts. WordPress 6.3 entfernt die Defer-Strategie stillschweigend, wenn an Ihr Script Inline-Scripts in der Position after über wp_add_inline_script() angehängt sind. Wenn Sie jQuery verzögern, es aber immer noch synchron geladen wird, überprüfen Sie, ob ein Plugin Inline-Scripts zum jQuery-Handle hinzufügt.

Methode 2: Ein Plugin verwenden

Plugins wie WP Core Web Vitals machen es super einfach, jQuery verzögert zu laden, und viele Plugins können sogar die Komplikationen bewältigen, die sich daraus ergeben können, indem sie auch Abhängigkeiten verzögern und einige andere Tricks ausführen, wie z.B. das Caching von jQuery-Events, bis jQuery ausgeführt wurde.

Methode 3: CloudFlare

Ein weiterer super einfacher Weg, jQuery verzögert zu laden, ist die Verwendung von CloudFlares Rocket Loader. Rocket Loader funktioniert, indem er alle Ihre Scripts während des Seitenladevorgangs deaktiviert und sie dann schnell wieder aktiviert. Dieser Trick ahmt das Verzögern von Scripts nach, hat aber einige Nachteile:

• CloudFlare Rocket Loader unterbricht eine Browser-Funktion namens Preload Scanner. Mit Rocket Loader werden Scripts nicht vorab geladen und es kann etwas länger dauern, bis Ihre Scripts heruntergeladen und ausgeführt werden.
• CloudFlare Rocket Loader ist ein ziemlich grobes Instrument. Es unterscheidet nicht zwischen wichtigen, weniger wichtigen und "nice-to-have" Scripts. Es verzögert einfach alles ohne Rücksichtnahme und überlässt Ihnen keine Kontrolle über das Script-Timing.

WordPress-Websites haben laut dem Web Almanac 2025 eine Erfolgsquote bei den Core Web Vitals auf mobilen Geräten von 45%, wobei LCP mit nur 53% die schwächste Metrik ist. Render-blockierendes jQuery ist eine der häufigsten Ursachen dafür. Das verzögerte Laden behebt nicht alles, aber es beseitigt einen der größten Blocker, der zwischen Ihrer Website und einem bestandenen LCP-Score steht.

Testen Sie Ihre Änderungen

Nachdem Sie jQuery verzögert haben, überprüfen Sie Ihre Website. Öffnen Sie die Browser-Konsole und suchen Sie nach Fehlern. Klicken Sie sich durch Ihre Menüs, Slider, Formulare und alles, was JavaScript verwendet. Wenn etwas kaputt geht, hilft Ihnen der Abschnitt zur Fehlerbehebung unten, es zu reparieren.

Fehlerbehebung

Wenn Sie auf Probleme stoßen, fallen diese wahrscheinlich in eine von 3 Kategorien. Die meisten Probleme können gefunden werden, indem Sie den Inspector öffnen und zum Konsolen-Tab navigieren. Wenn es Probleme gibt, werden Sie wahrscheinlich Warnungen finden, die so ähnlich aussehen und lauten: 'Uncaught ReferenceError: jQuery is not defined':

Sie zu beheben ist nicht allzu schwer. Neben dem Fehler befindet sich ein Verweis auf den Ursprung des Fehlers. Wenn es (index) ist, stammt er höchstwahrscheinlich von einem Inline-Script. Wenn es eine andere Datei ist, handelt es sich entweder um ein Timing-Problem oder Sie haben vergessen, diese Datei ebenfalls verzögert zu laden.

Abhängige Scripts

Inline-Scripts

$(function(){
 // do something
})

• Verwenden Sie den type="module"-Trick. Das neuere <script type="module"> verzögert auch Inline-JavaScript.
• Platzieren Sie Inline-Scripts in einer externen Datei. Wenn Sie Variablen benötigen, können Sie diese in einem Inline-Script direkt auf der Seite hinzufügen, aber die wichtigsten jQuery-abhängigen Funktionen sollten in einer externen Datei liegen, die ebenfalls verzögert wird.

Timing-Probleme

Ein weiteres, selteneres Problem ergibt sich aus dem Timing. Wenn jQuery nicht verzögert wird, wird es vor dem DOMContentLoaded- und dem load-Event ausgeführt. Darauf können Sie sich verlassen. Wenn es verzögert wird, wird ein Script möglicherweise nach dem DOMContentLoaded-Event ausgeführt. Das bedeutet, dass ein Event-Handler, den Sie an das DOMContentLoaded-Event angehängt haben, nicht zuverlässig ausgeführt wird. Wenn Sie auf Probleme wie diese stoßen, versuchen Sie, den Trigger zu ändern oder die Funktion in jQuery() einzuschließen.

Bei den von CoreDash überwachten WordPress-Websites haben Sites, die alle Scripts einschließlich jQuery verzögert laden, einen p75 LCP von 2,1 Sekunden im Vergleich zu 3,4 Sekunden bei Sites, die jQuery synchron laden. Das ist eine Verbesserung von 38 % durch eine einzige Konfigurationsänderung. Nachdem Sie Ihre Änderungen implementiert haben, überprüfen Sie die Verbesserung mit Real User Monitoring. Lighthouse-Scores zeigen Ihnen, ob das defer-Attribut funktioniert, aber Felddaten von echten Besuchern zeigen Ihnen, ob sich Ihr LCP tatsächlich verbessert hat. Weitere Informationen dazu, wie sich die Script-Platzierung auf die Core Web Vitals auswirkt, finden Sie im Core Web Vitals WordPress Guide. Und wie immer, wenn Sie nicht weiterkommen, zögern Sie nicht, mich zu kontaktieren!