Wie Render-Blocking-Ressourcen beseitigen WordPress [2024] 💥
Google PageSpeed oder GtMetrix haben möglicherweise empfohlen, dass Sie Render-Blocking-Ressourcen eliminieren, wenn Sie einen Test auf ihren Websites durchgeführt haben. Das Verzögern von JavaScript und das Einbetten wichtiger CSS-Stile können verwendet werden, um Render-blockierende Ressourcen in WordPress zu eliminieren. Dies ist in vielen Cache-Plugins möglich, einschließlich Autoptimize und Async JavaScript. Elementor und auch die Divi-Design verfügen über integrierte Einstellungen, um Render-Blocking-Ressourcen durch die Verwendung von Inline-CSS und zurückstellen von Javascript und CSS.
1. Entfernen Sie Render-Blocking-Dateien in WP mit dem Plugin
Obwohl dafür mehrere gute Cache-Plugins verfügbar sind, empfehle ich dringend, WP-Rocket dafür. Der Grund dafür ist die Tatsache, dass das Plugin sehr einfach zu bedienen und zu verstehen ist. Außerdem funktioniert alles genau so wie es soll. Es gibt keine kostenlose Version dieses Plugins, aber es kostet nicht viel und ist sein Geld wert.
Anzeige
Okay, installiere das Plugin über dein Backend und aktiviere es. Dieses Plugin erledigt seine Aufgabe, ohne etwas in Bezug auf das Caching von Dateien einzustellen, aber um JS und CSS zu definieren, müssen Sie zu "Einstellungen" gehen. Gehen Sie dann zum Kapitel "Dateioptimierung". Scrollen Sie einfach nach unten und markieren Sie die zu verschiebenden Kästchen. Vergessen Sie nicht, die Einstellungen zu speichern. Siehe Screenshot unten.
Screenshot zum Verzögern von CSS
Wie Sie auf dem obigen Screenshot sehen können, gibt es auch eine Option, um async anstelle von defer zu verwenden. Dieses Plugin hat alles und ist einfach zu bedienen. Überprüfen Sie jedoch immer, wie Ihre Website auf die verschiedenen Optionen reagiert, da nicht alle Optionen auf alle verschiedenen Themen angewendet werden können, wenn die Website beschädigt wird.
2. Entfernen Sie Render-Blocking-Dateien in WP mit Elementor
Viele Leute arbeiten gerne mit Elementor. Falls Sie den Elementor-Seitenersteller in Ihrer Website haben, können Sie das Render-Blocking-Problem sofort damit lösen. Auch für diejenigen, die noch nicht mit Elementor arbeiten, empfiehlt sich die Installation des Seitenersteller auf Ihrer Website. Auf diese Weise lösen Sie das Render-Blocking-Problem und haben gleichzeitig einen Top-Page-Builder in Ihrer Website, der Ihnen die Arbeit erleichtert.
Aktivieren Sie Font-Awesome Inline und verbessertes CSS-Laden in Ihrem Elementor. Gehen Sie zu „Elementor“ >> „Einstellungen“ >> „Experimente“. Auf diese Weise können Sie CSS und Schriftarten direkt laden, sodass sie nicht renderblockierend sind. Verbessertes Laden von Assets kann ungenutztes CSS/JavaScript entfernen, was dazu beitragen kann, grundlegende Web-Vitals in mehreren Bereichen zu verbessern.
3. Entfernen Sie Render-Blocking-Dateien in WP mit Divi Theme
Und wer kennt nicht die Divi Thema noch? Das beliebteste Theme für Wordpress ist seit Jahren zu Recht. Sie können das Render-Blocking-Problem sofort in Divi selbst lösen.
Die Leistungseinstellungen von Divi sind in der Lage, Render-Blocking-Ressourcen zu eliminieren, indem kritisches CSS/JavaScript angewendet und das Laden von Google Fonts verbessert wird, indem Ihre Schriftarten inline geladen werden.
4. Entfernen Sie Render-Blocking-Dateien in der HTML-Site
Wenn Sie mit HTML arbeiten, sind keine Plugins, Divi oder Elementor verfügbar, und Sie müssen Dateien, die das Rendering blockieren, von Hand entfernen. Bei einer Wordpress-Website wäre das viel Arbeit, zudem muss alles über ein Child-Theme erledigt werden, da sonst bei einem WP-Upgrade alles überschrieben würde. Wie man Render-Blocking-Ressourcen für HTML eliminiert, kann man in einem weiteren kurzen Artikel von mir nachlesen.
Render-blockierende Dateien finden
Wenn Sie ein gutes Plugin verwenden, das die Arbeit für Sie erledigt, besteht keine Notwendigkeit, die Render-blockierenden Dateien zu finden. Verwenden Sie ein Plugin, wenn Sie die Probleme nur schnell lösen möchten. Der schnellste Weg, alle Ihre Renderblocker-Dateien zu identifizieren, ist die Nutzung des kostenlosen Dienstes auf WebPageTest.
Den kritischen Rendering-Pfad bestimmen und kritische Ressourcen analysieren
- Führen Sie einen Test auf WebPageTest durch und klicken Sie dann auf das "Wasserfall"-Bild.
- Konzentrieren Sie sich auf alle Ressourcen, die vor der grünen „Start Rendering“-Zeile angefordert und heruntergeladen wurden.
Analysieren Sie die Wasserfallansicht. Suchen Sie nach CSS- und JavaScript-Dateien, die vor der grünen Zeile „Rendering starten“ erforderlich sind, aber für das Laden von Inhalten „above the fold“ nicht unbedingt erforderlich sind. Siehe Screenshot unten.
Sobald Sie (möglicherweise) eine Render-blockierende Ressource identifiziert haben, testen Sie sie, indem Sie sie entfernen. Auf diese Weise können Sie feststellen, ob Inhalte "above the fold" betroffen sind. Es ist möglich, Skripte aus kritischen Dateien zu entfernen. Auf diese Weise können Sie sehen, wie sich die wechselnden Elemente der Website auf Ihre Erfahrung auswirken.
Sie können diese Ressourcen auch auf andere Weise verbessern. Sie können auch erwägen, Dateien zu kombinieren, die keine kritischen JavaScript-Dateien sind. Dann können Sie sie verschieben, indem Sie diese Dateien unten auf Ihrer Webseite hinzufügen.
Sie können die Anzahl der CSS-Dateien reduzieren, die Sie für nicht kritische Dateien haben, indem Sie sie komprimieren und kombinieren. Es kann eine Datei erstellt werden, die schneller herunterzuladen ist und sich weniger auf die Wiedergabegeschwindigkeit Ihrer Seite auswirkt.
Häufige Render-Blocking-Ressourcen sind:
- CSS-Dateien
- JS-Dateien
- Drittanbieter-Code
- Plugins
- jQuery
- Pagebuilder
- Schriftarten
- Animationen
- WooCommerce
Anzeige