So verschieben Sie das Parsen von JavaScript in WordPress

Veröffentlicht: 2021-01-01

Unabhängig davon, ob Sie eine WordPress-Website oder eine andere Website betreiben, sollten Sie wissen, dass die Seitengeschwindigkeit ein kritisches Maß für die Leistung Ihrer Website ist.

Wenn Sie eines der Tools zum Testen der Websiteleistung wie GTmetrix oder Google PageSpeed ​​Insights verwenden, wird möglicherweise empfohlen, das Parsen von JavaScript zu verschieben.

Nun, der Ausdruck kann verwirrend sein, aber er spielt eine wichtige Rolle bei der Erhöhung der Ladezeit Ihrer Website.

Was bedeutet also das Defer-Parsing von JavaScript?

Nun, wir werden später ausführlich darüber sprechen. Kurz gesagt, das Defer-Parsing von JavaScript lässt den Browser den Website-Inhalt zuerst laden, ohne darauf zu warten, dass die Skripte den Download abschließen.

Dieser Vorgang ist unerlässlich, da Browser JavaScript rendern und vom Server herunterladen, bevor andere Website-Inhalte geladen werden. Dies beeinträchtigt die Geschwindigkeit Ihrer Website und unterbricht die Ladezeit Ihrer Seite.

Glücklicherweise ist das Verzögern des Parsens von JavaScript der beste Weg, um das Problem zu entschärfen.

Die fünf bewährten Methoden, um das Parsing von JavaScript in WordPress aufzuschieben, habe ich in diesem Artikel erklärt. Aber lassen Sie uns vorher mehr Einblicke in die Bedeutung des Ausdrucks erhalten und wissen, ob Sie das Parsen von Javascript verschieben müssen.

Machen wir uns auf den Weg!

Inhaltsverzeichnis

  • Was meinst du mit Verzögern des Parsens von JavaScript in WordPress?
  • Woher wissen Sie, dass Sie das Parsen von JavaScript verschieben müssen?
  • Async vs. Defer-Attribute
  • Warum müssen Sie das Parsen von JavaScript verschieben?
    • 1. Um das Suchranking zu verbessern:
    • 2. Um die Konversionsrate zu erhöhen:
    • 3. Um eine bessere Benutzererfahrung zu bieten:
  • Fünf verschiedene Methoden zum Verzögern des Parsens von JavaScript in WordPress
    • Methode 1: Verwenden des kostenlosen Async-JavaScript-Plugins
    • Methode 2: Verwenden des WP Rocket-Plugins
    • Methode 3: Verwenden des W3 Total Cache-Plugins
    • Methode 4: Verwendung der von Varvy empfohlenen Methode
    • Methode 5: Verwenden der Datei functions.php
  • Alternative Plugins zum Verzögern des Parsens von JavaScript in WordPress
    • 1. Speed-Booster-Paket:
    • 2. WP Deferred JavaScripts:
  • FAQ (Häufig gestellte Fragen)
    • Was ist das Verzögern des Parsens oder Ladens von JavaScript?
    • Wie kann ich JavaScripts, die das Rendering blockieren, von meiner Website entfernen?
    • Welche anderen Tools kann ich verwenden, um unkritische JavaScripts auf meiner Website zu identifizieren?
    • Kann ich das Parsen von JavaScript in WordPress mit dem Autoptimize-Plugin aufschieben?
  • Fazit

Was meinst du mit Verzögern des Parsens von JavaScript in WordPress?

Bevor Sie die Technik zum Verzögern des JavaScript-Parsings verstehen, sollten Sie wissen, wie ein Webbrowser eine Webseite darstellt.

Wenn Ihr Browser zunächst eine Anfrage an Ihren Webserver sendet, empfängt er die Seite, die in Form eines HTML-Dokuments heruntergeladen wird. Dieses HTML-Dokument enthält Text, Code, der verschiedene DOM-Elemente darstellt, und verschiedene Ressourcen wie Bilder, Stylesheets und Skripts.

