Die besten Möglichkeiten zur Beseitigung von Render Blocking Resources in WordPress (9 Schritte)

Du kannst Rendering-Blocking-Ressourcen in WordPress beseitigen, indem du JavaScript aufschiebst und kritische CSS-Stile inlinst. Dies kann mit den meisten Cache-Plugins Autoptimize und Async JavaScript erfolgen.

Elementor und Divi verfügen ebenfalls über integrierte Einstellungen, mit denen Rendering-blockierende Ressourcen mithilfe von Defer und Inline-CSS beseitigt werden können. Das Entfernen von ungenutztem CSS, JavaScript und Code von Drittanbietern kann ebenfalls helfen, das Problem zu beheben.

Überprüfe deinen Bericht, finde heraus, welche Dateien Probleme verursachen (und ob sie von bestimmten Plugins oder JavaScript von Drittanbietern herrühren), finde heraus, ob es sich um CSS oder JavaScript handelt, und befolge die Tipps in diesem Lernprogramm.

1. Render Blocking Resources finden

Von wo aus werden deine Rendering-blockierenden Ressourcen geladen? Wie lang ist die Übertragungszeit und wie hoch sind die möglichen Einsparungen? Grenze die Dateitypen ein, die Probleme verursachen, damit du weißt, worauf du dich konzentrieren musst.

Gemeinsame Render-Blocking-Ressources

• CSS-Dateien
• JavaScript-Dateien
• Code von Drittanbietern
• Plugins
• jQuery
• Schriftarten
• Animationen
• Seitenersteller
• WooCommerce

2. JavaScript aufschieben

JavaScript sollte verzögert werden, damit es nicht zu Rendering-Blockaden führt.

WP Rocket, LiteSpeed Cache und die meisten Cache-Plugins verfügen über eine Option zum Verschieben von JavaScript. Mit Autoptimize und Async JavaScript kannst du auch JavaScript und Inline-CSS verschieben, und sie leisten oft bessere Arbeit bei der Behebung von Render Blocking Ressources als klassische Cache Plugins – beide sind einen Test wert!

In den Einstellungen für automatische Optimierung kannst du wählen, ob du JS-Dateien aggregieren (kombinieren) oder aufschieben (verspätet laden) willst. Ich empfehle, jede dieser Einstellungen zu testen und die Ergebnisse zu überprüfen. Die meisten dieser Plugins enthalten eine Option, mit der du JavaScript von der Aufschiebung ausschließen kannst, falls sie Fehler erhalten.

3. Kritisches CSS einbinden

Die meisten Cache-Plugins verfügen auch über eine Option zur Optimierung der CSS-Auslieferung (LiteSpeed Cache bietet die Option, CSS asynchron zu laden, sowie mehrere andere Inline-Optionen in den CSS/JS-Einstellungen).

Wenn du diese Option in WP Rocket aktivierst, wird kritisches CSS generiert und dann „alle anderen CSS-Dateien asynchron geladen… ohne Render-Blocking“.

Vergewissere dich zunächst, dass das kritische CSS funktioniert und nicht zu Layoutverschiebungen (was häufig der Fall ist) oder FOUT (Aufblitzen von ungestyltem Text beim Öffnen Ihrer Website) führt. Um dies zu beheben, musst du möglicherweise den Cache leeren oder kritische CSS in WP Rocket sowie in deinen Page Builder (falls du einen verwendest) neu generieren. Möglicherweise musst du auch Dateien von der optimierten CSS-Auslieferung ausschließen, indem du das WP Rocket-Helfer-Plugin verwendest.

Es ist auch eine gute Idee, ein kritisches Fallback-CSS festzulegen:

• Aktiviere die optimierte CSS-Auslieferung.
• Scanne deine Website mit PurifyCSS.
• Lade das kombinierte, gereinigte und verkleinerte CSS herunter.
• Kopiere den Code und füge ihn in deine kritische Fallback-CSS-Einstellung ein.

Mit Autoptimize kannst du auch Inline-CSS, Inline-JavaScript und Inline-CSS aggregieren und verschieben. Du kannst diese Funktionen testen, aber sie können deine WordPress-Website beschädigen und sich mit Cache-Plugins überschneiden.

Wenn nichts davon funktioniert, kannst du das FlyingPress-Plugin von Gijo Varghese ausprobieren. Er ist der Administrator der WP Speed Matters Facebook-Gruppe und viele Mitglieder sagen, dass es bessere Ergebnisse als WP Rocket liefert.

4. Ungenutztes CSS und JavaScript entfernen

Du hast wahrscheinlich schon von Asset CleanUp und Perfmatters gehört.

Damit kannst du CSS und JavaScript entfernen, wenn sie nicht verwendet werden. Das Entfernen von CSS und JavaScript kann einen großen Einfluss auf die Rendering-Blocking-Ressourcen sowie auf deine Gesamtbewertung haben.

Schritt 1: Entferne ungenutztes CSS mit WP Rocket oder LiteSpeed

