Render-Blocking JavaScript und CSS in WordPress: 5 Plugins, um es zu beheben

Es ist noch nicht lange her, da gab Google bekannt, dass die Webseiten, die länger als drei Sekunden zum Laden brauchen, nicht SEO-freundlich sind.

In dieser Ära des Internets und des digitalen Marketings benötigen Sie die schnellste Website, wenn Sie effektiv mit Tausenden von Konkurrenten auf der ganzen Welt konkurrieren möchten. Es besteht kein Zweifel, dass eine schnellere Website bessere Chancen hat, Besucher anzuziehen und ihr Engagement für ihre Inhalte zu erhöhen.

Das Ausführen einer WordPress-Website bedeutet, dass eine beträchtliche Anzahl von Skripten gleichzeitig ausgeführt wird, um Ihre Website zugänglich zu machen.

Allerdings müssen nicht immer alle diese Elemente geladen werden. Wenn Sie schon einmal die Leistung Ihrer Website überprüft haben mit Google Page Speed ​​Insights, sind Sie wahrscheinlich auf die JavaScript- und CSS-Option zum Rendern gestoßen, die sich auf die Geschwindigkeit auswirkt.

Heute werden wir über diese überflüssigen Dateien sprechen und Sie darüber aufklären, wie Sie sie entfernen können, um Ihre Website zu verbessern.

 

Was ist Rendering-blockierendes JavaScript und CSS?

Zusammenfassend sind JavaScript und CSS, die das Rendern blockieren, eine Reihe von Stylesheets und Skripten, die vollständig ausgeführt werden müssen, bevor eine Site geladen und sichtbar wird.

Die Themes und Plugins, die Sie auf Ihrer WordPress-Website installieren, fügen viele dieser Dateien zum Front-End-Bereich Ihrer Website hinzu. Und wie Sie vielleicht schon erraten haben, verlangsamen einige von ihnen die Seitenladezeit und verhindern, dass Ihre Seiten gerendert werden.

Wenn ein Websitebesucher Ihre Website öffnet, lädt der Internetbrowser zunächst die notwendigen JavaScript- und CSS-Dateien vor dem HTML.

Dies ist ein gewöhnliches Verfahren, da eine Seite ohne diese wesentlichen Elemente unbrauchbar ist. Das Problem ist, dass der Webbrowser die Seite nicht rendern kann, bevor diese Dateien vollständig geladen sind.

Der Trick dabei ist, dass Sie das Laden einiger Skripte verschieben können, ohne dass es zu Problemen kommt, was die Besucher beim Öffnen Ihrer Seite sehen.

Website-Besitzer können Änderungen an ihrer Website vornehmen, um zu verhindern, dass die Webbrowser Codes laden, die außerhalb dessen liegen, was für den oberen Teil der Seite erforderlich ist, den ein Benutzer sofort sieht.

Mit anderen Worten, die Browser laden nur die wesentlichen Dateien für diesen Abschnitt, bevor ein Benutzer auf der Seite nach unten scrollt. Dieser Bereich der Webseiten heißt ATF, was für Above the Fold steht. Andere Teile, für die Benutzer nach unten scrollen müssen, um sie sehen zu können, sind der Nicht-ATF-Bereich.

Wenn Ihre Website die JavaScript- und CSS-Codes für die Nicht-ATF-Abschnitte lädt, dauert das Laden der Seiten daher länger. Aus diesem Grund versucht Google, Sie aufzufordern, die unnötigen Ressourcen in den Codes Ihrer Website nicht mehr auszuführen.

 

Finden Sie JavaScript und CSS, die das Rendern blockieren

Der einfachste Weg, dieses Problem herauszufinden, besteht darin, einen Geschwindigkeitstest mit Google PageSpeed ​​Insights durchzuführen. Nachdem Sie die Seite besucht haben, müssen Sie lediglich Ihre URL-Adresse in das erforderliche Feld eingeben und dann auf die Schaltfläche 'Analysieren' klicken.

