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:
- Was sind überhaupt Render-Blocking-Ressourcen?
- 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 Render-Blocking-Ressourcen sind und warum sie ein Problem darstellen
- Wie man Render-Blocking-Ressourcen im Allgemeinen repariert
- Wie man kostenlose oder kostenpflichtige Plugins verwendet, um das Problem in WordPress zu beheben
Willst du lieber die Videoversion sehen?
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:
- Meta für die Kopfzeile
- Coolfooter.js
- HTML für Ihre übergeordneten Inhalte. Dies ist der gesamte Inhalt, den ein Besucher sofort sieht (bevor er mit der Seite interagiert)
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:
- CSS
- JavaScript
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:
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:
- Async – lässt den HTML-Parser (z.B. den Browser eines Besuchers) das JavaScript herunterladen, während der Rest des HTML noch geparst wird. Das heißt, es wird das Parsen nicht vollständig beendet, während die Datei heruntergeladen wird. Allerdings wird der HTML-Parser angehalten, um das Skript auszuführen, sobald es heruntergeladen ist.
- Verschieben – lässt den HTML-Parser das JavaScript herunterladen, während der Rest des HTMLs geparst wird, und wartet mit der Ausführung des Skripts, bis das HTML-Parsing abgeschlossen ist.
Diese Illustration aus „Growing with the Web“ zeigt den Unterschied sehr gut auf:
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:
- die Stile zu identifizieren, die für die Darstellung von above the fold Inhalt erforderlich sind, und diese Stile inline mit dem HTML zu liefern.
- Verwende das media-Attribut auf den Link-Elementen, die CSS-Dateien einziehen, um CSS-Ressourcen zu identifizieren, die bedingt, d.h. nur für bestimmte Geräte oder Situationen, benötigt werden.
- Verbleibende CSS-Ressourcen sollten asynchron geladen werden, was in der Regel durch das Hinzufügen von verzögertem oder asynchronem JavaScript geschieht. Um ehrlich zu sein, wir steigen hier wirklich über unsere Köpfe hinweg, nicht wahr? Dies ist definitiv Frontend-Ingenieur-Territorium. Was großartig ist, wenn du ein Front-End-Ingenieur bist, aber die meisten von uns sind es nicht. Die gute Nachricht ist, dass dies ein Artikel über WordPress ist und du mit dem richtigen Plugin(s) die Anzahl der render-blocking JS- und CSS-Ressourcen, die deine Webseite betreffen, eliminieren oder zumindest deutlich reduzieren kannst.
Eine weitere schnelle und einfache Möglichkeit, deine Website zu optimieren, ist die Minifizierung deines Codes. Kinsta hat eine Code-Minifizierungsfunktion direkt in das Dashboard von MyKinsta integriert, mit der du die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren kannst.
Wenn du die Funktion in deinem Dashboard nicht finden kannst, sieh dir einfach unser Video zur Aktivierung der Minifizierung in MyKinsta an.
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:
- Autoptimize + Async JavaScript (kostenlos)
- WP Rocket (kostenpflichtig)
Zur Referenz: So sieht unsere Testseite vor der Optimierung der CSS- und JavaScript-Bereitstellung aus:
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…
- Testest du eine nicht optimierte Webseite
- Aktiviere eines der Plugins in diesem Abschnitt
- 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:
- Aktiviere oben das Kästchen zur Aktivierung von Async JavaScript.
- Wähle im Feld Quick Settings zwischen Apply Async und Apply Defer.
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:
- Aktiviere das Kontrollkästchen zum Optimieren von JavaScript-Code.
- Aktiviere das Kontrollkästchen zur Optimierung des CSS-Codes
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:
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.
Sobald du WP Rocket installiert und aktiviert hast, gehst du zur Registerkarte Dateioptimierung. Aktiviere dann diese beiden Optionen:
- Optimiere die CSS-Bereitstellung unter dem Abschnitt CSS-Dateien.
- Lade JavaScript zeitversetzt unter dem Abschnitt JavaScript-Dateien. Du kannst damit experimentieren, den Safe Mode für jQuery Wenn du jedoch Probleme im Frontend deiner Webseite bemerkst, solltest du den sicheren Modus für jQuery wieder aktivieren, da es der wahrscheinliche Übeltäter ist.
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:
Und so eliminiert man Render-Blocking-Ressourcen auf deiner WordPress-Webseite!
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!
Jon ist Chief Operating Officer bei Kinsta und arbeitet täglich mit den Teams von Kinsta in den Bereichen Vertrieb, Kundendienst und technischer Support zusammen. Jon ist ein Familienmensch. Wenn er nicht gerade fieberhaft auf die Tasten seines Laptops tippt, hilft er normalerweise einem seiner Kinder beim Reparieren eines Fahrrads oder richtet Netflix für ein ungeduldiges Vorschulkind ein.
Schreibe einen Kommentar