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

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.

render blocking resources in wp entfernen

Ü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.

Render Blocking Ressourcen in wordpress entfernen

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.

unbenutztes css in chrome developer tools
Finden Sie Rendering-blockierende Dateien in Chrome Entwicklungswerkzeuge → Quellen → Abdeckung

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!

render blocking resources mit defer eliminieren
Quelle: WP Speed Matters Facebook-Gruppe
JavaScript Deferred laden mit wp-rocket
Javascript in WP Rocket aufschieben
Lade JS Deferred mit LiteSpeed Cache
JavaScript im LiteSpeed-Cache aufschieben
SG-Optimierer mit aufgeschobener JS Rendering-Blockierung
JavaScript im SG-Optimierer aufschieben
Async JavaScript
JavaScript in Async-JavaScript aufschieben
Defer JavaScript Autoptimize
JavaScript in Autoptimize aufschieben

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.
Webseite PurifyCSS
wp-rocket kritische CSS Einstellungen

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.

Unbenutztes CSS mit WP-Rocket entfernen

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.

Perfmatters Activate Script Manager

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).
Remove Contact Form JavaScript
Deaktivieren nicht verwendeter Plugins mit Asset CleanUp
Social Media Sharing Plugins deaktivieren
Deaktivieren unbenutzter Plugins mit Perfmatters
elementor css und javascript entfernen
Liste der potentiellen CSS/JS, die in Elementor entfernt werden können

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).

Die Schriften meiner Webseite lokal laden

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.

wp-rocket schriften preloaden auf der webseite

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.

elementor einstellungen um code schneller zu laden

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.

render blocking ressources für divi entfernen

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.

perfmatter zeigt jquery plugins

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.
reduziere den einfluss von drittanbieter code

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).

verzögerung der javascript code auslösung

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.

Eliminate Render Blockierende Ressourcen Audit

Häufig gestellte Fragen

Wie beseitige ich Rendering-blockierende Ressourcen in WordPress?

Versuche, JavaScript zu verschieben, kritisches CSS zu generieren und es zu inlinen (in der Regel durch ein Cache-Plugin oder Autoptimize). Das Verkleinern von CSS- und JavaScript-Dateien und das Verzögern von Drittanbieter-Code können ebenfalls Rendering-Blocking-Ressourcen in WordPress beseitigen.

Wie beseitigt man Rendering-blockierende Ressourcen in WP Rocket?

Aktiviere Load JavaScript Deferred und teste die Einstellung Optimize CSS Delivery in WP Rocket. Prüfe, ob dies FOUC (Flash of Unstyled Content) verursacht oder die kumulative Layoutverschiebung erhöht. Möglicherweise musst du kritische CSS neu generieren oder ein kritisches Fallback-CSS in WP Rocket mit einem Tool wie PurifyCSS einrichten.

Wie beseitige ich Rendering-blockierende Google Fonts?

Wenn du Google Fonts lokal hosten und vorladest, kannst du in der Regel Render-Blocking-Ressourcen im Zusammenhang mit Schriftarten beheben.

Wie beseitige ich Rendering-Blocking-Ressourcen in Autoptimize?

Installiere Autoptimize und aktiviere die Einstellungen für die Optimierung von CSS- und JavaScript-Code. Aktiviere auch die Einstellungen für das Zusammenfassen von CSS- und JavaScript-Dateien. Diese sollten standardmäßig aktiviert sein.

Wie beseitige ich Rendering-Blocking-Ressourcen ohne ein WordPress-Plugin?

Ohne ein WordPress-Plugin musst du JavaScript verschieben, kritisches CSS generieren und CSS manuell einbinden. Außerdem solltest du Schriftarten lokal hosten und vorladen. Und schließlich solltest du ein Tool wie PurifyCSS verwenden, um deine CSS-Code zu bereinigen und die Domänen von Drittanbietern auf deiner Website zu optimieren.

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

author image

Die meisten Hosting-Empfehlungen sind Schrott. Ich verwende Rocket.net mit kostenlosem Cloudflare Enterprise und du kannst dich durch meine Website klicken, die Antwortzeit meines Servers testen oder meinen Rocket.net Erfahrungen lesen.

Erhalte Insider-Wissen

Autor Joe Speedmaster
Joe Speedmaster

Joe ist Inhaber und Chefredakteur. Er beschreibt sich selbst als WordPress Nerd der PageSpeed Optimierung. Mit +5 Jahre Erfahrung im Bereich WordPress, CDN, Hosting und Webentwicklung ist Joe nebenberuflich als Freelancer und Publisher tätig. Mit ehrlichen Erfahrungsberichten möchte er maximalen Mehrwert für seine Leser generieren.