Wenn dieses Problem auf der Seite auftritt, wird ein Vorschlag angezeigt, der Sie auffordert, JavaScript und CSS, die das Rendern blockieren, in Inhalten über dem Falten zu entfernen.

Am besten vergisst du das meistens nicht Website-Score irgendwo zwischen 70 und 90, und selbst die leistungsstärksten erreichen selten eine Zahl nahe 100. Sie sollten Ihre Website also niemals zwingen, 100 zu erreichen. Tun Sie so viel wie möglich, um die höchste Punktzahl zu erreichen, ohne die Benutzererfahrung zu beeinträchtigen negativ.

Abhängig von dem Thema und den Tools, die Sie auf Ihrer Website verwenden, sind einige Skripte essenziell für die perfekte UX Sie Ihrem Publikum anbieten sollen. Daher ist es völlig unklug, sie zu entfernen, um auf der Ergebnisseite dieses Google-Tools eine etwas höhere Punktzahl zu erreichen.

 

Behebung von JavaScript und CSS, die das Rendern blockieren

Es gibt viele Strategien, um JavaScript zu eliminieren, das das Rendern blockiert. Die wichtigsten Methoden sind Async und Defer. Die erste Methode ermöglicht es dem Browser des Benutzers, das JavaScript herunterzuladen, während andere HTML-Teile analysiert werden.

Obwohl das Parsen während des Herunterladens der Datei nicht vollständig aufhört, ist die HTML-Parser pausiert, um das Skript auszuführen, wenn es heruntergeladen wird. Auf der anderen Seite lässt der Defer-Ansatz zu, dass der Browser das JavaScript herunterlädt, während er andere HTML-Teile analysiert, und führt das Skript nicht aus, bis das HTML-Parsing beendet ist.

Die Beseitigung des Rendering-blockierenden CSS ist eine größere Herausforderung, da Sie die erforderlichen Codes zum Laden des ATF-Inhalts möglicherweise verzögern. Das Verfahren ist etwas kompliziert und erfordert ein gutes Verständnis der Webentwicklung.

Dennoch richten wir uns an die durchschnittlichen Nutzer, die ihre Website selbst betreiben.

Wir alle wissen, dass WordPress ein modulares System ist, das es durchschnittlichen Benutzern ermöglicht, alles zu optimieren, ohne eine einzige Codezeile zu schreiben. Das Beheben dieses Problems ist ebenfalls dasselbe, und Sie können das Problem schnell lösen, indem Sie das entsprechende Plugin installieren.

 

Beste WordPress-Plugins zur Behebung von JavaScript und CSS, die das Rendern blockieren

In den nächsten Absätzen stellen wir fünf vor leistungsstarke WordPress-Plugins die Ihnen helfen, dieses Problem am tiefsten zu lösen.

Vorsicht: Bevor Sie eines der folgenden Tools verwenden, sollten Sie Ihre Website sichern, um einen möglichen Datenverlust zu vermeiden.

 

Autoptimize

Das Autoptimize Plugin wurde explizit erstellt, um die von Website-Analysetools wie Google PageSpeed ​​Insights vorgeschlagenen Probleme zu beheben. Es verbessert die Bereitstellung von JavaScript- und CSS-Dateien, ohne sich auf andere Aspekte der Website-Performance zu konzentrieren.

Wenn Sie nach grundlegenden Optimierungsfunktionen suchen, bietet Ihnen dieses Plugin das, was Sie brauchen. Ein guter Teil dieses Tools ist, dass es die Bilder Ihrer Website in das optimierte WebP-Format konvertiert.

Nachdem Sie Autoptimize installiert und aktiviert haben, müssen Sie die Kontrollkästchen "JavaScript-Code optimieren" und "CSS-Code optimieren" in den Einstellungen des Plugins aktivieren. Achten Sie darauf, die Kästchen unter diesen beiden Optionen, die die CSS- und Skriptdateien zusammenfassen, nicht zu aktivieren.