Standardmäßig lädt der Browser diese Ressourcen nacheinander herunter. Das Rendern der Webseite wird erst fortgesetzt, nachdem alle Ressourcen heruntergeladen wurden. Außerdem wirken sich die großen Ressourcen negativ auf die Ladezeit Ihrer Webseite aus.

Immer wenn Ihr Browser den Code zum Rendern Ihrer Website durchläuft, stoppt er das Rendern, wenn er JavaScript findet. Der Prozess wird angehalten, bis er die JavaScript-Datei abrufen und analysieren kann. Dies wirkt sich negativ auf die Geschwindigkeit Ihrer Website aus.

Glücklicherweise teilt der Prozess des Aufschiebens des Parsens von JavaScript dem Browser mit, mit dem Herunterladen und Parsen einer JavaScript-Datei zu warten, bis der Hauptinhalt Ihrer Website vollständig geladen ist. Bis zu diesem Punkt können Ihre Besucher mit Ihrer Website interagieren, sodass die Zeit, die zum Herunterladen und Analysieren von JavaScript benötigt wird, nicht länger die Ladezeit Ihrer Website gefährdet.

Woher wissen Sie, dass Sie das Parsen von JavaScript verschieben müssen?

Wie wir bereits gesagt haben, schlagen die Tools zum Testen der Websiteleistung wie GTmetrix, Google PageSpeed ​​Insights oder WP Engine Speed ​​Tool oft vor, dass Sie das Parsen von JavaScript verschieben, wenn sie Ihre Website analysieren.

Insbesondere GTmetrix bietet Ihnen eine Note und listet bestimmte Skripte auf, die zurückgestellt werden müssen, um die Ladegeschwindigkeit Ihrer Seite zu verbessern.

Sie können einfach die URL Ihrer Website eingeben und warten, bis das Tool sie bewertet. Wenn die Bewertung abgeschlossen ist, gehen Sie zur Registerkarte PageSpeed ​​und erweitern Sie den Abschnitt Defer parsing of JavaScript.

Dieser Abschnitt bietet Ihnen eine Liste nicht erforderlicher Skripte, die während des Rendering-Prozesses geladen werden, wie im folgenden Beispiel gezeigt:

Parsing von JavaScript verschieben

Async vs. Defer-Attribute

Es ist wichtig sicherzustellen, dass das Herunterladen eines Skripts die Darstellung der Webseite nicht beeinträchtigt. Dazu gibt es zwei Möglichkeiten:

  • Asynchron
  • Verschieben

Sie können das async -Attribut wie folgt in das script-Tag einfügen:

 <script src= “path/to/script” async> </script>

Dies weist Ihren Browser an, das Skript asynchron zu laden. Genauer gesagt lädt der Browser die Ressource herunter, sobald er sie im Code findet, fährt aber damit fort, den HTML-Code zu analysieren, während die Ressource noch heruntergeladen wird.

Andererseits können Sie das defer -Attribut wie folgt zum script-Tag hinzufügen:

 <script src= “path/to/script” defer> </script>

Dies weist Ihren Browser an, die Ressourcen nicht herunterzuladen, bis das Parsen der Webseite abgeschlossen ist. Sobald das Parsen und Rendern abgeschlossen ist, lädt es die Liste der zurückgestellten Skripts herunter, auf die es zuvor gestoßen ist.

Der Hauptunterschied zwischen async- und defer-Attributen besteht darin, wann die Ressourcen heruntergeladen werden.

Wenn Sie über eine kompakte Webanwendung verfügen, wird empfohlen, dass Sie defer verwenden, um sicherzustellen, dass gegenseitige Abhängigkeiten erfüllt werden. Wenn Sie außerdem nur wenige Skripte im Renderpfad haben, würde es Ihnen nichts ausmachen, einen Unterschied zwischen der Verwendung dieser beiden Attribute zu machen.

Hier ist ein Beispiel zum Verständnis von Async- und Defer-Attributen:

Angenommen, Sie haben zwei Skripte JS1 und JS2.

Die Bedingung ist, dass JS2 im Code nach JS1 erscheint, JS2 eine Abhängigkeit von JS1 hat, aber JS1 größer als JS2 ist.

Wenn Sie jetzt async verwenden, ist es möglich, dass JS2 den Download beendet, bevor JS1 vollständig heruntergeladen ist. Dies führt zu einem Fehler, da JS2 ohne JS1 ausgeführt wird.

Wenn Sie dagegen defer verwenden, werden JS1 und JS2 nacheinander heruntergeladen, um sicherzustellen, dass kein Fehler vorliegt.

Warum müssen Sie das Parsen von JavaScript verschieben?

Wir haben bereits erwähnt, dass die Seitengeschwindigkeit der kritischste Aspekt ist, der die Leistung Ihrer Website beeinflusst oder beeinträchtigt. Da JavaScript-Dateien ziemlich groß sind und länger brauchen, um geladen zu werden, erweist es sich als praktisch, ihre Ausführung für eine Weile zu verzögern, um die Geschwindigkeit Ihrer Website zu erhöhen.

Im Folgenden sind einige der Gründe aufgeführt, warum Sie das Parsen von JavaScript in WordPress verschieben müssen:

1. Um das Suchranking zu verbessern:

Wenn Google oder andere Suchmaschinen Ihre Website für ein Suchmaschinenranking bewerten, nehmen sie die Seitengeschwindigkeit als kritischen Maßstab. Wenn Ihre Website schneller lädt, erscheint sie zwangsläufig auf der ersten Seite der Suchmaschinenergebnisse.

Laut der Studie erwartet 1 von 2 Personen, dass eine Seite in weniger als 2 Sekunden geladen wird. Wenn Ihre Website nicht innerhalb von 2 Sekunden angemessen geladen werden kann, bevorzugt Google Ihren Konkurrenten anstelle von Ihnen. Daher kann es sich negativ auf Ihr Suchranking auswirken.

Daher ist es notwendig, das Parsen von JavaScript zu verschieben, damit die Ladezeit Ihrer Website deutlich erhöht wird.

Wenn Sie nach weiteren Optionen suchen, um Ihre WordPress-Website zu beschleunigen, sehen Sie sich diese 7 On-Page-SEO-Techniken an, die Ihren Suchverkehr verdoppeln werden.

2. Um die Konversionsrate zu erhöhen:

Wenn Ihre Website langsamer lädt, werden Ihre Besucher sie verlassen und nach anderen besseren Optionen suchen. Da Ihre Benutzer häufig nach schnellen und zuverlässigen Informationen auf Ihrer Website suchen, kann eine langsam ladende Seite ein Stimmungskiller sein.

Wenn Sie eine Affiliate-Website betreiben und Produkte über Ihre Website verkaufen, würden Sie in ähnlicher Weise erwarten, dass Ihre Benutzer mehr Maßnahmen ergreifen. Eine langsamere Webseite kann Ihre Besucher jedoch davon abhalten, etwas zu unternehmen.

Die auf HubSpot präsentierte Studie zeigt, dass eine Verzögerung von nur einer Sekunde in der Ladezeit der Website die Konversionsrate um 7 % senkt . Daher ist es wichtig, die Ladezeit Ihrer Website zu erhöhen und die Konversionsrate zu erhöhen.

Die Technik zum Aufschieben des Parsens von JavaScript hilft Ihnen, die Geschwindigkeit Ihrer Website zu steigern und ihre Konversionsrate zu verbessern.

3. Um eine bessere Benutzererfahrung zu bieten:

Klacks! Langsamere Websites schaffen eine schreckliche Benutzererfahrung. Wenn das Laden Ihrer Website länger als gewöhnlich dauert, können Sie damit rechnen, dass Ihre Besucher Ihre Website verlassen, und somit wird die Absprungrate erhöht.

