Ein kritischer Maßstab für die Leistung Ihrer Website ist die Seitengeschwindigkeit. Die Seitengeschwindigkeit ist die Zeit, die ein Browser zum Rendern einer Website benötigt. Schnellere Ladezeiten sorgen dafür, dass ein größerer Anteil Ihrer Besucher beim Laden auf Ihrer Website bleibt. Die Seitengeschwindigkeit bestimmt auch teilweise den Rang Ihrer Website in den Suchmaschinenergebnissen. Daher steht die Beschleunigung einer WordPress-Website oft ganz oben auf der Wunschliste eines Website-Betreibers.
In diesem Tutorial besprechen wir die Verzögerung des Parsens von JavaScript während des Ladens von Webseiten – eine Schlüsseltechnik, um Eigengewicht von Ihrer Website zu entfernen.
Die Seitengeschwindigkeit ist ein wichtiger Teil der Benutzererfahrung, der von vielen Dingen abhängt. In diesem Artikel wird davon ausgegangen, dass Sie einen zugrunde liegenden Faktor überprüft haben – das Betreiben Ihrer Website auf einem ausreichend schnellen WordPress-Host.
Warum das Parsen von JavaScript aufschieben?
Um die Technik des verzögerten Parsens von JavaScript zu verstehen, gehen wir einen Schritt zurück und analysieren, wie ein Webbrowser eine Seite rendert. Wenn Ihr Browser eine Anfrage an Ihren Webserver sendet, wird die vom Server zurückgesendete Seite in Form eines HTML-Dokuments heruntergeladen. Dieses HTML-Dokument enthält Text, Code, der verschiedene DOM-Elemente rendert, und Ressourcen wie Bilder, Stylesheets und Skripte.
Der Browser liest dieses HTML-Markup zeilenweise. Außerdem müssen die auf der Seite vorhandenen Ressourcen heruntergeladen werden. Standardmäßig lädt der Browser diese Ressourcen sequentiell herunter, wenn er sie im Dokument findet. Das Rendern der Webseite wird erst fortgesetzt, nachdem eine Ressource heruntergeladen wurde.
Große Ressourcen wirken sich nachteilig auf die Seitenladezeit aus. Da Bilder einen erheblichen Teil der Seitengröße ausmachen, wird empfohlen, Bilder für Ihre WordPress-Site zu optimieren. Bei JavaScript-Dateien müssen Sie ermitteln, welche Skripte zum korrekten Rendern Ihrer Seite erforderlich sind. Sie können den Download nicht unbedingt erforderlicher Skripte zurückstellen, um Ihre Webseite zu beschleunigen.
Im nächsten Abschnitt sehen wir uns Möglichkeiten an, um zu ermitteln, welche Skripts zum Rendern Ihrer Seite erforderlich sind.
Welche Skripte sollen verschoben werden?
Für eine relativ kleine Website, die nur minimales JavaScript verwendet, sind möglicherweise keine Skripts zum Laden der Seite erforderlich. Wenn Sie jedoch eine komplexere Website verwalten, kann eine sorgfältige Analyse aller Skripte auf Ihrer Website erkennen, welche Skripte für das Laden von Seiten unerlässlich sind.
Eine Möglichkeit, diese Analyse durchzuführen, besteht darin, Skripts nacheinander zu entfernen und zu prüfen, ob beim Laden der Seite Fehler in der JavaScript-Konsole auftreten. Dieser Vorgang erfordert jedoch erhebliche Kenntnisse in JavaScript und Webtechnologien.
Eine einfachere Methode, um zu beurteilen, welche Skripte für das Laden Ihrer Seite entscheidend sind, ist die Verwendung eines Geschwindigkeitstest-Tools wie GTmetrix. Geben Sie die URL Ihrer Website ein und warten Sie, bis das Tool sie bewertet. Gehen Sie auf der Ergebnisseite zum PageSpeed-Tab und erweitern Sie den Abschnitt „Verzögern des Parsens von JavaScript“. Dieser Abschnitt zeigt Ihnen eine Liste nicht wesentlicher Skripte, die während des Rendervorgangs geladen werden.
Async vs. Defer-Attribute
Es gibt zwei Möglichkeiten, um sicherzustellen, dass das Herunterladen eines Skripts das Rendern einer Webseite nicht beeinträchtigt.
Zuerst können Sie ein . hinzufügen async
dem zuschreiben script
Schild. Dies weist den Browser an, das Skript asynchron zu laden. Mit anderen Worten, der Browser beginnt mit dem Herunterladen der Ressource, sobald er im Code auf sie stößt, setzt jedoch das Parsen des HTML-Codes fort, während die Ressource noch heruntergeladen wird. Die Probe script
Tag unten zeigt, wie man das hinzufügt async
Attribut:
<script src="https://athemes.com/tutorials/defer-parsing-of-javascript-in-wordpress/path/to/script" async></script>
Zweitens können Sie a . hinzufügen defer
dem zuschreiben script
Schild. Dadurch wird der Browser angewiesen, die Ressource erst herunterzuladen, wenn das Parsen der Seite abgeschlossen ist. Sobald das Parsen und Rendern abgeschlossen ist, lädt der Browser die Liste der zurückgestellten Skripts herunter, auf die er zuvor gestoßen ist. Die Probe script
Tag unten zeigt, wie man das hinzufügt defer
Attribut zu einer HTML-Seite:
<script src="https://athemes.com/tutorials/defer-parsing-of-javascript-in-wordpress/path/to/script" defer></script>
Der Hauptunterschied zwischen den defer
und async
Attribute ist, wann die Ressource heruntergeladen wird.
Angenommen, Sie haben zwei Skripte: A und B. B erscheint im Code nach A, B hat eine Abhängigkeit von A, aber A ist deutlich größer als B.
Wenn du benutzt async
, kann es sein, dass B das Herunterladen beendet, bevor A vollständig heruntergeladen wurde. Dies führt zu einem Fehler, da B in Abwesenheit von A ausgeführt wird.
Wenn Sie jedoch verwenden defer
, A und B werden am Ende sequentiell heruntergeladen, was nicht zu einem Fehler führt.
Wenn Sie nur wenige Skripte im Rendering-Pfad haben, würden Sie keinen Unterschied zwischen der Verwendung von async
und defer
. Wenn Sie jedoch eine komplexe Webanwendung haben, kann es eine gute Idee sein, zu verwenden defer
um sicherzustellen, dass Interdependenzen befriedigt werden.
Lassen Sie uns nun die Möglichkeiten besprechen, den Download von Skripten in WordPress zu verschieben.
Verzögern Sie das Parsen von JavaScript in WordPress
1. Bearbeiten Sie die Datei functions.php
Wenn Sie in der WordPress-Entwicklung gearbeitet haben, wissen Sie, dass es nicht empfohlen wird, Skripte direkt über das HTML-Markup hinzuzufügen. Stattdessen sollten Sie integrierte WordPress-Funktionen um Ressourcen anzufordern.
Wenn Sie also eine hinzufügen möchten async
oder defer
Attribut zu einem deiner Skripte hinzufügen, solltest du die folgende Funktion zu deinem Theme hinzufügen Funktionen.php Datei:
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; }
Vergiss das nicht, bevor du das hinzufügst defer
und async
Attribute für die Skript-Tags müssen Sie auch jedes Skript in die Warteschlange stellen, damit WordPress darauf zugreifen kann:
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'); }
2. Verwenden Sie ein Plugin
Bearbeiten des Quellcodes durch die Funktionen.php Datei ist möglicherweise nicht für alle ideal. Wenn Sie nicht technisch versiert sind, können Sie einfach ein Plugin verwenden, um das Parsen von JavaScript in Ihrer WordPress-Site zu verschieben.
Asynchrones JavaScript
Asynchrones JavaScript ist ein kostenloses Plugin, das Sie herunterladen und auf Ihrer WordPress-Site installieren können, um diese Aufgabe auszuführen.
Um die Funktion zu aktivieren, markieren Sie das Aktivieren Sie asynchrones JavaScript Option im Einstellungsbereich des Plugins. Scrollen Sie dann nach unten zum Asynchrone JavaScript-Methode Abschnitt und wählen Sie aus, ob Sie die async- oder defer-Methode verwenden möchten.
Für erweiterte Optionen scrollen Sie auf der Seite nach unten. Hier können Sie die Skripte auflisten, die Sie anwenden möchten async
und defer
Tags zu. Als Nächstes können Sie auch eine Liste mit auszuschließenden Skripten hinzufügen. Sie können auch die Plugins und Themes auflisten, die von Änderungen durch dieses Plugin ausgeschlossen werden sollen.
Autooptimieren
Die Option zum Zurückstellen des Parsens Ihrer Skripte ist auch als Teil des Programms verfügbar Autooptimieren Plugin, das vom gleichen Autor wie Async JavaScript erstellt wurde.
Überprüfen Sie auf der Einstellungsseite des Plugins das JavaScript-Code optimieren Option und Ihre nicht wesentlichen Skripte werden zurückgestellt und in die Fußzeile verschoben. In dem Extra Registerkarte können Sie auch die Skripte auflisten, die Sie hinzufügen möchten async
zuschreiben.
Einpacken
In diesem Tutorial haben wir zuerst die Bedeutung der Seitengeschwindigkeit und die Funktionsweise des Renderings von JavaScript besprochen. Anschließend haben wir die Gründe untersucht, warum Sie das Parsen von JavaScript zurückstellen sollten.
Schließlich haben wir uns zwei Optionen angesehen, mit denen Sie dies in WordPress erreichen können. Sie können entweder die bearbeiten Funktionen.php Datei zum Hinzufügen der async
oder defer
Attribute zu deinem script
Tags oder verwenden Sie ein Plugin wie Asynchrones JavaScript oder Autooptimieren um Ihre Skripte zu optimieren.
Haben Sie Fragen zum Verzögern des Parsens von JavaScript in WordPress? Wenn ja, fragen Sie gerne unten in den Kommentaren nach.