Page Speed ist einer der wichtigsten Aspekte Ihrer Website. Egal wie viel Ihre Website zu bieten hat, niemand wartet gerne minutenlang, bevor Ihre Website geladen wird. Gleichzeitig ist es wahrscheinlicher, dass Ihre Website Besucher hält, wenn sie schneller lädt.
Außerdem trägt Page Speed auch zum Rang Ihrer Website in Suchmaschinen bei. Es hilft den Crawlern zu verstehen, wie effektiv und gepflegt Ihre Website ist. In diesem Tutorial werden wir sehen, wie man das Parsen von JavaScript in WordPress verzögert.
Warum ist das Aufschieben des Parsens von JavaScript wichtig?
Um das Konzept des Defer Parsing von JavaScript vollständig zu verstehen, müssen Sie verstehen, wie ein Browser eine Webseite rendert. Wenn Ihr Browser eine Seite anfordert, sendet Ihr Webserver diese zurück, die in Form eines HTML-Dokuments heruntergeladen wird.
Das HTML-Dokument enthält mehrere Elemente und Ressourcen, die der Browser liest, während die zusätzlichen Ressourcen heruntergeladen werden. Und schließlich wird die Seite nur gerendert, wenn alle Ressourcen heruntergeladen wurden.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangenDas Herunterladen von Ressourcen, die größer sind, dauert viel länger. Bilder machen die meisten dieser Ressourcen aus, weshalb es wichtig ist, Ihre Bilder zu optimieren. Außerdem können Sie den Download unnötiger Skripte verzögern, indem Sie sie identifizieren und Ihre Webseite beschleunigen.
So erkennen Sie, welche Skripte verschoben werden sollen
Bei einer minimalen Website, die nicht viel JavaScript verwendet, sind möglicherweise keine Skripts vorhanden, die zum Laden der Seite erforderlich sind. Im Gegenteil, für eine recht komplexe Website ist es wichtig, eine detaillierte Analyse aller Skripte zu haben, um zu verstehen, welche für das Laden der Seite unerlässlich sind.
Die erste Methode zum Entfernen unnötiger Skripts besteht darin, die Skripte einzeln zu entfernen und gleichzeitig alle Fehler in der JavaScript-Konsole zu überprüfen. Gleichzeitig erfordert diese Methode erheblichen Aufwand und Kenntnisse über JavaScript.
Die andere Methode besteht darin, mit dem Geschwindigkeitstest-Tool zu bewerten, welche Skripte für das Laden der Seite unerlässlich sind. Eines dieser Tools ist GTmetrix , bei dem Sie lediglich die URL Ihrer Website eingeben müssen, um die Ergebnisse anzuzeigen . Auf der Registerkarte Page Speed finden Sie den Abschnitt Defer Parsing For JavaScript, der die Liste der unnötigen Skripts anzeigt, die während des Renderns Ihrer Seite beim Erweitern geladen werden.
Mithilfe der Informationen können Sie die Skripts entfernen, die das Rendering Ihrer Seite nicht berücksichtigen.
Zurückgestellte oder asynchrone Attribute
Es gibt zwei Möglichkeiten, das Herunterladen von Skripten beim Rendern von Seiten zu verhindern.
Erstens können Sie durch Hinzufügen des Defer- Attributs zum script-Tag sicherstellen, dass der Browser keine Ressourcen herunterlädt, es sei denn, die Seite wurde geparst. Sobald das Rendern und Parsen der Seite abgeschlossen ist, kann der Browser alle verzögerten Skripts herunterladen. Unten sehen Sie ein Beispiel für ein Skript-Tag, das zeigt, wie Sie das Defer-Attribut zu einer HTML-Seite hinzufügen.
<script src="path/to/script" defer></script>Andererseits können Sie dem script-Tag ein async-Attribut hinzufügen. Dies führt den Browser dazu, das Skript separat zu laden. Dies bedeutet, dass der Browser mit dem Herunterladen der Ressourcen beginnt, wenn er auf den Code stößt, während gleichzeitig der HTML-Code separat analysiert wird. Das unten angegebene Beispielskript zeigt, wie ein asynchrones Attribut hinzugefügt wird.
<script src="path/to/script" async></script>Beide Attribute unterscheiden sich in der Art und Weise, wie Ressourcen heruntergeladen werden. Bei einer minimalen Website ist es nicht einfach, Unterschiede zwischen asynchronen und verzögerten Attributen zu erkennen. Gleichzeitig wird für eine komplexere Webanwendung empfohlen, die Defer-Technik zu verwenden.
Verzögern Sie das Parsen von JavaScript
Hier sind die beiden Methoden, die Sie für das Defer-Parsing von JavaScript verwenden können.
1. Passen Sie die Datei functions.php an
Wenn Sie sich an die WordPress-Entwicklung gewöhnt haben, müssen Sie wissen, dass es keine gute Idee ist, direkt das HTML-Markup mit Skripten zu versehen. Sie können jedoch integrierte WordPress-Funktionen verwenden, um Ressourcen anzufordern.
Um Ihren Skripten ein async- oder defer-Attribut hinzuzufügen, sollten Sie der Datei functions.php Ihres WordPress-Themes die folgende Funktion hinzufügen.
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;
}Stellen Sie sicher, dass Sie jedes Skript in die Warteschlange stellen, bevor Sie den Skript-Tags die Attribute defer und async hinzufügen.
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. Plugins für Defer Parsing von JavaScript
Verständlicherweise verfügt nicht jeder über beträchtliche Kenntnisse und Fähigkeiten, um die obige Methode zu befolgen. Daher können für Anfänger einige Plugins zum Defer Parsing von JavaScript verwendet werden.
Asynchrones JavaScript
Async JavaScript ist ein kostenloses WordPress-Plugin, das Sie auf Ihrem WordPress installieren können, um die Aufgabe auszuführen.
Nach der Installation und das Plugin aktiviert, um die Plugin - Einstellungen gehen und die Async JavaScript aktiviert Option überprüfen.
Scrollen Sie nach unten, um zwischen der asynchronen oder verzögerten Methode auszuwählen.
Scrollen Sie nach unten, um erweiterte Optionen anzuzeigen, mit denen Sie Skripts zum Asynchronisieren und Zurückstellen separat hinzufügen oder entfernen können. Außerdem können Sie Plugins und Themes aus den Änderungen entfernen, die dieses Plugin vornehmen wird.
Autooptimieren
Autoptimize ist ein weiteres Plugin, das Ihnen das Defer Parsing von JavaScripts ermöglicht.
Aktivieren Sie nach der Installation und Aktivierung des Plugins die Option JavaScript-Code optimieren auf der Einstellungsseite . Dadurch werden alle unnötigen Skripte verschoben und in die Fußzeile verschoben.
Sie können auch die Skripte für das asynchrone Attribut auf der Registerkarte Extra hinzufügen.
Sie können entweder die Datei functions.php bearbeiten oder Plugins wie Autoptimize und Async JavaScript verwenden . Dies sind die beiden zuverlässigen Methoden zum Hinzufügen der async- und defer-Attribute zu script-Tags.
Wir hoffen, dass diese Techniken Ihnen helfen, Ihre Website zu beschleunigen. Besuchen Sie uns auf Facebook und Twitter , um über unsere Beiträge auf dem Laufenden zu bleiben.
