Behebung von Render-Blocking JavaScript und CSS in WordPress

Versuchen Sie, Rendering-blockierendes JavaScript und CSS in WordPress zu eliminieren?

Wenn Sie Ihre Website mit Google PageSpeed Insights testen, werden Sie wahrscheinlich einen Vorschlag zur Beseitigung von Rendering-blockierenden Skripten und CSS sehen. Es wird jedoch nicht näher erläutert, wie Sie dies für Ihre WordPress-Website tun können.

In diesem Artikel zeigen wir Ihnen, wie Sie Rendering-blockierende JavaScript- und CSS-Fehler in WordPress leicht beheben können, um Ihren Google PageSpeed-Score zu verbessern.

Was ist Render-Blocking JavaScript und CSS?

Render-Blocking JavaScript und CSS sind Dateien, die verhindern, dass eine Website eine Webseite anzeigt, bevor diese Dateien geladen sind.

Jede WordPress-Website verfügt über ein Theme und Plugins, die dem Frontend Ihrer Website JavaScript- und CSS-Dateien hinzufügen.

Diese Skripte können die Ladezeit Ihrer Website verlängern und auch das Rendern der Seite blockieren.

Der Browser des Nutzers muss diese Skripte und CSS laden, bevor der Rest des HTML-Code der Seite geladen wird. Das bedeutet, dass Nutzer mit einer langsameren Verbindung ein paar Millisekunden länger warten müssen, bis die Seite angezeigt wird.

Diese Skripte und Stylesheets werden als Rendering-Blocking-JavaScript und CSS bezeichnet.

Besitzer vonWordPress-Websites, die einen Google PageSpeed-Score von 100 erreichen wollen, müssen dieses Problem beheben, um den perfekten Score zu erreichen.

Was ist eine Google PageSpeed-Bewertung?

Google PageSpeed Insights ist ein Tool zum Testen der Website-Geschwindigkeit, das von Google entwickelt wurde, um Website-Besitzer bei der Optimierung und Prüfung ihrer Websites zu unterstützen. Dieses Tool testet Ihre Website anhand der Google-Richtlinien für Geschwindigkeit und bietet Vorschläge zur Verbesserung der Ladezeit Ihrer Seite.

Es zeigt Ihnen eine Punktzahl an, die sich nach der Anzahl der Prüfungen richtet, die Ihre Website bestanden hat. Die meisten Websites erreichen einen Wert zwischen 50 und 70. Manche Website-Besitzer fühlen sich jedoch gezwungen, 100 zu erreichen (die höchste Punktzahl, die eine Seite erreichen kann).

BrauchenSie wirklich den perfekten „100“ Google PageSpeed Score?

Der Zweck von Google PageSpeed Insights ist es, Ihnen Richtlinien zur Verbesserung der Geschwindigkeit und Leistung Ihrer Website zu geben. Sie sind nicht verpflichtet, diese Regeln strikt zu befolgen.

Denken Sie daran, dass die Geschwindigkeit nur eine der vielen Metriken für die Suchmaschinenoptimierung (SEO) einer Website ist, die Google dabei helfen, Ihre Website zu bewerten. Geschwindigkeit ist deshalb so wichtig, weil sie die Nutzererfahrung auf Ihrer Website verbessert.

Ein besseres Nutzererlebnis erfordert viel mehr als nur Geschwindigkeit. Sie müssen auch nützliche Informationen, eine bessere Benutzeroberfläche und ansprechende Inhalte mit Texten, Bildern und Videos anbieten.

Ihr Ziel sollte es sein, eine schnelle Website zu erstellen, die den Nutzern ein tolles Erlebnis bietet.

Wir empfehlen Ihnen, die Google PageSpeed-Regeln als Vorschläge zu verwenden. Wenn Sie sie leicht umsetzen können, ohne die Benutzerfreundlichkeit zu beeinträchtigen, ist das großartig. Andernfalls sollten Sie versuchen, so viel wie möglich zu tun und sich dann nicht um den Rest kümmern.

