Möchten Sie JavaScript und CSS, die das Rendern blockieren, in WordPress beseitigen?
Wenn Sie Ihre Website mit Google PageSpeed Insights testen, werden Sie wahrscheinlich einen Vorschlag sehen, Renderblocking-Skripte und CSS zu entfernen. Es enthält jedoch keine Details dazu, wie Sie dies auf Ihrer WordPress-Site tun können.
In diesem Artikel zeigen wir Ihnen, wie Sie JavaScript und CSS, die das Rendern blockieren, in WordPress einfach beheben können, um Ihren Google PageSpeed-Score zu verbessern.
Was ist JavaScript und CSS, die das Rendern blockieren?
Renderblocking JavaScript und CSS sind Dateien, die verhindern, dass eine Website eine Webseite anzeigt, bevor diese Dateien geladen werden.
Jede WordPress-Site verfügt über ein Thema und Plugins, die dem Front-End Ihrer Website JavaScript- und CSS-Dateien hinzufügen. Diese Skripte können die Seitenladezeit Ihrer Website verlängern und das Rendern der Seite blockieren.
Der Browser eines Benutzers muss diese Skripte und CSS laden, bevor der restliche HTML-Code auf der Seite geladen wird. Dies bedeutet, dass Benutzer mit einer langsameren Verbindung einige Millisekunden länger warten müssen, um die Seite anzuzeigen.
Diese Skripte und Stylesheets werden als renderblockierendes JavaScript und CSS bezeichnet.
Websitebesitzer, die versuchen, den Google PageSpeed-Score von 100 zu erreichen, müssen dieses Problem beheben, um diesen perfekten Score zu erreichen.
Was ist der Google PageSpeed-Score?
Google PageSpeed Insights ist ein Tool zum Testen der Website-Geschwindigkeit, das von Google entwickelt wurde, um Website-Betreibern zu helfen, ihre Websites zu optimieren und zu testen. Dieses Tool testet Ihre Website anhand der Geschwindigkeitsrichtlinien von Google und bietet Vorschläge zur Verbesserung der Seitenladezeit Ihrer Website.
Es zeigt Ihnen eine Punktzahl an, die auf der Anzahl der Regeln basiert, die Ihre Site besteht. Die meisten Websites liegen zwischen 50-70. Einige Website-Besitzer fühlen sich jedoch gezwungen, 100 zu erreichen (die höchste Punktzahl, die eine Seite erreichen kann).
Brauchen Sie wirklich den perfekten „100“ Google PageSpeed Score?
Der Zweck von Google PageSpeed Insights besteht darin, Ihnen Richtlinien zur Verbesserung der Geschwindigkeit und Leistung Ihrer Website bereitzustellen. Sie sind nicht verpflichtet, diese Regeln strikt einzuhalten.
Denken Sie daran, dass Geschwindigkeit nur eine von vielen SEO-Kennzahlen für Websites ist, die Google helfen, das Ranking Ihrer Website zu bestimmen. Der Grund, warum Geschwindigkeit so wichtig ist, liegt darin, dass sie die Benutzererfahrung auf Ihrer Website verbessert.
Eine bessere Benutzererfahrung erfordert viel mehr als nur Geschwindigkeit. Sie müssen auch nützliche Informationen, eine bessere Benutzeroberfläche und ansprechende Inhalte mit Text, Bildern und Videos anbieten.
Ihr Ziel sollte es sein, eine schnelle Website zu erstellen, die eine großartige Benutzererfahrung bietet.
Während des letzten Redesigns von Themelocal haben wir unseren Fokus auf Geschwindigkeit und Verbesserung der Benutzerfreundlichkeit gelegt.
Wir empfehlen Ihnen, Google Pagespeed-Regeln als Vorschläge zu verwenden, und wenn Sie sie einfach implementieren können, ohne die Benutzererfahrung zu beeinträchtigen, dann ist das großartig. Andernfalls sollten Sie versuchen, so viel wie möglich zu tun, und sich dann nicht um den Rest kümmern.
Lassen Sie uns jedoch einen Blick darauf werfen, was Sie tun können, um das Rendering-Blockieren von JavaScript und CSS in WordPress zu beheben.
Wir werden zwei Methoden behandeln, die das Rendering blockierende JavaScript und CSS in WordPress beheben. Sie können diejenige auswählen, die für Ihre Website am besten geeignet ist.
1. Fix Render Blocking Scripts und CSS mit WP Rocket
Für diese Methode verwenden wir das WP Rocket-Plugin. Es ist das beste WordPress-Caching-Plugin auf dem Markt und ermöglicht es Ihnen, die Leistung Ihrer Website ohne technische Kenntnisse oder komplizierte Einrichtung schnell zu verbessern.
Zuerst müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
WP Rocket ist sofort einsatzbereit und aktiviert das Caching mit optimalen Einstellungen für Ihre Website. Weitere Informationen dazu finden Sie in unserer vollständigen Anleitung zur ordnungsgemäßen Installation und Einrichtung von WP Rocket in WordPress.
Standardmäßig werden JavaScript- und CSS-Optimierungsoptionen nicht aktiviert. Diese Optimierungen können möglicherweise das Aussehen Ihrer Website oder einige Funktionen beeinträchtigen, weshalb Sie diese Einstellungen optional mit dem Plugin aktivieren können.
Um das zu tun, müssen Sie besuchen Einstellungen » WP Rocket Seite und wechseln Sie dann zum Reiter ‚Dateioptimierung‘. Scrollen Sie von hier aus zum Abschnitt CSS-Dateien und aktivieren Sie die Kontrollkästchen neben CSS minimieren, CSS-Dateien kombinieren und CSS-Bereitstellung optimieren.
Notiz: WP Rocket versucht, alle Ihre CSS-Dateien zu verkleinern, zu kombinieren und nur CSS zu laden, das für den sichtbaren Teil Ihrer Website benötigt wird. Dies kann sich auf das Erscheinungsbild Ihrer Website auswirken. Sie müssen Ihre Website daher auf mehreren Geräten und Bildschirmgrößen gründlich testen.
Als nächstes müssen Sie zum Abschnitt JavaScript-Dateien scrollen. Von hier aus können Sie alle Optionen für eine maximale Leistungsverbesserung überprüfen.
Sie können JavaScript-Dateien wie bei CSS verkleinern und kombinieren.
Sie können WordPress auch daran hindern, die jQuery Migrate-Datei zu laden. Es ist ein Skript, das WordPress lädt, um Kompatibilität für Plugins und Themes zu gewährleisten, die alte Versionen von jQuery verwenden.
Die meisten Websites benötigen diese Datei nicht, aber Sie sollten Ihre Website dennoch überprüfen, um sicherzustellen, dass das Entfernen keine Auswirkungen auf Ihr Design oder Ihre Plugins hat.
Scrollen Sie als Nächstes etwas weiter nach unten und aktivieren Sie die Kontrollkästchen neben den Optionen „JavaScript verzögert laden“ und „Abgesicherter Modus für jQuery“.
Diese Optionen verzögern das Laden nicht wesentlicher JavaScripts, und der abgesicherte jQuery-Modus ermöglicht es Ihnen, jQuery für Designs zu laden, die es möglicherweise inline verwenden. Sie können diese Option deaktiviert lassen, wenn Sie sicher sind, dass Ihr Theme nirgendwo Inline-jQuery verwendet.
Vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu speichern.
Danach möchten Sie möglicherweise auch den Cache in WP Rocket leeren, bevor Sie Ihre Website erneut mit Google Page Speed Insights testen.
Auf unserer Test-Site konnten wir eine Punktzahl von 100 % auf dem Desktop erreichen und das Problem mit der Renderblockierung wurde sowohl auf den Mobilgeräten als auch auf den Desktops behoben.
2. Fix Render Blocking Scripts und CSS mit Autoptimize
Für diese Methode verwenden wir ein separates Plugin, das speziell für die Verbesserung der Bereitstellung der CSS- und JS-Dateien Ihrer Website entwickelt wurde. Dieses Plugin erledigt zwar die Arbeit, verfügt jedoch nicht über die anderen leistungsstarken Funktionen von WP Rocket.
Als erstes müssen Sie die installieren und aktivieren Autooptimieren Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Einstellungen » Autooptimieren Seite, um die Plugin-Einstellungen zu konfigurieren.
Zuerst müssen Sie das Kontrollkästchen neben der Option „JavaScript-Code optimieren“ im Block JavaScript-Optionen aktivieren. Stellen Sie sicher, dass die Option ‚JS-Dateien aggregieren‘ deaktiviert ist.
Scrollen Sie als Nächstes nach unten zum Feld CSS-Optionen und aktivieren Sie die Option „CSS-Code optimieren“. Stellen Sie sicher, dass die Option ‚CSS-Dateien aggregieren‘ deaktiviert 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 Page Speed Insights-Tool. Auf unserer Demo-Site konnten wir das Render-Blocking-Problem mit diesen Grundeinstellungen beheben.
Wenn immer noch Render-Blocking-Skripte vorhanden sind, müssen Sie zur Einstellungsseite des Plugins zurückkehren und die Optionen sowohl unter JavaScript- als auch CSS-Optionen überprüfen.
Sie können beispielsweise dem Plugin erlauben, Inline-JS einzuschließen und standardmäßig ausgeschlossene Skripte wie seal.js oder jquery.js zu entfernen.
Klicken Sie auf die Schaltfläche „Änderungen speichern und Cache leeren“, um Ihre Änderungen zu speichern und den Plugin-Cache zu leeren.
Wenn Sie fertig sind, überprüfen Sie Ihre Website erneut mit dem Page Speed-Tool.
Wie funktioniert es?
Autoptimize aggregiert alle eingereihten JavaScripts und CSS. Danach erstellt es minimierte CSS- und JavaScript-Dateien und stellt zwischengespeicherte Kopien asynchron oder verzögert auf Ihrer Website bereit.
Auf diese Weise können Sie das Problem mit Renderblocking-Skripten und -Stilen beheben. Beachten Sie jedoch, dass dies auch Auswirkungen auf die Leistung oder das Erscheinungsbild Ihrer Website haben kann.
Fehlerbehebung
Abhängig davon, wie die Plugins und Ihr WordPress-Theme JavaScript und CSS verwenden, kann es ziemlich schwierig sein, alle JavaScript- und CSS-Probleme, die das Rendern blockieren, vollständig zu beheben.
Obwohl die oben genannten Tools hilfreich sein können, benötigen Ihre Plugins 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 sich unerwartet verhalten.
Google zeigt Ihnen möglicherweise immer noch bestimmte Probleme wie die Optimierung der CSS-Bereitstellung für „above the fold“-Inhalte. WP Rocket ermöglicht es Ihnen, dies zu beheben, indem Sie Critical CSS manuell hinzufügen, das erforderlich ist, um den obigen Faltbereich Ihres Themes anzuzeigen.
Es kann jedoch ziemlich schwierig sein, herauszufinden, welchen CSS-Code Sie benötigen, um über dem Faltinhalt anzuzeigen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie JavaScript und CSS, die das Rendern blockieren, in WordPress beheben. Vielleicht möchten Sie auch unseren ultimativen Leitfaden zur Beschleunigung der WordPress-Leistung für Anfänger und unseren Vergleich der am besten verwalteten WordPress-Hosting-Unternehmen lesen.