Sie sollten erwägen, das Parsen von JavaScript aufzuschieben, sodass die JS-Dateien erst ausgeführt werden, nachdem der Inhalt Ihrer Webseite geladen wurde. Diese Technik hilft Ihnen, Ihre WordPress-Website zu beschleunigen und Ihren Benutzern ein hervorragendes Erlebnis zu bieten.

Fünf verschiedene Methoden zum Verzögern des Parsens von JavaScript in WordPress

Um das Parsen von JavaScript aufzuschieben, können Sie eine der drei Hauptrouten wählen, darunter:

  • Plugin
  • Varvy-Methode
  • Functions.php-Datei

Unter Verwendung dieser Routen haben wir fünf verschiedene Methoden erstellt, um das Parsen von JavaScript in WordPress zu verschieben.

Methode 1: Verwenden des kostenlosen Async-JavaScript-Plugins

Async JavaScript ist ein kostenloses WordPress-Plug-in, das dabei hilft, Render-Blocking-JavaScript in den Inhalten "above the fold" zu eliminieren.

Das Plugin bietet Ihnen die volle Kontrolle darüber, welche Skripte ein Async- oder Defer-Attribut hinzufügen oder ausschließen sollen, um die Leistung Ihrer WordPress-Website zu steigern. Was Sie sich merken sollten, bevor Sie zwischen async und defer wählen, ist:

  • Async lädt JavaScript herunter, während weiterhin HTML-Dateien analysiert werden, hält dann aber die HTML-Analyse an, um die JavaScript-Dateien auszuführen.
  • Verzögern lädt JavaScript herunter, während HTML-Dateien noch geparst werden, und wartet mit der Ausführung, nachdem das HTML-Parsen abgeschlossen ist.

Hier ist jeder einzelne Schritt, um das Parsen von JavaScript in WordPress mit dem Async-JavaScript-Plugin zu verschieben:

Leiten Sie zunächst von Ihrem WordPress-Dashboard zu Plugins -> Neu hinzufügen um.

Fügen Sie ein neues Plugin aus dem Dashboard hinzu

Suchen Sie nun in der Suchleiste nach dem Async-JavaScript-Plugin und installieren und aktivieren Sie es dann.

Installieren Sie das asynchrone JavaScript-Plugin

Sobald Sie die Installation und Aktivierung des Plugins abgeschlossen haben, gehen Sie zur Seite Einstellungen , um die notwendigen Änderungen vorzunehmen.

Einstellungsoptionen für das Async-JavaScript-Plug-in

Aktivieren Sie nun die Option Asynchrones JavaScript aktivieren und wählen Sie Defer as Async JavaScript Method, wie in der Abbildung unten gezeigt:

asynchrone JavaScript-Plugin-Einstellung

Für erweiterte Optionen können Sie zur Seite herunterscrollen. Hier können Sie die Skripts einschließen, auf die Sie die async- und defer-Tags anwenden möchten, und außerdem eine Liste der auszuschließenden Skripts hinzufügen.

Erweiterte Einstellungen von asynchronem JavaScript

Sie können auch die Plug-ins und Themes auflisten, die Sie von allen Änderungen ausschließen können, die das Async-JavaScript-Plug-in vornimmt.

asynchrones Javascript-Plug-in und Theme-Ausschluss

Wenn Sie die erforderlichen Änderungen vorgenommen haben, scrollen Sie zum Ende der Seite und klicken Sie auf die Schaltfläche Einstellungen speichern .

asynchrone Javascript-Speichereinstellungen

Methode 2: Verwenden des WP Rocket-Plugins

WP Rocket wird als eines der leistungsstärksten WordPress-Caching-Plugins bezeichnet, das das Laden Ihrer Website mit wenigen Klicks beschleunigt. Das Plugin bietet Seiten-Caching, Cache-Vorladen, statische Dateikomprimierung und viele andere coole Funktionen.

Abgesehen davon hilft Ihnen WP Rocket auch dabei, das Parsen von JavaScript auf der Registerkarte Dateioptimierung des WP Rocket-Dashboards zu verschieben.

