In diesem Beitrag werden wir beide Fragen f\u00fcr dich beantworten. Folgendes werden wir in diesem Beitrag behandeln:<\/p>\n
- \n
- Was Render-Blocking-Ressourcen sind und warum sie ein Problem darstellen<\/a><\/li>\n
- Wie man Render-Blocking-Ressourcen im Allgemeinen repariert<\/a><\/li>\n
- Wie man kostenlose oder kostenpflichtige Plugins verwendet, um das Problem in WordPress zu beheben<\/a><\/li>\n<\/ul>\n
Willst du lieber die Videoversion<\/a> sehen?<\/h3>\n
<\/kinsta-video>\n Was bedeutet „Render-Blocking von Ressourcen eliminieren“?<\/h2>\n
Um zu verstehen, was Render-Blocking-Ressourcen sind und warum sie die Ladezeiten deiner Webseite beeintr\u00e4chtigen, m\u00fcssen wir mit einem grundlegenden Blick darauf beginnen, wie ein Webbrowser eine Webseite rendert.<\/p>\n
Wenn ein Besucher auf deiner Webseite landet, beginnt sein Webbrowser im Grunde genommen oben im Code deiner Webseite<\/a> und liest sich nach unten. Von oben nach unten, verstanden?<\/p>\n
Wenn er dabei auf eine CSS- oder JavaScript-Datei st\u00f6\u00dft, muss er das „Lesen“ beenden<\/strong>, w\u00e4hrend er darauf wartet, diese Datei herunterzuladen und zu verarbeiten. Die Zeit, die es mit dem Herunterladen und Analysieren dieser Ressourcen verbringt, k\u00f6nnte f\u00fcr etwas viel produktiveres verwendet werden, wie das Laden des Teils des Inhalts deiner Webseite, der sofort sichtbar ist, wenn jemand auf der Seite landet.<\/p>\n
Betrachten wir ein extremes Beispiel, um zu zeigen, warum dies ein Problem sein kann.<\/p>\n
Nehmen wir an, du hast diesen coolen JavaScript-Effekt in der Fu\u00dfzeile deiner Webseite. Er wird von „coolfooter.js“ unterst\u00fctzt, einem Skript, auf das oben im Code deiner Webseite verwiesen wird (auch wenn der Effekt in der Fu\u00dfzeile steht, so dass Besucher ihn erst sehen, wenn sie zur Fu\u00dfzeile scrollen).<\/p>\n
Ein sehr grobes Layout f\u00fcr den Code deiner Webseite k\u00f6nnte also etwa so aussehen:<\/p>\n
- \n
- Meta f\u00fcr die Kopfzeile<\/li>\n
- Coolfooter.js<\/li>\n
- HTML f\u00fcr Ihre \u00fcbergeordneten Inhalte. Dies ist der gesamte Inhalt, den ein Besucher sofort sieht (bevor er mit der Seite interagiert)<\/li>\n<\/ul>\n
Und hier ist der Grund, warum dies ein Problem ist:<\/p>\n
Wenn ein Besucher auf deiner Seite landet, beginnt sein Browser von oben nach unten zu lesen. Bevor er also das HTML f\u00fcr den oben genannten Inhalt deiner Webseite analysieren und rendern kann, muss er warten, bis er die Datei coolfooter.js heruntergeladen und analysiert hat.<\/p>\n
Endergebnis? Es dauert l\u00e4nger, den HTML-Code f\u00fcr den oben genannten Inhalt anzuzeigen<\/strong>, was bedeutet, dass deine Besucher deine Webseite als langsamer wahrnehmen werden.<\/p>\n
Wenn Google sagt, dass du Render-Blocking-Ressourcen eliminieren sollst, hei\u00dft das im Wesentlichen: „Hey, lade keine unn\u00f6tigen Ressourcen am Anfang des Codes deiner Webseite, weil es dann l\u00e4nger dauert, bis die Browser der Besucher den sichtbaren Teil deines Inhalts herunterladen.“<\/p>\n
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.<\/p>\n
Was sind Render-Blocking-Ressourcen?<\/h3>\n
Wenn wir uns auf Render-Blocking-Ressourcen beziehen, sprechen wir normalerweise davon:<\/p>\n
- \n
- CSS<\/li>\n
- JavaScript<\/li>\n<\/ul>\n
Es ist wichtig, zu verstehen, dass nicht alle CSS- und JavaScript-Dateien Render-Blocking-Ressourcen aufweisen<\/strong>.<\/p>\n
So ist es beispielsweise wichtig, dass du dein kritisches CSS in der N\u00e4he des oberen Randes laden musst, da deine Besucher sonst ein so genanntes Flash of Unstyled Content<\/a> (FOUC) erleben k\u00f6nnten.<\/p>\n
Sind Bilder Render-Blocking-Ressourcen?<\/h3>\n
Nein, Bilder sind keine Render-Blocking-Ressourcen<\/strong>. Es ist immer noch wichtig, deine Bilder zu optimieren<\/a>, um ihre Dateigr\u00f6\u00dfe zu verringern, aber du brauchst dir keine Gedanken \u00fcber die Optimierung des Bereitstellungspfades f\u00fcr deine Bilder zu machen.<\/p>\n
Wie man testet, ob die Webseite Render-Blocking-Ressourcen hat<\/h2>\n
Um zu beurteilen, ob deine WordPress-Seite derzeit \u00fcber Render-Blocking-Ressourcen verf\u00fcgt oder nicht, kannst du Google PageSpeed Insights<\/a> verwenden.<\/p>\n
Du gibst lediglich die URL ein, die du testen m\u00f6chtest. Wenn du dann ein Problem mit Render-Blocking Ressourcen hast, listet PageSpeed Insights jede einzelne Ressource im Abschnitt Render-Blocking Ressourcen eliminieren<\/strong> unter Opportunities<\/strong> auf:<\/p>\n
![\"Die](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/eliminieren-render-blocking-ressourcen-wordpress-1.jpg\")
Die Render-Blocking Ressourcen eliminieren Nachricht in PageSpeed Insights<\/figcaption><\/figure>\n Wie lassen sich Render-Blocking-Ressourcen beseitigen?<\/h2>\n
Keine Sorge, du musst dies nicht manuell tun. Wir werden im n\u00e4chsten Abschnitt \u00fcber WordPress-Plugins sprechen, die dabei helfen k\u00f6nnen, Render-Blocking-Ressourcen zu eliminieren.<\/p>\n
Es ist jedoch hilfreich, zu verstehen, was diese Plugins hinter den Kulissen tun, um Render-Blocking-Ressourcen zu eliminieren.<\/p>\n
Wie man Render-Blocking JavaScript eliminiert<\/h3>\n
Es gibt ein paar verschiedene Strategien, um das Render-Blocking JavaScript zu beseitigen. Wir behandeln diese im Detail in unserem Artikel \u00fcber das Aufschieben des Parsens von JavaScript<\/a>, aber hier sind die wichtigsten Methoden:<\/p>\n
- \n
- Async<\/strong> – l\u00e4sst den HTML-Parser (z.B. den Browser eines Besuchers) das JavaScript herunterladen, w\u00e4hrend der Rest des HTML noch geparst wird. Das hei\u00dft, es wird das Parsen nicht vollst\u00e4ndig beendet, w\u00e4hrend die Datei heruntergeladen wird. Allerdings wird der HTML-Parser angehalten, um das Skript auszuf\u00fchren, sobald es heruntergeladen ist.<\/li>\n
- Verschieben<\/strong> – l\u00e4sst den HTML-Parser das JavaScript herunterladen, w\u00e4hrend der Rest des HTMLs geparst wird, und<\/strong> wartet mit der Ausf\u00fchrung des Skripts, bis das HTML-Parsing abgeschlossen ist.<\/li>\n<\/ul>\n
Diese Illustration aus „Growing with the Web<\/a>“ zeigt den Unterschied sehr gut auf:<\/p>\n
![\"JavaScript](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/08\/defer-javascript-vs-verschieben-3.png\")
JavaScript Async vs. Verschieben<\/figcaption><\/figure>\n Der Vorteil der Verwendung von defer<\/strong> ist, dass deine Skripte garantiert in der Reihenfolge ausgef\u00fchrt werden, in der sie im Code erscheinen.<\/p>\n
Async<\/strong> verwendet diesen Ansatz nicht, was manchmal zu Problemen f\u00fchren kann, wenn du Async<\/strong> auf alle JavaScript-Ressourcen anwendest, da es oft Ressourcen unterbrechen kann, die von Ressourcen abh\u00e4ngig sind, die fr\u00fcher im Dokument erscheinen. Das h\u00e4ufigste Problem, das Async erzeugt, sind defekte jQuery<\/a>-Ressourcen, die versuchen zu laden, bevor jquery.js dem Dokument hinzugef\u00fcgt wurde.<\/p>\n
Wie man Render-Blocking-CSS eliminiert<\/h3>\n
Das Eliminieren von Render-Blocking-CSS kann etwas schwieriger sein, da du darauf achten musst, CSS, das f\u00fcr die Darstellung von above the fold Inhalten ben\u00f6tigt wird, nicht zu verz\u00f6gern. Die ideale Anordnung ist es:<\/p>\n
- \n
- die Stile zu identifizieren, die f\u00fcr die Darstellung von above the fold Inhalt erforderlich sind, und diese Stile inline mit dem HTML zu liefern<\/a>.<\/li>\n
- Verwende das media-Attribut auf den Link-Elementen, die CSS-Dateien einziehen, um CSS-Ressourcen zu identifizieren, die bedingt, d.h. nur f\u00fcr bestimmte Ger\u00e4te oder Situationen, ben\u00f6tigt werden.<\/li>\n
- Verbleibende CSS-Ressourcen sollten asynchron geladen werden, was in der Regel durch das Hinzuf\u00fcgen von verz\u00f6gertem oder asynchronem JavaScript geschieht. Um ehrlich zu sein, wir steigen hier wirklich \u00fcber unsere K\u00f6pfe hinweg, nicht wahr? Dies ist definitiv Frontend-Ingenieur-Territorium. Was gro\u00dfartig ist, wenn du ein Front-End-Ingenieur bist, aber die meisten von uns sind es nicht. Die gute Nachricht ist, dass dies ein Artikel \u00fcber 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.<\/li>\n<\/ul>\n
Eine weitere schnelle und einfache M\u00f6glichkeit, deine Website zu optimieren, ist die Minifizierung deines Codes. Kinsta hat eine Code-Minifizierungsfunktion<\/a> direkt in das Dashboard von MyKinsta<\/a> integriert, mit der du die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren kannst.<\/p>\n
Wenn du die Funktion in deinem Dashboard nicht finden kannst, sieh dir einfach unser Video zur Aktivierung der Minifizierung in MyKinsta<\/a> an.<\/p>\n
Wie man Render-Blocking CSS und JavaScript-Ressourcen mit WordPress-Plugins eliminiert<\/h2>\n
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\u00e4lt. Anschlie\u00dfend f\u00fchren wir dich durch die Verwendung von zwei verschiedenen Plugin-L\u00f6sungen, um das Render-Blocking CSS und JavaScript zu eliminieren:<\/p>\n
- \n
- Autoptimize + Async JavaScript (kostenlos)<\/li>\n
- WP Rocket (kostenpflichtig)<\/li>\n<\/ul>\n
Zur Referenz: So sieht unsere Testseite vor der Optimierung der CSS- und JavaScript-Bereitstellung aus:<\/p>\n
![\"Wie](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/eliminate-render-blocking-resources-wordpress-2.jpg\")
Wie man das Async JavaScript-Plugin konfiguriert<\/figcaption><\/figure>\n Wenn du die Wirksamkeit deiner \u00c4nderungen mit Google PageSpeed Insights testest, solltest du dir bewusst sein, dass Google seine Ergebnisse f\u00fcr mehrere Minuten zwischenspeichert. Im Wesentlichen bedeutet dies, dass, wenn du schnell…<\/p>\n
- \n
- Testest du eine nicht optimierte Webseite<\/li>\n
- Aktiviere eines der Plugins in diesem Abschnitt<\/li>\n
- Teste deine Webseite erneut<\/li>\n<\/ol>\n
…dann sieht man noch immer die Ergebnisse der nicht optimierten Webseite, bis Google seinen Cache zur\u00fccksetzt. Warte also einige Minuten, bis Google seinen Cache leert, bevor du glaubst, dass das Plugin nicht funktioniert.<\/p>\n
Wie du Render-Blocking-Ressourcen mit dem Autoptimize + Async JavaScript-Plugin beseitigst<\/h3>\n
Autoptimize<\/a> und Async JavaScript<\/a> sind zwei separate kostenlose Plugins vom selben Entwickler. Zusammen helfen sie dir, die Bereitstellung von sowohl CSS als auch JavaScript zu optimieren.<\/p>\n
Wenn du beide Plugins installiert hast<\/a>, gehe zu Einstellungen \u2192 Async JavaScript<\/strong> und:<\/p>\n
- \n
- Aktiviere oben das K\u00e4stchen zur Aktivierung von Async JavaScript<\/strong>.<\/li>\n
- W\u00e4hle im Feld Quick Settings<\/strong> zwischen Apply Async<\/strong> und Apply Defer<\/strong>.<\/li>\n<\/ul>\n
How to configure Async JavaScript plugin<\/figcaption><\/figure>\n Wenn die Async-Option<\/strong> Probleme auf deiner Webseite verursacht, empfehlen wir, jQuery<\/strong> aufzuschieben<\/strong> oder auszuschlie\u00dfen, wof\u00fcr dir das Plugin eine Option bietet.<\/p>\n
Wenn du das Async-JavaScript-Plugin eingerichtet hast, gehe zu Einstellungen \u2192 Autoptimize<\/strong> und:<\/p>\n
- \n
- Aktiviere das Kontrollk\u00e4stchen zum Optimieren von JavaScript-Code<\/strong>.<\/li>\n
- Aktiviere das Kontrollk\u00e4stchen zur Optimierung des CSS-Codes<\/strong><\/li>\n<\/ul>\n
![\"Wie](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/eliminate-render-blocking-resources-wordpress-3.jpg\")
Wie man das Autoptimize Plugin konfiguriert<\/figcaption><\/figure>\n Wenn du ein fortgeschrittener Benutzer bist, kannst du mit den zus\u00e4tzlichen JavaScript- und CSS-Optimierungseinstellungen herumspielen, aber die meisten Webseiten werden mit den Voreinstellungen gut zurechtkommen.<\/p>\n
Nach der Konfiguration von Autoptimize<\/a> und Async JavaScript hat unsere Testseite die Pr\u00fcfung von PageSpeed Insights „Eliminieren Sie Render-Blocking-Ressourcen“ bestanden:<\/p>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/eliminate-render-blocking-resources-wordpress-4.jpg\")
PageSpeed Insights Ergebnisse mit Autoptimize und Async JavaScript<\/figcaption><\/figure>\n Wenn du noch mehr dieser Dateien eliminieren m\u00f6chtest, kannst du Autoptimize weiter verwenden, um dein kritisches CSS<\/a> manuell einzuf\u00fcgen. Dies erfordert allerdings einige Entwicklungskenntnisse, so dass es nicht etwas ist, das Nicht-Entwickler versuchen sollten.<\/p>\n
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\u00fcr die meisten Seiten am besten, sie zu kombinieren.<\/p>\n
Wie man mit WP Rocket Render-Blocking-Ressourcen eliminiert<\/h3>\n
WP Rocket<\/a> ist ein beliebtes Premium-Performance- und Caching-Plugin f\u00fcr WordPress.<\/p>\n
Normalerweise erlauben wir keine Caching-Plugins<\/a> auf WordPress-Seiten, die bei Kinsta gehostet werden, da wir das Caching bereits auf Serverebene \u00fcber den schnellen Nginx FastCGI-Cache f\u00fcr dich \u00fcbernehmen<\/a>.<\/p>\n
- Aktiviere das Kontrollk\u00e4stchen zur Optimierung des CSS-Codes<\/strong><\/li>\n<\/ul>\n
- W\u00e4hle im Feld Quick Settings<\/strong> zwischen Apply Async<\/strong> und Apply Defer<\/strong>.<\/li>\n<\/ul>\n
- Aktiviere oben das K\u00e4stchen zur Aktivierung von Async JavaScript<\/strong>.<\/li>\n
- Verschieben<\/strong> – l\u00e4sst den HTML-Parser das JavaScript herunterladen, w\u00e4hrend der Rest des HTMLs geparst wird, und<\/strong> wartet mit der Ausf\u00fchrung des Skripts, bis das HTML-Parsing abgeschlossen ist.<\/li>\n<\/ul>\n
- Async<\/strong> – l\u00e4sst den HTML-Parser (z.B. den Browser eines Besuchers) das JavaScript herunterladen, w\u00e4hrend der Rest des HTML noch geparst wird. Das hei\u00dft, es wird das Parsen nicht vollst\u00e4ndig beendet, w\u00e4hrend die Datei heruntergeladen wird. Allerdings wird der HTML-Parser angehalten, um das Skript auszuf\u00fchren, sobald es heruntergeladen ist.<\/li>\n
- Wie man Render-Blocking-Ressourcen im Allgemeinen repariert<\/a><\/li>\n
![\"Wie](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/wp-rocket-backend.png\")
![\"PageSpeed](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/12\/eliminate-render-blocking-resources-wordpress-6.jpg\")