WP Rocket und LiteSpeed Cache verfügen über Optionen zum Entfernen von ungenutztem CSS in den Datei-Optimierungseinstellungen von WP Rocket und von einzigartigem CSS (UCSS) in den CSS-Optimierungseinstellungen von LiteSpeed Cache.

Schritt 2: Verwende Asset CleanUp oder Perfmatters

Mit diesen beiden Plugins kannst du ungenutztes CSS/JavaScript deaktivieren, wenn es nicht geladen werden muss.

Ich persönlich benutze Perfmatters, weil das UI/UX benutzerfreundlicher ist. In der Pro-Version von Asset CleanUp kannst du jedoch benutzerdefinierte CSS entladen, während dies in der kostenlosen Version (und in Perfmatters) nicht möglich ist.

Wenn du Perfmatters verwendest, aktiviere den Skriptmanager in den Plugin-Einstellungen. Wenn du Asset CleanUp verwendest, aktiviere den Testmodus, mit dem du das Entladen von Assets testen kannst, ohne deine Website zu zerstören (nur du siehst, ob es sichtbare Änderungen gibt). Perfmatters hat keinen Testmodus, so dass du während des Tests auf deiner Live-Site nach sichtbaren Fehlern suchst oder eine Staging-Site für den Test erstellen musst.

Rufe in Perfmatters eine beliebige Seite deiner Website auf und klicke auf den „Skript-Manager“ in der Verwaltungsleiste. Wenn du Asset CleanUp verwendest, bearbeite eine Seite und du wirst den Abschnitt Asset CleanUp am unteren Rand des Editors sehen. Gehe durch mehrere Seiten/Beiträge, die verschiedene Arten von Plugins, Schriftarten, JavaScript, CSS usw. laden. Stelle sicher, dass du Assets in verschiedenen Bereichen deiner WordPress-Website entlädst.

Jetzt ist es an der Zeit, die Dinge zu deaktivieren, die nicht verwendet werden. Je nachdem, welches Plugin du verwendest, kannst du Dateien deaktivieren:

• Überall, in der aktuellen URL, oder mit Regex.
• Überall, außer aktuelle URL, Seiten oder Beiträge.
• Bei Dateien bei denen du dir nicht sicher bist, solltest du ein wenig recherchieren (z. B. mit der Google-Suche), bevor du sie deaktivierst.

Beispiele:

• Deaktiviere das Slider-Plugin auf Seiten, auf denen kein Slider verwendet wird.
• Deaktiviere das Rich-Snippets-Plugin auf Seiten, die keine Rich-Snippets verwenden.
• Deaktiviere das Kontaktformular-Plugin auf Seiten, die kein Kontaktformular haben.
• Deaktiviere WooCommerce Skripte und Styles auf nicht E-Commerce Seiten.
• Deaktiviere Affiliate-Link-Management-Plugin auf Seiten, die keine Affiliate-Links verwenden.
• Deaktiviere Social-Sharing-Plugin auf allen Seiten (nur für Blog-Posts aktivieren).
• Deaktiviere ungenutzte Funktionen im Page Builder (siehe diesen Beitrag für Elementor).

5. Schriften lokal hosten und vorladen

Manchmal können Render Blocking Resources durch Schriftarten verursacht werden.

Die Optimierung von Schriftarten kann mehrere Fehler in PageSpeed Insights im Zusammenhang mit Render-Blocking, CLS und Drittanbieter-Code beheben. Unabhängig davon, ob Schriftarten Fehler verursachen, ist es immer schneller, Schriftarten lokal auf deinem Server zu hosten und vorzuladen.

Hoste Schriftarten lokal, indem du Schriftarten von Google Fonts herunterladest. Lade nur die Schriftfamilien, -schnitte, -varianten und -symbole herunter, die du unbedingt benötigst. Anschließend konvertiere sie mit einem Tool in das WOFF2-Format und füge sie in dein CSS ein. Du kannst auch das OMGF-Plugin ausprobieren, was vielleicht einfacher ist. Dieses lädt die Schriftarten lokal von deinem Server und nicht von Websites Dritter (wie fonts.gstatic.com).

PageSpeed Insights teilt dir mit, welche Schriftarten in den Preload Key Requests vorgeladen werden sollen, was du in den meisten Cache-Plugins, manuell mit einer einfachen Code-Zeile oder mit dem Pre* Party Hints Plugin tun kannst.

6. Render Blocking Resources eliminieren von Elementor/Divi

Sowohl Elementor als auch Divi haben Einstellungen, die Render Blocking Ressourcen reduzieren.

Elementor: Aktiviere in deinem Elementor Einstellungen das Improved CSS Loading und Font-Awesome Inline, um CSS und Schriften inline zu laden, so dass sie nicht gerendert werden müssen. Verbessertes Asset-Laden entfernt ungenutztes CSS/JavaScript, was die Kern-Webvitalität in mehreren Bereichen verbessern kann.

Divi: Im Divi Theme kannst du auch Rendering blockierende Ressourcen reduzieren. Indem du kritische CSS aktivierst, CSS/JavaScript verzögert lädst und bei Google Fonts dan Inline-Laden aktivierst.

