So beheben Sie Render-Blocking JavaScript und CSS in WordPress

Probleme mit render-blockierendem JavaScript und CSS auf Ihrer WordPress-Website können frustrierend sein. Diese Probleme können Ihre Website verlangsamen und ihre Leistung beeinträchtigen. Eine langsame Website kann Besucher abschrecken und Ihre Suchmaschinenrankings beeinflussen.

Wenn Sie Ihre Website auf Google PageSpeed Insights überprüfen, sehen Sie möglicherweise den Vorschlag, diese renderblockierenden Ressourcen zu eliminieren. Leider gibt das Tool keine klaren Anweisungen, wie dieses Problem in WordPress behoben werden kann.

Die gute Nachricht ist, dass es Tools gibt, die die Behebung von render-blocking JavaScript und CSS weniger kompliziert machen können, als es scheint. Sie können ein Caching-Plugin wie WP Rocket oder Autoptimize verwenden, um Ihre Website zu optimieren, indem Sie Skripte minimieren und verzögern, was die Ladezeiten reduziert und die PageSpeed-Werte verbessert.

In diesem Artikel führen wir Sie durch die Schritte zur Behebung dieser Probleme auf Ihrer WordPress-Site.

Was sind renderblockierende JavaScript- und CSS-Dateien?

Renderblockierendes JavaScript und CSS sind Dateien, die verhindern, dass eine Website eine Webseite anzeigt, bevor diese Dateien geladen werden.

Jede WordPress-Website hat ein Theme und Plugins, die JavaScript- und CSS-Dateien auf der Vorderseite Ihrer Website hinzufügen.

Diese Skripte können die Ladezeit Ihrer Website erhöhen und auch das Rendern der Seite blockieren.

Der Browser eines Benutzers muss diese Skripte und CSS laden, bevor der Rest des HTML auf der Seite geladen wird. Das bedeutet, dass Benutzer mit einer langsameren Verbindung einige Millisekunden länger warten müssen, um die Seite zu sehen.

Diese Skripte und Stylesheets werden als renderblockierendes JavaScript und CSS bezeichnet.

WordPress-Website-Besitzer, die eine Google PageSpeed-Punktzahl von 100 erreichen möchten, müssen dieses Problem beheben, um diese perfekte Punktzahl zu erzielen.

Was ist ein Google PageSpeed Score?

Google PageSpeed Insights ist ein Website-Geschwindigkeitstest-Tool, das von Google entwickelt wurde, um Website-Besitzern bei der Optimierung und dem Testen ihrer Websites zu helfen. Dieses Tool testet Ihre Website anhand der Geschwindigkeitsrichtlinien von Google und bietet Vorschläge zur Verbesserung der Ladezeit Ihrer Seiten.

Es zeigt Ihnen eine Punktzahl basierend auf der Anzahl der Audits, die Ihre Website besteht.

Die meisten Websites erzielen irgendwo zwischen 50 und 70. Einige Websitebesitzer fühlen sich jedoch gezwungen, 100 (die höchste Punktzahl, die eine Seite erreichen kann) zu erreichen.

Benötigen Sie wirklich die perfekte „100“ Google PageSpeed-Punktzahl?

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

Denken Sie daran, dass Geschwindigkeit nur eine von vielen Website-Suchmaschinenoptimierungs- (SEO)-Metriken ist, die Google helfen zu bestimmen, wie Ihre Website eingestuft wird. Geschwindigkeit ist so wichtig, weil sie die Benutzererfahrung auf Ihrer Website verbessert.

Eine bessere Benutzererfahrung erfordert weit mehr als nur Geschwindigkeit. Sie müssen auch nützliche Informationen, eine bessere Benutzeroberfläche und ansprechende Inhalte mit Text, Bildern und Videos anbieten.

Dann sollte es Ihr Ziel sein, eine schnelle Website zu erstellen, die ein großartiges Benutzererlebnis bietet.

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

In diesem Sinne werden wir uns ansehen, was Sie tun können, um render-blocking JavaScript und CSS in WordPress zu beheben. Wir werden 2 Methoden behandeln, die render-blocking Ressourcen in WordPress eliminieren. Sie können diejenige wählen, die am besten für Ihre Website funktioniert:

• Methode 1: Renderblockierende Skripte und CSS mit WP Rocket beheben
• Methode 2: Render-Blocking-Skripte und CSS mit Autoptimize beheben
• Was tun, wenn renderblockierendes JavaScript und CSS immer noch vorhanden sind

Tauchen wir ein und bringen Ihre Website reibungslos zum Laufen!

Methode 1: Renderblockierende Skripte und CSS mit WP Rocket beheben

Für diese Methode verwenden wir das WP Rocket Plugin.

Es ist das beste WordPress-Caching- und Optimierungs-Plugin auf dem Markt und ermöglicht es Ihnen, die Leistung Ihrer Website schnell zu verbessern, ohne technische Kenntnisse oder eine komplizierte Einrichtung.

Zuerst müssen Sie das WP Rocket Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.

WP Rocket funktioniert sofort: Es aktiviert das Caching mit optimalen Einstellungen für Ihre Website. Mehr dazu erfahren Sie in unserem vollständigen Leitfaden, wie Sie WP Rocket in WordPress richtig installieren und einrichten.

Standardmäßig werden die JavaScript- und CSS-Optimierungsoptionen nicht aktiviert. Diese Optimierungen können das Erscheinungsbild oder einige Funktionen Ihrer Website beeinträchtigen, weshalb das Plugin es Ihnen ermöglicht, diese Einstellungen optional zu aktivieren.