Nachdem Sie das WP Rocket-Plugin gekauft, installiert und aktiviert haben, leiten Sie zur Option Einstellungen weiter und klicken Sie im Menü auf die Registerkarte Dateioptimierung , um zu beginnen.

wp rocket plugin Dateioptimierung
Dieses Bild zeigt die Optimierung der WP-Raketendatei.

Scrollen Sie danach nach unten zum Abschnitt JavaScript-Dateien, aktivieren Sie die Option Load JavaScript deferred und aktivieren Sie den abgesicherten Modus für jQuery .

wp-Raketen-Javascript-Dateien

Wenn Sie den gesamten Vorgang abgeschlossen haben, scrollen Sie zum Ende der Seite und klicken Sie auf die Schaltfläche Änderungen speichern .

Speichern Sie die Änderungen in wrocket

Methode 3: Verwenden des W3 Total Cache-Plugins

W3 Total Cache ist ein weiteres wichtiges WordPress-Plugin, das die SEO und die Benutzererfahrung Ihrer Website verbessert. Es steigert die Leistung Ihrer Website und verkürzt die Ladezeit durch die Nutzung der Content Delivery Network (CDN)-Integration.

W3 Total Cache ist kostenlos und sehr effektiv. Sie können dieses Plugin verwenden, um das Parsen von JavaScript auf Ihrer WordPress-Website zu verschieben.

Hier ist jeder Schritt, um das Parsen von JavaScript in WordPress mit dem W3 Total Cache-Plugin zu verschieben:

Leiten Sie zunächst von Ihrem WordPress-Dashboard zu Plugins -> Neu hinzufügen um.

Fügen Sie ein neues Plugin aus dem Dashboard hinzu

Suchen Sie nun in der Suchleiste nach dem W3 Total Cache-Plugin und installieren und aktivieren Sie es dann.

Installieren Sie das W3 Total Cache-Plugin

Sobald Sie die Installation und Aktivierung des Plugins abgeschlossen haben, gehen Sie in der linken Seitenleiste von WordPress zu Leistung -> Allgemeine Einstellungen , um die erforderlichen Änderungen vorzunehmen.

Allgemeine Einstellung des W3 Total Cache Plugins

Scrollen Sie danach nach unten zum Abschnitt Minimieren und aktivieren Sie die Option Aktivieren. Wählen Sie außerdem die Option Manuell aus dem Minimierungsmodus und klicken Sie auf die Schaltfläche Alle Einstellungen speichern , um fortzufahren.

Code minimieren

Wechseln Sie nun von der linken Seitenleiste zur Registerkarte Leistung -> Minimieren und scrollen Sie nach unten zur JS -Überschrift, wo Sie den Abschnitt Operationen in Bereichen mit zwei HTML-Tags sehen können.

Einstellungsoptionen minimieren

Wählen Sie Non-blocking mit der Option „defer“ im Typ „Embed“ des Before </head> -Tags aus.

JS-Minify-Einstellung
Dieses Bild zeigt die Einstellung von JS minigy

Im selben Abschnitt sehen Sie die Überschrift JS-Dateiverwaltung, in der Sie Ihr aktives WordPress-Design auswählen und auf die Schaltfläche Skript hinzufügen klicken müssen, um den URI von JavaScript einzufügen, den Sie analysieren möchten.

Sie können beliebig viele URIs hinzufügen, indem Sie auf die Schaltfläche Skript hinzufügen klicken.

w3 Total Cache JS-Dateiverwaltung

Wenn Sie die Änderungen abgeschlossen haben, klicken Sie auf die Schaltfläche Save Setting & Purge Caches , um fortzufahren.

Scrollen Sie danach nach unten zum CSS -Abschnitt. Sie können dann unter der Überschrift CSS-Dateiverwaltung auf die Schaltfläche Stylesheet hinzufügen klicken, um CSS-Stylesheet-URIs einzufügen. Sie können mehr als einen hinzufügen, basierend auf den Vorschlägen, die von Online-Geschwindigkeitsüberwachungstools bereitgestellt werden.

