Unter den vielen Gründen für die überwältigende Popularität von WordPress im Web ist die Entwickler-Community, dass es eine große Anzahl von Plugins und Themes gibt, um mit relativ geringem Aufwand und Investitionen eine benutzerdefinierte Website zu erstellen. Wenn jedoch mehrere Skripte auf der Site arbeiten, kann dies die Leistung und Ladezeit verlangsamen.
Auch wenn einige der Skripte nicht gleichzeitig geladen werden müssen, tun sie dies und verhindern letztendlich, dass Benutzer die Website-Inhalte schnell anzeigen können, was dazu führt, dass die Website aus Frustration verlassen wird. Glücklicherweise gibt es einige Möglichkeiten, diese Rendering-blockierenden JavaScript- und CSS-Dateien zu entfernen, damit die Website schnell geladen und die Inhalte an die Betrachter geliefert werden können.
Render-Blocking JavaScript und CSS erklärt
Immer wenn eine Website in einem Webbrowser geladen wird, fordert sie alle Skripts zum Laden in einer Warteschlange an. Wenn sich die Warteschlange der Skripte aus irgendeinem Grund weigert, aufzuräumen, wird die Website nicht angezeigt. Diese Skripte, die das Laden verweigern, werden als renderblockierende JavaScript- und CSS-Dateien bezeichnet. Die Zeit zum vollständigen Laden der Site hängt von der Länge der Warteschlange ab. Sehr oft sind viele der in der Warteschlange steckenden Skripte nicht einmal notwendig, damit der Betrachter die Website zu diesem Zeitpunkt sehen kann und können sehr einfach mit der Ausführung warten, bis die Website vollständig geladen ist.
Nachteile von JavaScript und CSS, die das Rendern blockieren
Die erste und wichtigste Auswirkung von JavaScript- und CSS-Skripten, die das Rendern blockieren, auf der Website ist, dass sie die Ladegeschwindigkeit verlangsamen. Die Website-Geschwindigkeit ist ein sehr wichtiger Parameter, der bestimmt, wie nutzbar die Website ist und wie gut sie in den SERPs abschneidet. Wenn die Site langsam lädt, ist es wahrscheinlicher, dass Besucher sie für eine andere Site verlassen; Die daraus resultierende Absprungrate ist ein starkes SEO-Signal, das die Suchmaschinen-Rankings nach unten treibt. Gemäß Suchmaschinenjournal, mehr als die tatsächliche Zeit, die zum Laden der Website aufgewendet wird, liegt das Problem in der Wahrnehmung der Benutzer, wie lange das Laden der Website dauert. Da Browser versuchen, alles, einschließlich der Render-Blocking-Skripte, gleichzeitig zu laden, sollten Sie sicherstellen, dass die Site zunächst nur die Skripte lädt, die für die Verwendung der Site erforderlich sind Belastung.
Beseitigung von Rendering-blockierendem JavaScript und CSS
Noch bevor Sie versuchen, die Renderblocking-Skripte zu entfernen, müssen Sie die Skripts identifizieren, die für das Problem verantwortlich sind. Die Verwendung des PageSpeed Insights-Tools von Google ist der einfachste Weg, dies zu tun. Sie sollten eine Liste der zu beachtenden Skripte erstellen und dann entscheiden, ob Sie das Problem manuell beheben oder ein speziell dafür entwickeltes Plug-In verwenden möchten.
Wenn Sie jedoch während der Entwicklungsphase bestimmte Best Practices zur Reduzierung der Anzahl von Render-Blocking-Skripten auf Ihrer Website implementieren, machen Sie sich nicht nur das Leben leichter, sondern sorgen auch für erschwingliches SEO. Zu den gängigen Taktiken gehören das Minimieren von JavaScript und CSS durch Entfernen unnötiger Leerzeichen und Kommentare im Code, das Verketten von JavaScript- und CSS-Dateien, um ihre Gesamtanzahl zu reduzieren, sowie das asynchrone Laden, um das Laden von Java-Script zu verzögern.
So einfach die Methoden auch klingen mögen, das manuelle Entfernen der Skripte kann aufgrund der schieren Anzahl von JavaScript- und CSS-Dateien, die mit jedem der nach vorne gerichteten Plugins geliefert werden, mühsam sein. Während WordPress einen kombinierten Filter für alle Frontend-orientierten Skripte bietet, mit dem Sie alle eingehenden JavaScript- oder CSS-Dateien identifizieren können; Es ist viel einfacher, ein Plug-In zu verwenden, als es von Grund auf neu zu tun.
Top-Plugins zur Reduzierung der Anzahl von JavaScript- und CSS-Skripten, die das Rendern blockieren
WP Rocket
WP Rocket ist ein sehr gutes Tool zur Optimierung von Websites, da es extrem vielseitig ist und eine Vielzahl von Aufgaben wie das Verkleinern von CSS und JavaScript, das Zurückstellen von Remote-JavaScript-Anfragen, das Lazy Loading von Bildern und mehr bewältigen kann. Während der einfache Einrichtungsprozess ein großes Plus ist, müssen Sie sich für das Plug-in an eine andere WordPress-Dashboard-Erfahrung anen, als die meisten Entwickler es gewohnt sind. Obwohl WP rocket mit einigen kostenlosen Extras geliefert wird, beginnt der Grundpreis für eine Website bei 49 US-Dollar pro Jahr.
Autoptimize
Autoptimize wurde speziell entwickelt, um Probleme zu beheben, die von Tools wie PageSpeed Insights identifiziert werden, und ermöglicht es Benutzern, das Plug-in mit einem neuen Menü im WordPress-Dashboard zu konfigurieren. Während Autoptimize alle grundlegenden Aufgaben wie Caching und Minimieren von Skripten ausführt, kann es auch Bilder optimieren und in das WebP-Dateiformat konvertieren. Obwohl die Konfiguration etwas schwierig ist, wird das kostenlose Plug-in für seine Funktionalität sehr gut bewertet. Ein benutzerdefinierter Konfigurationsplan für 165 US-Dollar und ein fachkundiger Plug-in-Konfigurationsplan für 667 US-Dollar mit einer professionellen Website-Überprüfung sind ebenfalls erhältlich.
JCH Optimieren
JCH Optimize bietet eine Reihe einzigartiger Tools zur Steigerung der Ladegeschwindigkeit Ihrer Seiten. Es kann beispielsweise die Seitengrößen und die Anzahl der zum Laden von Webseiten erforderlichen HTTP-Anforderungen reduzieren, wodurch die Last auf dem Server verringert und der Bandbreitenbedarf verringert wird.
Der Sprite-Generator, der Hintergrundbilder in Sprites umwandelt, sodass das Laden des Browsers weniger HTTP-Anfragen erfordert. Während Benutzer die erweiterte Funktionalität mögen werden, kann die steile Lernkurve ein Problem sein, obwohl eine angemessene -Dokumentation verfügbar ist, um eine fehlerfreie Installation zu gewährleisten. Sie können mit der kostenlosen Version beginnen; Wenn Sie jedoch auf die erweiterten Funktionen zugreifen möchten, müssen Sie einen der Pläne ab 29 US-Dollar für sechs Monate abonnieren.
Entfernen Sie nicht verwendete CSS JS-Dateien in WordPress
Es gibt 4 grundlegende Kapazitäten, wenn Sie nicht verwendete CSS-JS-Datensätze im WordPress-Frontend evakuieren müssen:
- wp_de_script($handle)
- wp_dequeue_script($handle)
- wp_de_style($handle)
- wp_dequeue_style($handle)
// Inhalts-Handles ausstoßen, um die wir uns nicht kümmern müssen, jede mit eigenen Bedingungen
add_action('wp_print_scripts', 'wra_filter_scripts', 100000);
add_action('wp_print_footer_scripts', 'wra_filter_scripts', 100000);
Funktion wra_filter_scripts(){
#wp_de_script ($ handle);
#wp_dequeue_script($handle);
wp_de_script('bbpress-editor');
wp_dequeue_script('bbpress-editor');
// Unterstützung von Gerätepixeln
// Dies verbessert die Ziele von Gravatars- und wordpress.com-Übertragungen bei hochauflösenden und gezoomten Programmen. Wir haben nur Gravatare, also sollten wir ohne in Ordnung sein.
wp_de_script('devicepx');
wp_dequeue_script('devicepx');
if( !is_singular( 'docs' ) ){
wp_de_script('toc-front');
wp_dequeue_script ('toc-front');
}
if( !is_singular( array('docs', 'post' ) ) ){
wp_de_script ('Codebox');
wp_dequeue_script ('Codebox');
}
}
// Stile entfernen, die wir nicht brauchen
add_action ('wp_print_styles', 'wra_filter_styles', 100000);
add_action ('wp_print_footer_scripts', 'wra_filter_styles', 100000);
Funktion wra_filter_styles(){
#wp_de_style ($ handle);
#wp_dequeue_style($handle);
//keine bbpress-Stile mehr.
wp_de_style('bbp-default');
wp_dequeue_style('bbp-default');
// Der monitor wird im Frontend nicht verwendet.
wp_de_style('wp_dlmp_styles');
wp_dequeue_style('wp_dlmp_styles');
if( !is_singular( 'docs' ) ){
// das Inhaltsverzeichnis-Plug-in wird auf den Dokumentationsseiten unverändert verwendet
wp_de_style('toc-screen');
wp_dequeue_style('toc-screen');
}
// Das sollte nicht so sein. Muss mal reinschauen.
wp_de_style('wppb_stylesheet');
wp_dequeue_style('wppb_stylesheet');
}
if( !is_singular( array('docs', 'post' ) ) ){
wp_de_style('codebox');
wp_dequeue_style('codebox');
}
}
Das wirklich coole daran ist, dass Sie restriktive WordPress-Labels verwenden können, um sich auf eine bestimmte Seite oder einen ganzen benutzerdefinierten Beitragstyp zu konzentrieren. Dies gibt uns die Anungsfähigkeit, die wir haben, um unsere CSS/JS-Datensätze genau dort zu stapeln, wo sie benötigt werden.
Fazit
Es ist wichtig, sicherzustellen, dass Ihre Website schnell geladen wird, um benutzerfreundlich zu sein und zu verhindern, dass eine hohe Absprungrate Ihre SEO-Leistung beeinträchtigt. Obwohl es viele Gründe geben kann, warum Ihre WordPress-Site nicht schnell geladen wird, ist ein häufiger Grund das unnötige Anstehen von Rendering-blockierenden JavaScript- und CSS-Skripten, die durch die Verwendung von Plugins entstehen.
Um die Probleme anzugehen, die selbst sauberes Schreiben von Code nicht bewältigen kann, kann es hilfreich sein, eines der spezialisierten Plug-Ins zu verwenden, die entwickelt wurden, um die Anzahl von JavaScript- und CSS-Skripten zu reduzieren und sicherzustellen, dass unnötige Warteschlangenbildung von Skripten die Skripte nicht verzögert Laden der Website.