Um dies zu tun, müssen Sie die Seite Einstellungen » WP Rocket besuchen und zum Tab 'Dateiooptimierung' wechseln.

Scrollen Sie von hier aus einfach zum Abschnitt 'CSS-Dateien' und aktivieren Sie die Kontrollkästchen neben 'CSS minimieren', 'CSS-Dateien kombinieren' und 'CSS-Bereitstellung optimieren'.

Für die Einstellung „CSS-Bereitstellung optimieren“ empfiehlt WP Rocket die Wahl der Methode „Ungenutztes CSS entfernen“.

Neben der besten Leistung kann es helfen, die Seitengröße und HTTP-Anfragen zu reduzieren.

Als Nächstes müssen Sie zum Abschnitt 'JavaScript-Dateien' scrollen.

Von hier aus können Sie alle Optionen für maximale Leistungsverbesserung überprüfen.

Sie können JavaScript-Dateien minimieren und kombinieren, so wie Sie es für CSS getan haben.

Sie können auch verhindern, dass WordPress die Datei  jQuery Migrate lädt. Dieses Skript wird geladen, um die Kompatibilität für Plugins und Themes bereitzustellen, die alte Versionen von jQuery verwenden.

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

Scrollen Sie als Nächstes ein wenig weiter nach unten und aktivieren Sie die Kontrollkästchen neben den Optionen „JavaScript verzögert laden“ und „Sicherer Modus für jQuery“.

Diese Optionen verzögern das Laden von nicht wesentlichen JavaScripts, und der jQuery-Sicherheitsmodus 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 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 vielleicht auch den Cache leeren in WP Rocket, bevor Sie Ihre Website erneut mit Google PageSpeed Insights testen.

Auf unserer Testseite konnten wir auf Desktop-Geräten eine Punktzahl von 100 % erreichen, und das Renderblocking-Problem wurde sowohl in den mobilen als auch in den Desktop-Bewertungen behoben.

Methode 2: Render-Blocking-Skripte und CSS mit Autoptimize beheben

Für diese Methode verwenden wir ein separates Plugin, das speziell zur Verbesserung der Auslieferung der CSS- und JS-Dateien Ihrer Website entwickelt wurde. Obwohl dieses Plugin die Arbeit erledigt, verfügt es nicht über die anderen leistungsstarken Funktionen, die WP Rocket bietet.

Das erste, was Sie tun müssen, ist, Autoptimize zu installieren und zu aktivieren, ein kostenloses Plugin zur Beschleunigung der Website-Leistung. Wenn Sie Hilfe benötigen, sehen Sie sich gerne unseren Schritt-für-Schritt-Leitfaden an, wie Sie ein WordPress-Plugin installieren.

Nach der Aktivierung müssen Sie zu Einstellungen » Autoptimize gehen, um die Plugin-Einstellungen zu konfigurieren.

Zuerst aktivieren wir das Kontrollkästchen neben 'JavaScript-Code optimieren' im Abschnitt 'JavaScript-Optionen'. Hier müssen Sie sicherstellen, dass die Option 'JS-Dateien aggregieren' deaktiviert ist.

Als Nächstes möchten Sie nach unten zum Feld 'CSS-Optionen' scrollen und die Option 'CSS-Code optimieren' aktivieren.

Stellen Sie einfach sicher, dass die Option „CSS-Dateien aggregieren“ deaktiviert ist.

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

Testen Sie Ihre Website mit dem PageSpeed Insights Tool. Mit diesen Grundeinstellungen haben wir das Problem mit renderblockierendem CSS auf unserer Demoseite erfolgreich behoben.

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

Zum Beispiel können Sie dem Plugin erlauben, Inline-JS einzuschließen 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 Plugin-Cache zu leeren.

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

Wie funktioniert Autoptimize?

Autoptimize aggregiert alle eingereihten JavaScripts und CSS. Danach erstellt es minifizierte CSS- und JavaScript-Dateien und liefert gecachte Kopien asynchron oder verzögert an Ihre Website.

Dies ermöglicht es Ihnen, das Problem mit renderblockierenden Skripten und Stilen zu beheben. Beachten Sie jedoch, dass dies auch die Leistung oder das Erscheinungsbild Ihrer Website beeinträchtigen kann.

Was tun, wenn renderblockierendes JavaScript und CSS immer noch vorhanden sind

Abhängig davon, wie die Plugins und Ihr WordPress-Theme JavaScript und CSS verwenden, kann es schwierig sein, alle Probleme mit renderblockierendem JavaScript und CSS vollständig zu beheben.

Während die oben genannten Tools helfen können, benötigen Ihre Plugins möglicherweise bestimmte Skripte, um ordnungsgemäß mit einer anderen Prioritätsstufe zu funktionieren. In diesem Fall können die obigen Lösungen die Funktionalität solcher Plugins beeinträchtigen oder dazu führen, dass sie sich unerwartet verhalten.

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

Sie können unseren ultimativen Leitfaden zur Steigerung der WordPress-Geschwindigkeit und -Leistung für weitere Informationen lesen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie renderblockierendes JavaScript und CSS in WordPress beheben. Möglicherweise möchten Sie auch unseren Artikel über die einfache Behebung des Fehlers „Diese Website kann nicht erreicht werden“ und unsere Expertenliste der häufigsten WordPress-Fehler und deren Behebung lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.