CSS-Dateiverwaltung

Wenn Sie die Änderungen abgeschlossen haben, klicken Sie auf die Schaltfläche Save Setting & Purge Caches , um fortzufahren.

Methode 4: Verwendung der von Varvy empfohlenen Methode

Eine andere Methode, die von Patrick Sexton von Varvy empfohlen wird, verwendet ein Skript, um eine externe JavaScript-Datei aufzurufen, sobald das anfängliche Laden der Seite abgeschlossen ist. Das bedeutet, dass der Browser kein JavaScript herunterlädt oder ausführt, bis die Webseite vollständig geladen ist.

Sie können diese Methode verwenden, indem Sie das von Varvy bereitgestellte Code-Snippet optimieren und dann das Skript direkt vor dem schließenden </body> -Tag zu Ihrer Designdatei hinzufügen.

Hier ist der Code, den Sie in den Hauptteil Ihres Designs einfügen müssen, um das Parsen von JavaScript in WordPress zu verschieben:

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Hinweis: Stellen Sie sicher, dass Sie defer.js in den Namen Ihrer externen JavaScript-Datei ändern. Danach kannst du den wp_footer-Hook verwenden, um den Code über die Datei functions.php deines untergeordneten Designs einzufügen.

Mit diesem Ansatz können Sie Varvys Code wie folgt umschließen:

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

Hier ist jeder Schritt dieser Methode mit klaren Bildern erklärt:

Melden Sie sich bei Ihrem WordPress-Dashboard an und navigieren Sie zu Appearance -> Theme Editor

Theme-Editor-Einstellung

Klicken Sie nun auf die Datei header.php auf der rechten Seite des Bildschirms und fügen Sie dann den oben genannten Code ein, bevor Sie </body tag> schließen.

Header.php-Datei

Klicken Sie danach auf die Schaltfläche Datei aktualisieren.

Header.php-Datei aktualisieren

Methode 5: Verwenden der Datei functions.php

Wenn Sie eine Vorstellung von der WordPress-Entwicklung haben, sollten Sie damit vertraut sein, dass Sie Skripte nicht direkt über das HTML-Markup hinzufügen sollten. Stattdessen müssen Sie integrierte WordPress-Funktionen verwenden, um Ressourcen anzufordern und bei Bedarf auch Ihre Website zu sichern.

Sie können das defer-Attribut für Ihre Javascript-Dateien verwenden, indem Sie das Code-Snippet zu Ihrer Datei functions.php hinzufügen.
Dazu müssen Sie von Ihrem WordPress-Dashboard zum Theme Editor gehen. Klicken Sie danach auf functions.php und fügen Sie den folgenden Code hinzu:

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Dieses Snippet weist WordPress an, das Attribut defer zu allen Ihren JavaScript-Dateien außer JQuery hinzuzufügen.
Sie können auch einfach den folgenden Code hinzufügen, um async- oder defer-Attribute zu Ihren JavaScript-Dateien über die Datei functions.php zu verwenden:

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Vergessen Sie nicht, dass Sie jedes Skript in die Warteschlange einreihen müssen, damit WordPress darauf zugreifen kann, bevor Sie die async- und defer-Attribute zu den Skript-Tags hinzufügen. Hier ist der Code dafür:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Wenn Sie mit dem Hinzufügen von Code zur Datei functions.php fertig sind, klicken Sie auf die Schaltfläche Datei aktualisieren.

Hier ist jeder einzelne Schritt dieser Methode mit klaren Bildern erklärt:

Melden Sie sich bei Ihrem WordPress-Dashboard an und navigieren Sie zu Appearance -> Theme Editor

Theme-Editor-Einstellung

Klicken Sie nun auf die Datei functions.php auf der rechten Seite des Bildschirms. Sie können dann den oben genannten Code einfügen und auf die Schaltfläche Datei aktualisieren klicken, um die erforderlichen Änderungen zu speichern.