Obwohl dieses Plugin kostenlos erhältlich ist, können Sie auch Premium-Pakete erwerben, die Ihnen bei der Konfiguration der Website helfen.

 

WP Rocket

WP Rocket ist ein bekannter Name unter den WordPress-Optimierungstools, der Sie bei verschiedenen Aspekten wie JavaScript- und CSS-Modifikationen und Lazy Loading-Einstellungen unterstützt. Der Einrichtungsprozess von WP Rocket ist ziemlich einfach, aber es kann zunächst schwierig sein, zu verstehen, wie die Dinge auf der Benutzeroberfläche ausgeführt werden.

Es ist sofort einsatzbereit und wendet die optimalen Einstellungen sofort nach der Installation auf Ihrer Website an. In Anbetracht der Unvermeidlichkeit von Website-Fehlfunktionen aufgrund von Skriptänderungen aktiviert das Plugin standardmäßig die Rendering-blockierenden JavaScript- und CSS-Einstellungen nicht.

Sie können diese Funktion jedoch einfach einschalten, indem Sie die Einstellungen des Plugins durchgehen und in den Abschnitten "CSS-Dateien" und "JavaScript-Dateien" nach den entsprechenden Optionen suchen.

Das Haupt-Plugin kostet 49 US-Dollar pro Jahr und beinhaltet auch ein Jahr Support. Darüber hinaus finden Sie mehrere kostenlose Extras auch für das Core-Plugin von WordPress.

 

RabbitLoader

RabbitLoader ist ein hochmodernes WordPress-Plugin zur Leistungsoptimierung, das entwickelt wurde, um eine Website schneller, reibungsloser und effizienter laufen zu lassen.

Ähnlich wie das weithin gefeierte WP Rocket bringt RabbitLoader nicht nur die Leistung Ihrer Website auf ein neues Niveau, sondern führt auch einige innovative Funktionen ein, die sie von anderen Spielern im Spiel unterscheiden.

Caching-Magie: RabbitLoader geht noch einen Schritt weiter, indem es ein dynamisches Caching-System bietet, das sich in Echtzeit an Änderungen auf Ihrer Website anpasst und sicherstellt, dass Ihre Besucher immer die neuesten Inhalte sehen, ohne dass die Geschwindigkeit darunter leidet.

Bildoptimierung: Bilder können eine Website erheblich verlangsamen, aber die Bildoptimierungsfunktion von RabbitLoader verändert das Spiel. Es komprimiert und skaliert Bilder automatisch auf eine optimale Größe, ohne die Qualität zu beeinträchtigen, und stellt so sicher, dass Ihre Website schnell geladen wird, ohne dass die visuelle Attraktivität darunter leidet.

Faules Laden: Sowohl WP Rocket als auch RabbitLoader bieten Lazy Loading für Bilder und Iframes, aber RabbitLoader geht noch einen Schritt weiter und bietet verzögertes Laden von JavaScript an.

Kompatibilität: RabbitLoader ist so konzipiert, dass es, genau wie WP Rocket, einwandfrei mit einer Vielzahl von WordPress-Themes und -Plugins funktioniert. Unabhängig davon, ob Sie ein einfaches Blog oder eine komplexe E-Commerce-Website haben, RabbitLoader wurde entwickelt, um die Leistung Ihrer Website ohne Konflikte zu verbessern.

 

W3 Total Cache

W3 Total Cache ist ein robuster Leistungsverstärker, der nicht nur Caching-Probleme, sondern auch die durch Skripte und Stylesheets verursachten Probleme bewältigt.

Sie können das renderblockierende JavaScript und CSS ganz einfach entfernen, indem Sie zuerst die Minify-Option in den Einstellungen des Plugins aktivieren und auf den manuellen Modus setzen.

Als nächstes sollten Sie auf die Registerkarte "Ressourcen zum Blockieren des Renderns entfernen" klicken und die vollständige Linkadresse der erforderlichen Dateien zum Blockieren von Skripten und Stylesheets kopieren. Jetzt können Sie diese Links verwenden und in die 'JS-Sektion' des Leistung>Minimieren Tab.