Sehen wir uns also an, was Sie tun können, um Rendering-blockierende JavaScript- und CSS-Fehler in WordPress zu beheben.

Wir werden zwei Methoden behandeln, die Render-Blocking-Ressourcen in WordPress beseitigen. Sie können die Methode wählen, die für Ihre Website am besten geeignet ist:

Methode 1: Behebung von Rendering-Blocking-Skripten und CSS mit WP Rocket

Für diese Methode werden wir das WP Rocket-Plugin verwenden. Es ist das beste WordPress Caching- und Optimierungs-Plugin auf dem Markt, mit dem Sie die Leistung Ihrer Website schnell und ohne technische Kenntnisse oder eine komplizierte Einrichtung verbessern können.

Zunächst müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

WP Rocket funktioniert sofort nach dem Auspacken und aktiviert das Caching mit optimalen Einstellungen für Ihre Website. Sie können mehr darüber in unserem vollständigen Leitfaden erfahren, wie Sie WP Rocket in WordPress richtig installieren und einrichten.

Standardmäßig sind die Optionen zur Optimierung von JavaScript und CSS nicht aktiviert. Diese Optimierungen können sich möglicherweise auf das Erscheinungsbild Ihrer Website oder einige Funktionen auswirken, weshalb das Plugin Ihnen erlaubt, diese Einstellungen optional zu aktivieren.

Dazu müssen Sie die Seite Einstellungen “ WP Rocket besuchen und dann auf die Registerkarte „Datei-Optimierung“ wechseln.

Scrollen Sie von hier aus zum Abschnitt „CSS-Dateien“ und aktivieren Sie die Kontrollkästchen neben „CSS verkleinern“, „CSS-Dateien zusammenfassen“ und „CSS-Zustellung optimieren“.

Für die Einstellung „Optimize CSS Delivery“ empfiehlt WP Rocket, die Methode„Remove Unused CSS“ zu wählen.

Sie bietet nicht nur die beste Leistung, sondern kann auch zur Verringerung der Seitengröße und der HTTP-Anfragen beitragen.

Als nächstes müssen Sie zum Abschnitt JavaScript-Dateien blättern. Von hier aus können Sie alle Optionen für eine maximale Leistungsverbesserung überprüfen.

Sie können JavaScript-Dateien wie CSS-Dateien verkleinern und kombinieren.

Sie können WordPress auch daran hindern, die jQuery Migrate-Datei zu laden. Dieses Skript wird von WordPress geladen, um die Kompatibilität von Plugins und Themes mit alten Versionen von jQuery zu gewährleisten.

Die meisten Websites benötigen diese Datei nicht, aber Sie sollten dennoch Ihre Website überprüfen, um sicherzustellen, dass das Entfernen der Datei keine Auswirkungen auf Ihr Thema oder Ihre Plugins hat.

Scrollen Sie dann ein wenig weiter nach unten und aktivieren Sie die Kästchen neben den Optionen „JavaScript verzögert laden“ und „Abgesicherter Modus für jQuery“.

Diese Optionen verzögern das Laden nicht notwendiger JavaScripts, und der sichere Modus für jQuery ermöglicht das Laden von jQuery für Themes, die es möglicherweise inline verwenden. Sie können diese Option deaktiviert lassen, wenn Sie sicher sind, dass Ihr Thema nirgendwo Inline-JQuery verwendet.

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Danach sollten Sie auch den Cache in WP Rocket löschen, bevor Sie Ihre Website erneut mit Google PageSpeed Insights testen.

Auf unserer Testseite konnten wir auf Desktop-Geräten einen Wert von 100 % erreichen, und das Rendering-Blocking-Problem wurde sowohl bei mobilen als auch bei Desktop-Geräten gelöst.

Methode 2: Rendering-Blockierung von Skripten und CSS mit Autoptimize beheben

Für diese Methode werden wir ein separates Plugin verwenden, das speziell für die Verbesserung der Bereitstellung der CSS- und JS-Dateien Ihrer Website entwickelt wurde. Während dieses Plugin die Arbeit erledigt, hat es nicht die anderen leistungsstarken Funktionen, die WP Rocket hat.

