Defer jQuery in WordPress

Ein Leitfaden zum Deferren von jQuery in WordPress

Grüße, liebe Leistungsfans! Ich freue mich, Einblicke in die Optimierung Ihrer WordPress-Seite und die Verbesserung der Core Web Vitals zu teilen. Heute zeige ich Ihnen, wie Sie das Laden von jQuery verzögern (defer) können, wodurch die Geschwindigkeit Ihrer Website und folglich die Benutzererfahrung verbessert wird.

Warum jQuery deferren?

jQuery, eine robuste JavaScript-Bibliothek, ist zweifellos ein mächtiges Werkzeug, aber ihr synchrones Laden kann manchmal die anfängliche Ladezeit der Seite verlangsamen. Viele Themen, die auf den verschiedenen Marktplätzen verfügbar sind, verlassen sich auf jQuery. Nicht jQuery ist dafür gebaut, deferred zu werden, aber leider deferren viele Themen jQuery nicht. 

Also was ist der Hauptvorteil des Deferrens von jQuery, fragen Sie sich vielleicht? Schauen Sie sich dieses Bild unten an. Es zeigt den Unterschied beim HTML-Parsen zwischen normalen, deferred und async Skripten. Wenn jQuery nicht deferred ist, blockiert der Browser das HTML-Parsen, bis das Skript ausgeführt wurde. Wenn jQuery deferred ist, muss der Browser den Parser nicht blockieren. Und das spart Ihnen eine Menge Zeit, besonders wenn es um den Largest Contentful Paint geht. 

Der Grund, warum Theme-Builds jQuery standardmäßig nicht deferren, liegt an Altlasten. Einige Plugins fügen (inline) Skripte hinzu, die von jQuery abhängen. Wenn jQuery deferred lädt, aber das Skript, das jQuery benötigt, nicht deferred ist, wird es einen Konflikt (und einen Fehler) geben

Methode 1: Manuelles Deferren von jQuery

Schritt 1: Identifizieren der jQuery-Einbindung in Ihrem Theme

Um den Optimierungsprozess zu starten, müssen wir genau bestimmen, wo jQuery in Ihrem WordPress-Theme enthalten ist. Üblicherweise im functions.php-File des Themes oder direkt im header.php-File zu finden, suchen Sie nach Zeilen, die so aussehen:

wp_enqueue_script('jquery');    

Wir wissen jetzt, dass das Handle für jQuery 'jquery' heißt. Zu verstehen, wo jQuery enqueued ist, legt den Grundstein für unsere Optimierungsreise.

Schritt 2: Erstellen eines Child Themes für langfristige Stabilität

Bevor Sie Änderungen vornehmen, sollten Sie ein Child Theme erstellen, um Ihre Modifikationen gegen zukünftige Updates zu schützen. Dies stellt sicher, dass Ihre harte Arbeit nicht überschrieben wird, wenn das Eltern-Theme ein Update erhält. Das Erstellen eines Child Themes ist ein bisschen wie das Hinzufügen einer zusätzlichen Rüstungsschicht zur Struktur Ihrer Seite.

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

Lassen Sie uns nun in die technischen Details eintauchen. Fügen Sie im functions.php-File Ihres Child Themes den folgenden Code hinzu und passen Sie ihn an Ihren jQuery-Dateispeicherort und das Handle an. Wir werden die neue Defer-Strategie verwenden

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);

Lassen Sie es uns aufschlüsseln:

• wp_deregister_script('jquery'): Deregistriert das Standard-jQuery-Skript.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
: Registriert jQuery mit der 'defer'-Strategie.
• wp_enqueue_script('jquery'): Stellt das modifizierte jQuery-Skript in die Warteschlange.

Et voila: Sie haben jQuery jetzt erfolgreich auf Ihrer WordPress-Seite deferred. Und als Bonus wissen Sie jetzt, wie Sie jedes Skript deferren können, da der Prozess genau derselbe ist!

Methode 2: verwenden Sie ein Plugin

Plugins wie WP Core Web Vitals machen es super einfach, jQuery zu deferren und viele Plugins können sogar die Komplikationen bewältigen, die daraus entstehen können, indem sie auch Abhängigkeiten deferren und ein paar andere Tricks ausführen, wie das Cachen von jQuery-Events, bis jQuery ausgeführt wurde.

Methode 3: CloudFlare

Ein weiterer super einfacher Weg, jQuery zu deferren, ist die Verwendung von CloudFlare's Rocket Loader. Rocket Loader funktioniert, indem er alle Ihre Skripte während des Seitenladens deaktiviert und sie dann schnell wieder aktiviert. Dieser Trick ahmt Deferring-Skripte nach, hat aber ein paar Nachteile

• CloudFlare Rocket Loader bricht eine Browserfunktion namens Preload Scanner. Mit Rocket Loader werden Skripte nicht vorab geladen und es könnte etwas länger dauern, bis Ihre Skripte heruntergeladen und ausgeführt werden.
• CloudFlare Rocket Loader ist ein ziemlich stumpfes Instrument. Es unterscheidet nicht zwischen wichtigen, weniger wichtigen und Nice-to-have-Skripten. Es deferred einfach alles ohne Rücksicht und lässt Sie ohne Kontrolle über das Skript-Timing.
  

Testen, Testen, Testen!

Nach der Implementierung dieser Änderungen sollten Sie die Funktionalität Ihrer Website gründlich testen. Achten Sie genau auf interaktive Elemente, Animationen und Funktionen, die von jQuery abhängen, um sicherzustellen, dass sie nahtlos funktionieren. Gründliches Testen garantiert, dass die Optimierung nicht versehentlich Schluckauf in Ihrer Benutzeroberfläche verursacht.

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 Inspektor öffnen und zum Konsolen-Tab navigieren. Wenn es Probleme gibt, werden Sie wahrscheinlich Warnungen finden, die ungefähr so aussehen und lauten 'Uncaught ReferenceError: jQuery is not defined'

Sie zu beheben ist nicht so schwer. Neben dem Fehler steht ein Verweis auf den Ursprung des Fehlers. Wenn es (index) ist, stammt es höchstwahrscheinlich von einem Inline-Skript. Wenn es eine andere Datei ist, ist es entweder ein Timing-Problem oder Sie haben vergessen, diese Datei ebenfalls zu deferren.

Abhängige Skripte

Inline-Skripte

$(function(){
 // tu etwas
})

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

Timing-Probleme

Ein weiteres, weniger häufiges Problem stammt vom Timing. Wenn jQuery nicht deferred ist, wird es vor dem  DOMContentLoaded und load Ereignis ausgeführt. Sie können sich darauf verlassen. Wenn es deferred ist, kann ein Skript nach dem DOMContentLoaded Ereignis ausgeführt werden. Das bedeutet, dass, wenn Sie einen Event Handler an das DOMContentLoaded Ereignis angehängt haben, dieser nicht zuverlässig ausgeführt wird. Wenn Sie auf solche Probleme stoßen, versuchen Sie, den Trigger zu ändern oder die Funktion in jQuery() zu wrappen. 

Und wie immer, wenn Sie stecken bleiben, zögern Sie nicht, mich für eine 2-stündige Sitzung zu engagieren!