So finden und aktualisieren Sie die functions-php

Alternative Plugins zum Verzögern des Parsens von JavaScript in WordPress

Wenn Sie nach anderen Optionen als Async JavaScript und WP Rocket-Plugins suchen, um das Parsen von JavaScript in WordPress zu verschieben, haben Sie viele davon. Einige von ihnen beinhalten:

1. Speed-Booster-Paket:

Dies ist ein kostenloses WordPress-Plugin mit einer benutzerfreundlichen Oberfläche, das Sie bei der JavaScript-Optimierung und vielen anderen Techniken zur Geschwindigkeitsoptimierung unterstützt.

Vorteile des Speed ​​Booster Packs:

  • Sehr einfach und leicht zu bedienen und kommt mit einer interaktiven Benutzeroberfläche
  • Hilft bei der JavaScript-Optimierung, CSS-Optimierung, verzögertem Laden und der Integration von Content Delivery Network (CDN).
  • Regelmäßig aktualisiert für außergewöhnliche Leistung und Fehlerverbesserungen

Nachteile des Speed ​​Booster Packs:

  • Es besteht das Risiko, dass die Aktivierung dieses Plugins oder einer seiner Funktionen mit anderen Plugins auf Ihrer Website in Konflikt gerät

2. WP Deferred JavaScripts:

Dieses WordPress-Plugin verzögert das Laden aller JavaScripts, die über wp_enqueue_script() hinzugefügt wurden, unter Verwendung von LABJS. Das Ergebnis ist die richtige Optimierung der Ladezeit.

Vorteile von WP Deferred JavaScripts:

  • Sehr einfach zu bedienen und ist eine der beliebtesten Lösungen auf dem Markt
  • Explizit entwickelt, um das Parsen von JavaScript in WordPress aufzuschieben, nicht nur als Zusatzfunktion

Nachteile von WP Deferred JavaScripts:

  • Seltene Updates und möglicherweise inkompatibel mit den neueren Versionen von WordPress
  • Kann dazu führen, dass andere Plugins auf Ihrer Website kaputt gehen

FAQ (Häufig gestellte Fragen)

Was ist das Verzögern des Parsens oder Ladens von JavaScript?

Das Verzögern des Parsens oder Ladens von JavaScript bedeutet, dass die JavaScript-Dateien erst geladen werden, nachdem der Inhalt Ihrer Website geladen wurde. Dies bedeutet, dass es nicht am Laden der Seite oder des kritischen Rendering-Pfads beteiligt ist.

Wenn Sie das Parsen von JavaScript zurückstellen, wartet Ihre Website nicht, bis JavaScript geladen ist, um Ihren Besuchern Ihre Inhalte anzuzeigen. Die Website zeigt zunächst Inhalte an, dann werden nur CSS- und JavaScript-Dateien geladen.

Wie kann ich JavaScripts, die das Rendering blockieren, von meiner Website entfernen?

Der nützlichste Ansatz zum Entfernen unnötiger JavaScripts besteht darin, das Parsen vor anderen Website-Elementen zu verschieben. Sie können eine andere Strategie anwenden, indem Sie unnötige JS-Skripte minimieren, die Ihrer Website einen Mehrwert verleihen. Wir empfehlen außerdem, dass Sie versuchen, sowohl die JavaScripts als auch die CSS miteinander zu verketten.

Welche anderen Tools kann ich verwenden, um unkritische JavaScripts auf meiner Website zu identifizieren?

Nun, es gibt viele andere Online-Tools als GTmetrix, um festzustellen, welche JavaScripts kritisch sind oder nicht. Einige von ihnen sind wie folgt:

1. Google PageSpeed-Insights:

Mit diesem PageSpeed ​​Insights-Tool von Google können Sie feststellen, was Ihrer Website in Bezug auf Geschwindigkeit und Leistung fehlt. Die Tools bieten einige wertvolle Vorschläge, welche Schritte Sie unternehmen müssen, um die Ladezeit Ihrer Website mit detaillierten Einblicken zu verbessern.