W3 Total Cache hat mehr als eine Million aktive Installationen und Sie können es kostenlos von der WordPress.org-Website auf Ihre Site herunterladen.

 

Geschwindigkeitsverstärker-Pack

Geschwindigkeitsverstärker-Pack ist ein zuverlässiges Tool zur Optimierung von Stylesheets, JavaScripts, Lazy Loading und Beseitigung von Unordnung. Das Entwicklerteam aktualisiert dieses Plugin ständig, um es mit den neuesten Updates und Sicherheitsmaßnahmen auf dem neuesten Stand zu halten.

Wenn Sie Produkte und Dienstleistungen online verkaufen, WooCommerce-spezifische Optimierung Die Funktionen von Speed ​​Booster Pack werden Ihnen dabei helfen, die Sichtbarkeit Ihres Shops im Internet zu erhöhen.

Sie können JavaScript und CSS, die das Rendern blockieren, auf Ihrer WordPress-Website schnell beheben, indem Sie im Speed ​​Booster Pack-Menü Ihres Admin-Panels auf die Registerkarte "Erweitert" klicken.

Aktivieren Sie für JavaScript die Optionen 'Skripte in die Fußzeile verschieben' und 'Verzögern des Parsens von JavaScript-Dateien'. Gehen Sie als Nächstes zum Menü "CSS-Optimierung" und wählen Sie aus den verfügbaren Optionen aus, um die Leistung Ihrer Website zu verbessern.

Speed ​​Booster Pack ist eine kostenlose Lösung, die auf der WordPress.org-Website verfügbar ist.

 

JCH Optimieren

JCH Optimieren ist der letzte Punkt auf dieser Liste der vorgeschlagenen Plugins, der mit nützlichen Tools ausgestattet ist, um Beschleunigen Sie das Laden der Seite. So können Sie beispielsweise die Anzahl der zum Laden Ihrer Seiten erforderlichen HTTP-Anfragen reduzieren und gleichzeitig die Größe dieser Seiten verringern.

Sprite-Generator ist eine weitere spannende Funktion in diesem Plugin, die die Anzahl der HTTP-Anfragen zum Laden der Hintergrundbilder reduziert.

Mit JCH Optimize können Sie JavaScript und CSS entfernen, die das Rendern blockieren, wenn Sie auf einen Premium-Plan upgraden. Sie müssen lediglich die Optionen „Premium“ oder „Optimum“ im Abschnitt „Automatische Einstellungen“ aktivieren. CSS-Liefereinstellungen sind ebenfalls nur in der Pro-Version verfügbar.

Sie können dieses Plugin kostenlos von WordPress.org installieren, aber Sie müssen einen Premium-Plan erwerben, um sein volles Potenzial auszuschöpfen. Die Preispläne beginnen bei 29 US-Dollar für sechs Monate und erreichen 99 US-Dollar für den lebenslangen Zugriff.

 

Zusammenfassung

Die Ladegeschwindigkeit der Website ist eines der wichtigsten Elemente, um das Publikum anzuziehen, zu binden und zu binden. Sie sollten dieser bei der Suchmaschinenoptimierung Ihrer Website einen hohen Stellenwert einräumen und mit dem Tool Google PageSpeed ​​Insights messen, wie gut Sie in diesem Bereich abschneiden.

Das JavaScript- und CSS-Element, das das Rendern blockiert, ist einer der häufigsten Vorschläge, die Sie möglicherweise sehen, wenn Sie das leistungsstarke Tool von Google verwenden. Sie können dieses Problem ganz einfach beheben, indem Sie eines der fünf Plugins installieren, die wir in diesem Artikel vorgestellt haben und Beschleunigen Sie die Ladegeschwindigkeit Ihrer Seiten weitgehend.

Wir hoffen, dass Sie dieses Tutorial nützlich finden und eine schnell ladende Website für die bestmöglichen Ergebnisse genießen.