Als Erstes müssen Sie Autoptimize installieren und aktivieren, ein kostenloses Plugin, das die Leistung Ihrer Website beschleunigt. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Einstellungen “ Autoptimieren besuchen, um die Plugin-Einstellungen zu konfigurieren.

Zunächst müssen Sie das Kästchen neben „JavaScript-Code optimieren“ unter dem Block „JavaScript-Optionen“ aktivieren. Vergewissern Sie sich, dass die Option „JS-Dateien zusammenfassen“ nicht markiert ist.

Scrollen Sie dann nach unten zum Feld CSS-Optionen und aktivieren Sie die Option „CSS-Code optimieren“.

Stellen Sie sicher, dass die Option „CSS-Dateien zusammenfassen“ nicht aktiviert ist.

Sie können nun auf die Schaltfläche „Änderungen speichern und Cache leeren“ klicken, um Ihre Einstellungen zu speichern.

Testen Sie Ihre Website mit dem PageSpeed Insights-Tool. Auf unserer Demo-Website konnten wir das Rendering-Blocking-Problem mit diesen Grundeinstellungen beheben.

Wenn immer noch Rendering-blockierende Skripte vorhanden sind, können Sie auf die Einstellungsseite des Plugins zurückkehren und die Einstellungen unter den Optionen JavaScript und CSS überprüfen.

Sie können dem Plugin zum Beispiel erlauben, Inline-JS einzubinden und Skripte zu entfernen, die standardmäßig ausgeschlossen sind, wie seal.js oder jquery.js. Klicken Sie dann einfach auf die Schaltfläche „Änderungen speichern und Cache leeren“, um Ihre Änderungen zu speichern und den Cache des Plugins zu leeren.

Sobald Sie fertig sind, überprüfen Sie Ihre Website erneut mit dem PageSpeed Insights-Tool.

Wie funktioniert Autoptimize?

Autoptimize fasst alle in der Warteschlange stehenden JavaScript- und CSS-Dateien zusammen. Danach erstellt es minifizierte CSS- und JavaScript-Dateien und stellt die zwischengespeicherten Kopien Ihrer Website asynchron oder zeitversetzt zur Verfügung.

Damit können Sie das Problem der Rendering-blockierenden Skripte und Stile beheben. Beachten Sie jedoch, dass dies auch die Leistung oder das Aussehen Ihrer Website beeinträchtigen kann.

Was tun, wenn Render-Blocking JavaScript und CSS noch vorhanden sind?

Je nachdem, wie die Plugins und Ihr WordPress-Theme JavaScript und CSS verwenden, kann es schwierig sein, alle Rendering-blockierenden JavaScript- und CSS-Probleme vollständig zu beheben.

Die oben genannten Tools können zwar hilfreich sein, aber Ihre Plugins benötigen möglicherweise bestimmte Skripte mit einer anderen Prioritätsstufe, um ordnungsgemäß zu funktionieren. In diesem Fall können die oben genannten Lösungen die Funktionalität solcher Plugins beeinträchtigen oder sie könnten sich unerwartet verhalten.

Anstatt zu versuchen, Rendering-Blocking-Probleme vollständig zu beseitigen, empfehlen wir alternative Ansätze, um Ihre Website zu beschleunigen. Sie können zum Beispiel einen CDN-Dienst nutzen, um Ihre statischen JavaScript- und CSS-Dateien bereitzustellen und die Ladezeit zu verkürzen.

Weitere Informationen finden Sie in unserem ultimativen Leitfaden zur Steigerung der Geschwindigkeit und Leistung von WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man Rendering-blockierende JavaScript und CSS in WordPress behebt. Vielleicht interessiert Sie auch unser Artikel darüber, wie WPBeginner mit 6 Tipps die Ladegeschwindigkeit von Seiten erhöht und unser Vergleich der besten Managed WordPress-Hosting-Unternehmen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.