Hast du deine WordPress-Seite durch ein Leistungstest-Tool laufen lassen, nur um eine Anweisung zum Aufschieben des Parsing von JavaScript in WordPress zu erhalten?
Die Implementierung dieser Änderung kann sich positiv auf die Seitenladezeiten deiner Website auswirken, insbesondere für mobile Besucher. Aber die Warnung kann ein wenig schwer zu verstehen sein, weshalb wir dir genau erklären werden, was es bedeutet, das Parsen von JavaScript zu verschieben und wie du diese Änderung auf deiner WordPress-Website umsetzen kannst.
Hier ist, was du in diesem Artikel lernen wirst:
Wenn du nur direkt zum Tutorial springen möchtest, kannst du auf den letzten Link in der Liste oben klicken.
Was bedeutet es, das Parsen von JavaScript in WordPress zu verschieben?
Wenn du jemals deine WordPress-Seite durch Google PageSpeed Insights, GTmetrix oder andere Tools zum Testen der Seitengeschwindigkeit ausgeführt hast, bist du wahrscheinlich auf den Vorschlag gestoßen, das Parsen von JavaScript zu verschieben.
Aber…. was bedeutet das eigentlich? Und warum ist es eine wichtige Leistungsbetrachtung?
Grundsätzlich, wenn jemand deine WordPress-Seite besucht, liefert der Server deiner Seite die HTML-Inhalte deiner Website an den Browser dieses Besuchers.
Der Browser des Besuchers beginnt dann oben und geht durch den Code, um deine Seite darzustellen. Wenn es beim Wechsel von oben nach unten JavaScript findet, stoppt es das Rendern des Restes der Seite, bis es die JavaScript-Datei holen und analysieren kann.
Es wird dies für jedes gefundene Skript tun, was sich negativ auf die Ladezeiten deiner Seite auswirken kann, da der Besucher auf einen leeren Bildschirm starren muss, während sein Browser das gesamte JavaScript herunterlädt und analysiert.
Wenn ein bestimmtes Skript für die Kernfunktion deiner Website nicht notwendig ist (zumindest beim Laden der ersten Seite), willst du nicht, dass es dem Laden wichtigerer Teile deiner Website im Weg steht, weshalb diese Tools zum Testen der Seitengeschwindigkeit dir immer sagen, dass du das Parsen von JavaScript verschieben sollst.
Was bedeutet es also, das Parsen von JavaScript zu verschieben?
Im Wesentlichen wird deine Website den Browsern der Besucher sagen, dass sie mit dem Herunterladen und/oder Parsen von JavaScript warten müssen, bis der Hauptinhalt deiner Website bereits fertig geladen ist. Zu diesem Zeitpunkt können Besucher deine Seite bereits sehen und mit ihr interagieren, so dass die Wartezeiten für das Herunterladen und Analysieren, dass JavaScript keine so negativen Auswirkungen mehr hat.
Indem du die Ladezeiten deiner Inhalte above the fold hinaus beschleunigst, machst du Google glücklich und schaffst ein besseres, schnelleres Erlebnis für deine Besucher.
Wie man feststellt ob man das Parsen von Java Script verzögern muss
Um zu testen, ob deine WordPress-Seite das Parsen von JavaScript verzögern muss, kannst du deine Website über GTmetrix ausführen.
GTmetrix gibt dir eine Note und listet auch bestimmte Skripte auf, die verschoben werden müssen:
Die verschiedenen Methoden zum Aufschieben des Parsing von JavaScript
Es gibt einige verschiedene Möglichkeiten, das Parsen von JavaScript zu verzögern. Erstens gibt es zwei Attribute, die du deinen Skripten hinzufügen kannst:
- Async
- Defer
Mit beiden Attributen können Browser von Besuchern JavaScript herunterladen, ohne das HTML-Parsing anzuhalten. Der Unterschied besteht jedoch darin, dass async das HTML-Parsing nicht pausiert, um das Skript zu holen (wie es das Standardverhalten tun würde), sondern den HTML-Parser pausiert, um das Skript auszuführen, sobald es abgerufen wurde.
Mit defer laden die Browser der Besucher die Skripte weiterhin herunter, während sie das HTML analysieren, aber sie warten mit dem Parsen des Skripts, bis das HTML-Parsing abgeschlossen ist.
Diese Grafik von Growing with the Web macht es sehr gut, den Unterschied zu erklären:
Eine weitere Option, die von Patrick Sexton von Varvy empfohlen wird, verwendet ein Skript, um eine externe JavaScript-Datei erst dann aufzurufen, wenn das Laden der ersten Seite abgeschlossen ist. Das bedeutet, dass die Browser der Besucher kein JavaScript herunterladen oder ausführen, bis das Laden der ersten Seite abgeschlossen ist.
Schließlich ist ein weiterer Ansatz, den du sehen wirst, dein JavaScript einfach an den unteren Rand der Seite zu verschieben. Diese Methode ist jedoch keine gute Lösung, da, obwohl deine Seite früher sichtbar ist, die Browser der Besucher die Seite immer noch als geladen anzeigen, bis alle Skripte fertig sind. Dies könnte einige Besucher davon abhalten, mit deiner Seite zu interagieren, weil sie denken, dass der Inhalt nicht vollständig geladen ist.
Wie man das Parsen von JavaScript in WordPress verzögert (4 Methoden)
Um das Parsen von JavaScript in WordPress zu verzögern, gibt es drei Hauptwege, die du nehmen kannst:
- Plugin – es gibt einige großartige kostenlose und erstklassige WordPress-Plugins, um das JavaScript-Parsing zu verschieben. Wir zeigen dir, wie du das mit zwei beliebten Plugins machst.
- Varvy-Methode – wenn du technisch versiert bist, kannst du den Code deiner Website direkt bearbeiten und den Code-Ausschnitt von Varvy verwenden.
- php Datei – Du kannst einen Code-Ausschnitt zu der Datei functions.php deines Child Themes hinzufügen, um Skripte automatisch zu verschieben.
Du kannst oben klicken, um direkt zu deiner bevorzugten Methode zu gelangen oder alle Techniken durchzulesen, um diejenige zu finden, die für dich am besten ist.
1. Kostenloses Async JavaScript Plugin
Async JavaScript ist ein kostenloses WordPress-Plugin von Frank Goossens, dem gleichen Kerl hinter dem beliebten Autoptimize-Plugin.
Es gibt dir eine einfache Möglichkeit, das Parsen von JavaScript entweder asynchron oder verzögert zu parsen.
Zu Beginn kannst du das kostenlose Plugin von WordPress.org installieren und aktivieren. Gehe dann zu Einstellungen → Async JavaScript, um das Plugin zu konfigurieren.
Oben kannst du die Funktionalität des Plugins aktivieren und zwischen Async und Defer wählen. Denkt daran:
- Async lädt JavaScript herunter, während es noch HTML analysiert, pausiert aber dann das HTML-Parsing, um das JavaScript auszuführen.
- Defer lädt JavaScript herunter, während er noch HTML analysiert, und wartet darauf, es auszuführen, bis das HTML-Parsing beendet ist.
Weiter unten kannst du auch wählen, wie du mit jQuery umgehen möchtest. Viele Themes und Plugins hängen stark von jQuery ab, wenn du also versuchst, das Parsen der jQuery-Skripte zu verschieben, könntest du einige der Kernfunktionen deiner Website durchbrechen. Der sicherste Ansatz ist es, jQuery auszuschließen, aber du kannst damit experimentieren, es zu verschieben. Stelle einfach sicher, dass du deine Website gründlich testen kannst.
Weiter unten kannst du auch manuell bestimmte Skripte ein- oder ausschließen, einschließlich einer netten benutzerfreundlichen Funktion, mit der du bestimmte Themes oder Plugins, die auf deiner Website aktiv sind, auswählen kannst:
2. Use the WP Rocket Plugin
Obwohl wir die meisten Caching-Plugins bei Kinsta nicht zulassen, erlauben wir das WP Rocket-Plugin, da es eine integrierte Integration beinhaltet, um mit dem Caching auf Serverebene von Kinsta gut zu funktionieren.
Zusätzlich zu einer Reihe anderer Techniken zur Leistungsoptimierung kann WP Rocket dir helfen, das Parsen von JavaScript auf der Registerkarte Dateioptimierung des WP Rocket Dashboards zu verschieben. Suche im Abschnitt JavaScript-Dateien nach der Option Load JavaScript deferred.
Wie das Async JavaScript-Plugin lässt dich WP Rocket auch jQuery ausschließen, um Probleme mit dem Inhalt deiner Website zu vermeiden:
3. Verwende die von Varvy empfohlene Methode (Code).
Früher erwähnten wir, dass Patrick Sexton von Varvy empfiehlt, ein Codeausschnitt zu verwenden, der darauf wartet, dass JavaScript heruntergeladen und ausgeführt wird, bis deine Website ihren anfänglichen Seitenaufbau abgeschlossen hat.
Du kannst diese Methode implementieren, indem du den Codeausschnitt, den Varvy liefert, optimierst und das Skript dann unmittelbar vor dem Schließen des </body>-Tags zu deinem Thema hinzufügst.
Hier ist der Code von Varvy:
<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>Achte darauf, „defer.js“ durch den tatsächlichen Dateinamen/Pfad der JavaScript-Datei zu ersetzen, die du verschieben möchtest. Dann kannst du den wp_footer-Hook verwenden, um den Code über die Datei functions.php deines Child-Themes zu injizieren.
Mit diesem Ansatz würdest du Varvys Code in so etwas wie dieses wickeln:
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 );Im Wesentlichen weist dieses Snippet WordPress an, das defer-Attribut zu allen deinen JavaScript-Dateien außer jQuery hinzuzufügen.
Es ist schnell und einfach, aber es gibt dir nicht die granulare Kontrolle, die so etwas wie das Async JavaScript Plugin bietet.
Zusammenfassung
Die Verzögerung des Parsing von JavaScript auf deiner WordPress-Seite ist ein wichtiger Leistungsaspekt.
Sobald du eine der oben genannten Methoden benutzt hast, um das Parsen von JavaScript in WordPress zu verschieben, empfehlen wir dir, zwei Dinge zu tun:
- Teste deine Website, um sicherzustellen, dass das Verschieben bestimmter Skripte nichts above the fold beschädigt hat. Auch dies kann bei jQuery häufig vorkommen, weshalb viele Tools Sie jQuery.js ausschließen können. Es kann jedoch auch bei anderen Skripten vorkommen.
- Lasse deine Seite erneut durch GTmetrix laufen, um sicherzustellen, dass deine Seite so viele Skripte wie möglich verschiebt (du bekommst vielleicht keine perfekte Bewertung, wenn du jQuery ausschließt – aber deine Bewertung sollte besser sein).
Hast du Fragen dazu, wie du das Parsen von JavaScript in WordPress verschieben kannst? Frage in den Kommentaren!
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar