Wenn du deine WordPress-Seite schon einmal über Google PageSpeed Insights laufen hast lassen, hat Google dir wahrscheinlich gesagt, dass du das Render-Blocking von Ressourcen auf deiner WordPress-Seite beseitigen musst. Tatsächlich könnte das der Grund dafür sein, dass du gerade jetzt diesen Beitrag liest.

Das wirft wahrscheinlich zwei Fragen auf:

  1. Was sind überhaupt Render-Blocking-Ressourcen?
  2. Wie kann man Render-Blocking-Ressourcen in WordPress eliminieren?

In diesem Beitrag werden wir beide Fragen für dich beantworten. Folgendes werden wir in diesem Beitrag behandeln:

Was bedeutet „Render-Blocking von Ressourcen eliminieren“?

Um zu verstehen, was Render-Blocking-Ressourcen sind und warum sie die Ladezeiten deiner Webseite beeinträchtigen, müssen wir mit einem grundlegenden Blick darauf beginnen, wie ein Webbrowser eine Webseite rendert.

Wenn ein Besucher auf deiner Webseite landet, beginnt sein Webbrowser im Grunde genommen oben im Code deiner Webseite und liest sich nach unten. Von oben nach unten, verstanden?

Wenn er dabei auf eine CSS- oder JavaScript-Datei stößt, muss er das „Lesen“ beenden, während er darauf wartet, diese Datei herunterzuladen und zu verarbeiten. Die Zeit, die es mit dem Herunterladen und Analysieren dieser Ressourcen verbringt, könnte für etwas viel produktiveres verwendet werden, wie das Laden des Teils des Inhalts deiner Webseite, der sofort sichtbar ist, wenn jemand auf der Seite landet.

Betrachten wir ein extremes Beispiel, um zu zeigen, warum dies ein Problem sein kann.

Nehmen wir an, du hast diesen coolen JavaScript-Effekt in der Fußzeile deiner Webseite. Er wird von „coolfooter.js“ unterstützt, einem Skript, auf das oben im Code deiner Webseite verwiesen wird (auch wenn der Effekt in der Fußzeile steht, so dass Besucher ihn erst sehen, wenn sie zur Fußzeile scrollen).

Ein sehr grobes Layout für den Code deiner Webseite könnte also etwa so aussehen:

Und hier ist der Grund, warum dies ein Problem ist:

Wenn ein Besucher auf deiner Seite landet, beginnt sein Browser von oben nach unten zu lesen. Bevor er also das HTML für den oben genannten Inhalt deiner Webseite analysieren und rendern kann, muss er warten, bis er die Datei coolfooter.js heruntergeladen und analysiert hat.

Endergebnis? Es dauert länger, den HTML-Code für den oben genannten Inhalt anzuzeigen, was bedeutet, dass deine Besucher deine Webseite als langsamer wahrnehmen werden.

Wenn Google sagt, dass du Render-Blocking-Ressourcen eliminieren sollst, heißt das im Wesentlichen: „Hey, lade keine unnötigen Ressourcen am Anfang des Codes deiner Webseite, weil es dann länger dauert, bis die Browser der Besucher den sichtbaren Teil deines Inhalts herunterladen.“

Mit den Tipps in diesem Beitrag kannst du mit dem Laden bestimmter CSS- und JavaScript-Ressourcen warten, bis der sichtbare Teil deiner Seite bereits geladen ist.

Was sind Render-Blocking-Ressourcen?

Wenn wir uns auf Render-Blocking-Ressourcen beziehen, sprechen wir normalerweise davon:

Es ist wichtig, zu verstehen, dass nicht alle CSS- und JavaScript-Dateien Render-Blocking-Ressourcen aufweisen.

So ist es beispielsweise wichtig, dass du dein kritisches CSS in der Nähe des oberen Randes laden musst, da deine Besucher sonst ein so genanntes Flash of Unstyled Content (FOUC) erleben könnten.

Sind Bilder Render-Blocking-Ressourcen?

Nein, Bilder sind keine Render-Blocking-Ressourcen. Es ist immer noch wichtig, deine Bilder zu optimieren, um ihre Dateigröße zu verringern, aber du brauchst dir keine Gedanken über die Optimierung des Bereitstellungspfades für deine Bilder zu machen.

Wie man testet, ob die Webseite Render-Blocking-Ressourcen hat

Um zu beurteilen, ob deine WordPress-Seite derzeit über Render-Blocking-Ressourcen verfügt oder nicht, kannst du Google PageSpeed Insights verwenden.

Du gibst lediglich die URL ein, die du testen möchtest. Wenn du dann ein Problem mit Render-Blocking Ressourcen hast, listet PageSpeed Insights jede einzelne Ressource im Abschnitt Render-Blocking Ressourcen eliminieren unter Opportunities auf:

Die Render-Blocking Ressourcen eliminieren Nachricht in PageSpeed Insights

Die Render-Blocking Ressourcen eliminieren Nachricht in PageSpeed Insights

Wie lassen sich Render-Blocking-Ressourcen beseitigen?

Keine Sorge, du musst dies nicht manuell tun. Wir werden im nächsten Abschnitt über WordPress-Plugins sprechen, die dabei helfen können, Render-Blocking-Ressourcen zu eliminieren.

Es ist jedoch hilfreich, zu verstehen, was diese Plugins hinter den Kulissen tun, um Render-Blocking-Ressourcen zu eliminieren.

Wie man Render-Blocking JavaScript eliminiert

Es gibt ein paar verschiedene Strategien, um das Render-Blocking JavaScript zu beseitigen. Wir behandeln diese im Detail in unserem Artikel über das Aufschieben des Parsens von JavaScript, aber hier sind die wichtigsten Methoden:

Diese Illustration aus „Growing with the Web“ zeigt den Unterschied sehr gut auf:

JavaScript Async vs. Verschieben

JavaScript Async vs. Verschieben

Der Vorteil der Verwendung von defer ist, dass deine Skripte garantiert in der Reihenfolge ausgeführt werden, in der sie im Code erscheinen.

Async verwendet diesen Ansatz nicht, was manchmal zu Problemen führen kann, wenn du Async auf alle JavaScript-Ressourcen anwendest, da es oft Ressourcen unterbrechen kann, die von Ressourcen abhängig sind, die früher im Dokument erscheinen. Das häufigste Problem, das Async erzeugt, sind defekte jQuery-Ressourcen, die versuchen zu laden, bevor jquery.js dem Dokument hinzugefügt wurde.

Wie man Render-Blocking-CSS eliminiert

Das Eliminieren von Render-Blocking-CSS kann etwas schwieriger sein, da du darauf achten musst, CSS, das für die Darstellung von above the fold Inhalten benötigt wird, nicht zu verzögern. Die ideale Anordnung ist es:

Wie man Render-Blocking CSS und JavaScript-Ressourcen mit WordPress-Plugins eliminiert

Um zu demonstrieren, wie man Render-Blocking-Ressourcen in WordPress eliminieren kann, haben wir eine einfache Testseite eingerichtet, die Render-Blocking CSS und JavaScript enthält. Anschließend führen wir dich durch die Verwendung von zwei verschiedenen Plugin-Lösungen, um das Render-Blocking CSS und JavaScript zu eliminieren:

Zur Referenz: So sieht unsere Testseite vor der Optimierung der CSS- und JavaScript-Bereitstellung aus:

Wie man das Async JavaScript-Plugin konfiguriert

Wie man das Async JavaScript-Plugin konfiguriert

Wenn du die Wirksamkeit deiner Änderungen mit Google PageSpeed Insights testest, solltest du dir bewusst sein, dass Google seine Ergebnisse für mehrere Minuten zwischenspeichert. Im Wesentlichen bedeutet dies, dass, wenn du schnell…

  1. Testest du eine nicht optimierte Webseite
  2. Aktiviere eines der Plugins in diesem Abschnitt
  3. Teste deine Webseite erneut

…dann sieht man noch immer die Ergebnisse der nicht optimierten Webseite, bis Google seinen Cache zurücksetzt. Warte also einige Minuten, bis Google seinen Cache leert, bevor du glaubst, dass das Plugin nicht funktioniert.

Wie du Render-Blocking-Ressourcen mit dem Autoptimize + Async JavaScript-Plugin beseitigst

Autoptimize und Async JavaScript sind zwei separate kostenlose Plugins vom selben Entwickler. Zusammen helfen sie dir, die Bereitstellung von sowohl CSS als auch JavaScript zu optimieren.

Wenn du beide Plugins installiert hast, gehe zu Einstellungen → Async JavaScript und:

Wie man das Async JavaScript-Plugin konfiguriert

How to configure Async JavaScript plugin

Wenn die Async-Option Probleme auf deiner Webseite verursacht, empfehlen wir, jQuery aufzuschieben oder auszuschließen, wofür dir das Plugin eine Option bietet.

Wenn du das Async-JavaScript-Plugin eingerichtet hast, gehe zu Einstellungen → Autoptimize und:

Wie man das Autoptimize Plugin konfiguriert

Wie man das Autoptimize Plugin konfiguriert

Wenn du ein fortgeschrittener Benutzer bist, kannst du mit den zusätzlichen JavaScript- und CSS-Optimierungseinstellungen herumspielen, aber die meisten Webseiten werden mit den Voreinstellungen gut zurechtkommen.

Nach der Konfiguration von Autoptimize und Async JavaScript hat unsere Testseite die Prüfung von PageSpeed Insights „Eliminieren Sie Render-Blocking-Ressourcen“ bestanden:

PageSpeed Insights Ergebnisse mit Autoptimize und Async JavaScript

PageSpeed Insights Ergebnisse mit Autoptimize und Async JavaScript

Wenn du noch mehr dieser Dateien eliminieren möchtest, kannst du Autoptimize weiter verwenden, um dein kritisches CSS manuell einzufügen. Dies erfordert allerdings einige Entwicklungskenntnisse, so dass es nicht etwas ist, das Nicht-Entwickler versuchen sollten.

Du kannst die Plugins auch separat verwenden, wenn du das bevorzugst. Aber da beide Plugins vom selben Entwickler stammen und so gebaut sind, dass sie sich gut miteinander vertragen, ist es für die meisten Seiten am besten, sie zu kombinieren.

Wie man mit WP Rocket Render-Blocking-Ressourcen eliminiert

WP Rocket ist ein beliebtes Premium-Performance- und Caching-Plugin für WordPress.

Normalerweise erlauben wir keine Caching-Plugins auf WordPress-Seiten, die bei Kinsta gehostet werden, da wir das Caching bereits auf Serverebene über den schnellen Nginx FastCGI-Cache für dich übernehmen.

WP Rocket hat jedoch eine spezielle Integration mit Kinsta, die es WP Rocket ermöglicht, sich mit deinem Kinsta-Caching zu vergnügen. Das ist großartig, denn WP Rocket tut viel mehr für die WordPress-Performance als nur das Caching, einschließlich der Unterstützung bei der Beseitigung von Render-Blocking CSS- und JavaScript-Ressourcen auf deiner WordPress-Seite.

Benutzt du WP Rocket? Setze es ein, um deine Webseite mit unserer nahtlosen Integration weiter zu optimieren. Kinsta kostenlos testen.

Sobald du WP Rocket installiert und aktiviert hast, gehst du zur Registerkarte Dateioptimierung. Aktiviere dann diese beiden Optionen:

Wie man WP Rocket konfiguriert

Wie man WP Rocket konfiguriert

Nach der Aktivierung dieser beiden Funktionen bestand unsere Testseite auch die Prüfung „Render-Blocking-Ressourcen eliminieren“ in PageSpeed Insights. WP Rocket hat es auch geschafft, mehr Render-Blocking-Ressourcen zu eliminieren als das Autoptimize/Async JavaScript-Setup:

PageSpeed Insights Ergebnisse mit WP Rocket

PageSpeed Insights Ergebnisse mit WP Rocket

Und so eliminiert man Render-Blocking-Ressourcen auf deiner WordPress-Webseite!

Willst du das Render-Blocking von Ressourcen in #WordPress beseitigen? Mit den richtigen Plugins ist das super einfach... Schaue dir an, wie du deren Einstellungen optimieren und deine Webseite schneller machen kannst! ⚙️🏃‍♀️Click to Tweet

Zusammenfassung

Rendering-Blocking-Ressourcen verlangsamen die wahrgenommenen Seitenladezeiten deiner WordPress-Seite, indem sie die Browser der Besucher zwingen, das Rendern von above the fold Inhalten zu verzögern, während der Browser Dateien herunterlädt, die nicht sofort benötigt werden.

Um Besuchern zu helfen, den sichtbaren Teil deiner Seite schneller zu laden, solltest du das Laden von Ressourcen, die nicht sofort benötigt werden, verzögern.

Um Render-Blocking Ressourcen in WordPress zu eliminieren, kannst du Plugins von der Stange verwenden.

Für eine kostenlose Lösung kann die Kombination von Autoptimize und Async JavaScript, zwei Plugins vom selben Entwickler, verwendet werden.

Wenn du bereit bist zu zahlen, kannst du WP Rocket verwenden, das eine spezielle Integration mit Kinsta bietet und bei vielen anderen Leistungsverbesserungen von WordPress helfen kann.

Hast du weitere Fragen dazu, wie man Render-Blocking-Ressourcen in WordPress eliminieren kann? Lasst es uns in den Kommentaren wissen!


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an