Es zeigt die Punktzahl Ihrer Website mit verschiedenen Farbcodes an: Rot für niedrig, Orange für durchschnittlich und Grün für gut. Ebenso zeigt das Tool die URL von JS-Skripten mit ihrer Übertragungsgröße und potenziellen Einsparungen an. Sie können dann den Anweisungen folgen und alle unkritischen JS/Stile zurückstellen.

2. Pingdom-Website-Geschwindigkeitstest:

Pingdom Website Speed ​​Test ist ein weiteres beliebtes Tool, das beim Verfolgen, Überwachen und Testen von Websites hilft. Mit diesem Tool können Sie aus sieben verschiedenen Testserverstandorten weltweit auswählen, um die Leistung Ihrer Website zu analysieren.

Das Tool bietet auch eine Liste mit Empfehlungen, ähnlich wie andere Tools zum Testen von Websites. Sie können nach unten scrollen und die Vorschläge im Abschnitt „Seitenleistung verbessern“ beachten. Wir empfehlen Ihnen, für eine bessere Leistung „JavaScript unten platzieren“ zu wählen.

Das Zurückstellen dieser JavaScript-Codes ist jedoch die einfachste und effektivste Methode, um zu verhindern, dass JS-Skripte Ihre WordPress-Website verlangsamen.

Kann ich das Parsen von JavaScript in WordPress mit dem Autoptimize-Plugin aufschieben?

Ja, du kannst! Autoptimize ist ein nützliches Plugin, das Ihnen hilft, das Parsen von JavaScript zu verschieben. Um den Vorgang durchzuführen, installieren und aktivieren Sie einfach das Plugin auf der Registerkarte Plugins in Ihrem WordPress-Dashboard und befolgen Sie diese Anweisungen:

Sobald Sie das Autoptimize-Plug-in installiert und aktiviert haben, gehen Sie zur Seite Einstellungen und wählen Sie die Option JS, CSS & HTML oben auf der Seite.

Aktivieren Sie nun die Option JavaScript-Code optimieren , und Sie werden dann andere Optionen freischalten, wie im Bild unten gezeigt. Aktivieren Sie einfach die Option JS-Dateien aggregieren und lassen Sie andere unverändert.

Darüber hinaus können Sie mit dem Plugin JavaScripts ausschließen, für die Sie die Nicht-Rendering-Blockierungsfunktion nicht hinzufügen möchten.

Wenn Sie die erforderlichen Änderungen vorgenommen haben, scrollen Sie zum Ende der Seite und klicken Sie auf die Schaltfläche Änderungen speichern .

Fazit

Es ist sehr wichtig, das Parsen von JavaScript in WordPress zu verschieben, um die Geschwindigkeit und Leistung Ihrer Website zu verbessern. Wir hoffen, dass Sie diesen Artikel aufschlussreich finden, da wir die verschiedenen Möglichkeiten zur Durchführung dieser Technik vorgestellt haben, bei der Plugins verwendet und selbst Codes zu den Designdateien hinzugefügt werden.

Falls Sie Schwierigkeiten haben, Codes zu den Designdateien hinzuzufügen, empfehlen wir Ihnen dringend, die oben genannten Plugins zu verwenden, um das Parsen von JavaScript zu verschieben. Plugins sind einfach zu verwenden und Sie können den gesamten Vorgang mit wenigen Klicks abschließen.

Stellen Sie nach Abschluss des Vorgangs sicher, dass Sie Ihre Website durch die Tools zum Testen der Websiteleistung wie GTmetrix laufen lassen, um sicherzustellen, dass Ihre Website so viele Skripte wie möglich zurückstellt.

Haben Sie Bedenken und Fragen dazu, wie Sie das Parsen von JavaScript in WordPress verschieben können? Schießen Sie sie im Kommentarbereich unten ab!