7. Vermeide jQuery-lastige Plugins

Wenn du ein jQuery-lastiges Plugin in deinem Bericht über Render-Blocking-Ressourcen findest, solltest du eine Alternative finden.

Ich empfehle, meine Liste der häufigsten langsamen Plugins durchzusehen und die WP Hive Chrome Extension zu installieren. Diese zeigt dir, ob ein Plugin Auswirkungen auf die Speichernutzung und PageSpeed Insights hat, wenn du das WordPress-Repository durchsuchst. Query Monitor kann ebenfalls langsame Plugins aufspüren.

Viele Leute wechseln von Yoast zu Rank Math, von Revolution Slider zu Smart Slider, von Elementor zu Oxygen und so weiter. Web Vitals berücksichtigt definitiv leichtgewichtige Plugins.

Es kann sogar möglich sein, jquery-migrate in Perfmatters oder Asset CleanUp zu deaktivieren.

8. Leichtgewichtige Formulare und Slider verwenden

Wenn Formulare oder Slider Elemente Rendering-Probleme verursachen, versuche Fluent Forms (Formulare) und Smart Slider oder MetaSlider (Bild-Slider). Sie sind viel schlanker als CF7, Revolution Slider usw.

Sie können auch überall deaktiviert werden, außer auf Seiten, die tatsächlich Formulare/Slider verwenden, indem du Perfmatters oder Asset CleanUp verwendest. Schieberegler sollten generell vermieden werden, insbesondere auf mobilen Geräten.

9. Reduziere Drittanbieter Code

Standardmäßig blockiert der Code von Drittanbietern, der zu deiner WordPress-Website hinzugefügt wird, den Rendering-Prozess.

Ein Teil des Codes von Drittanbietern lässt sich leicht optimieren, aber im Allgemeinen ist es am besten, zu viel davon zu vermeiden, vor allem, wenn es sich um Werbung, Tag Manager und umfangreiche Social-Sharing-Plugins in deinem Blog handelt.

Beispiele für Code von Drittanbietern

• Google Fonts – hoste sie lokal und lade sie vor.
• Google Analytics – hoste lokal und verwende ein lokales Analytics-Plugin.
• Google Tag Manager – nicht zu viele Tags verwenden und nicht zu viel verfolgen.
• Eingebettete Videos – lade Iframes mit Verzögerung und verwende ein Vorschaubild.
• Google Maps – Lade Iframes mit Verzögerung oder verwende einen Screenshot der Karte.
• Gravatare (in deinen Kommentaren) – hoste lokal und verwende WP User Avatar.
• Google AdSense – reserviere Platz für Anzeigen und lege die Größe der Anzeigen fest.

JavaScript von Drittanbietern verzögern

Die Verzögerung von JavaScript bis zur Benutzerinteraktion kann deine anfängliche Ladezeit erheblich verbessern. Du kannst dies mit Flying Scripts oder WP Rockets Option zur Verzögerung der JavaScript-Ausführung erreichen. WP Rocket hat eine praktische Liste von JavaScript-Dateien, die automatisch in seinem Plugin verwendet werden. Wenn du ein Flying Scripts oder ein anderes Plugin verwendest, kopiere diese Liste. Vielleicht kannst du auch andere JavaScript-Dateien wie //cdnjs.cloudflare.com verzögern. Ich persönlich habe meine Kommentare verzögert (sowohl wpDiscuz als auch Gravatars).

Browser-Ressourcen-Hinweise verwenden

Preconnect und Prefetch helfen Browsern, Code von Drittanbietern zu antizipieren und schneller zu laden. Preconnect wird normalerweise nur bei CDNs und Schriftarten durchgeführt. Prefetch sollte generell bei allen Codes von Drittanbietern durchgeführt werden (kopiere die Domains in deinem PageSpeed Insights-Bericht oder sehe dir diese Liste der gängigen Domains zum Prefetch an). Du kannst Preconnect und Prefetch manuell, in Perfmatters, WP Rocket (Preconnect von CDNs/Schriften erfolgt automatisch) oder anderen Browser Resource Hint Plugins hinzufügen.

Teste deine Website erneut auf Render-Blocking-Ressourcen

Lasse deine WordPress-Website durch PageSpeed Insights oder Lighthouse laufen und überprüfe sie auf Render-Blocking-Ressourcen.

Ich habe festgestellt, dass du mit den richtigen Optimierungen nur eine einzige Render-Blocking-Ressource für Autoptimize sehen solltest. Ansonsten sollten dieses Plugin und die, in diesem Leitfaden aufgeführten Tipps die meisten Probleme beheben.

Häufig gestellte Fragen

Wenn du immer noch Fehler oder Fragen zu Rendering-Blocking-Ressourcen hast, sende mir einen Kommentar mit deinem Bericht (nicht deine Website-URL, sonst wird er als Spam markiert) und ich kann ihn mir ansehen.

Liebe Grüße!
Joe