So geht’s: Render-Blocking von JavaScript und CSS verhindern

Webseiten sollen möglichst schnell laden, sonst werden die Besucher ungeduldig. Es gibt viele Möglichkeiten, Tricks und Tipps, um langsame Webseiten wieder flott zu bekommen. Ein Bereich wird dabei leider häufig ausgeklammert, was vielleicht auch an der eher trockenen Bezeichnung liegt: Die Rede ist vom Render-Blocking. Warum das wichtig ist und wie es unter WordPress recht einfach verhindert werden kann, zeigen wir euch gerne in diesem Artikel.

Was ist Render-Blocking von JavaScript und CSS?

Wenn ihr eure Seite bei Googles PageSpeed Insights oder mit anderen Tools überprüft, dann habt ihr bestimmt schon mal diesen Hinweis gelesen: „Eliminieren Sie Render-Blocking von JavaScript und CSS in Above-the-Fold Inhalten“ – zusammen mit der Bitte, dieses Problem aus der Welt zu schaffen. Das solltet ihr nicht auf die leichte Schulter nehmen und das Problem stattdessen aktiv angehen. In vielen Fällen reichen da schon ein paar Minuten aus.

Warum das alles? Für Besucher der WP-Webseite ist natürlich zunächst das relevant, was sie unmittelbar auf dem Bildschirm sehen, also alles, was Above-the-Fold ist. Um zu verhindern, dass längere Wartezeiten entstehen, sollte die Webseite also so aufgebaut sein, dass sie den sichtbaren Bereich unmittelbar darstellt – und dieser nicht etwa von manchen CSS- und JavaScript-Ressourcen ausgebremst wird.

Render-Blocking findet also dann statt, wenn das schnellstmögliche Laden der Seite verhindert wird.

Wie kann Render-Blocking von JavaScript und CSS verhindert werden?

Es gibt mehrere Möglichkeiten, um ein unnötig langsames Laden der Webseite zu verhindern. Render-Blocking ist dabei nur ein Teil des Puzzles, wenn auch ein sehr relevantes. Um Render-Blocking zu verhindern, gibt es unter WordPress verschiedene Ansätze, die wir euch im Folgenden gerne vorstellen.

Wichtig: Je nach Art der WordPress-Installation, aktiven Plugins und Themes kann es durchaus möglich sein, dass die eine oder andere Lösung nicht optimal ist. Gerade deshalb stellen wir verschiedene Möglichkeiten vor, damit ihr die jeweils beste Lösung für eure Seite finden könnt.

CSS-Ressourcen optimiert einsetzen

• Cascading Style Sheets (CSS) zeigen dem Browser an, wie die Seite gerendert werden soll. Hier ist ein optimierter Einsatz oft Gold wert. Da hilft es bereits in einem ersten Schritt zu identifizieren, welche(s) CSS für den sichtbaren Bereich (Above-the-Fold) zuständig ist. Diese Styles sollten zusammen mit dem HTML übermittelt werden.
• Link-Elemente sollten mit dem media-Attribut versehen werden. So werden konditionale Ressourcen identifiziert, die nicht auf allen Endgeräten und in allen Situationen erforderlich sind.
• Alle anderen CSS-Ressourcen sollten asynchron geladen werden.
• Falls das alles jetzt schon zu kompliziert klingt: Keine Sorge! Es gibt Tools und Plugins für WordPress, welche euch die Arbeit deutlich erleichtern können. Grundwissen zu CSS und JavaScript sollte aber dennoch vorhanden sein.

WordPress-Plugins: Render-Blocking verhindern

Es stehen diverse Erweiterungen für WordPress zur Verfügung, um das Render-Blocking von JavaScript und CSS in den Griff zu bekommen. Die meisten davon sind kostenfrei im Plugin-Verzeichnis von WP erhältlich, unterscheiden sich in Sachen Funktionalität und Übersicht aber enorm. Premium-Versionen lohnen sich in diesem Bereich nur in den seltensten Fällen, weshalb wir uns fast nur auf kostenfreie Erweiterungen beschränken.

Tipp: Bevor direkt ein Plugin installiert und aktiviert wird, sollte ein Benchmark-Test durchgeführt werden, um später genau zu wissen, ob das Plugin nun wirklich etwas gebracht hat oder nicht. PageSpeed Insights oder der Pingdom Website Speed Test seien in diesem Zusammenhang empfohlen.

Autoptimize

Autoptimize des Entwicklers Frank Goossens gehört zu den beliebtesten Plugins in diesem Bereich. Es ist bei über eine Million WP-Installationen aktiv und wird stetig weiter entwickelt.

Für den Anfang reicht es bereits aus, in den Einstellungen des Plugins unter Settings → Autoptimize jeweils den Haken bei HTML, JavaScript und CSS zu setzen.

Dieser einfache Schritt sollte bereits dafür gesorgt haben, dass die Anzahl der Anfragen an den Server beim Aufrufen einer Seite deutlich reduziert wurde. Auch die Anzahl der Render-Blocking-Ressourcen dürft sich in vielen Fällen bereits reduziert haben, auch wenn das Problem nicht gänzlich aus der Welt geschaffen sein wird. Ein erster und vielleicht auch schon letzter Schritt ist damit bereits gemacht – je nachdem, wie gut das Ergebnis nach der Nutzung von Autoptimize nun aussieht.

Async JavaScript

Neben Autoptimize sollte auch ein Blick auf Async JavaScript geworfen werden. Das Plugin stammt vom gleichen Entwickler, ist aber noch einfacher in der Bedienung. Es ist bei über 100.000 WP-Installationen im Einsatz und kann auf eine sehr gute Bewertung verweisen.

Async Javascript ist weniger umfangreich und kümmert sich nicht(!) um Render-Blocking von CSS. Stattdessen wird lediglich JavaScript asynchron geladen. In den Einstellungen des Plugins wird dazu „Enable Async JavaScript“ aktiviert, wobei hier noch die Möglichkeit besteht, zwischen den Methoden Defer und Async zu wählen, was je nach Webseite unterschiedliche Auswirkungen haben kann. Allgemeine Aussagen sind hier schwer zu treffen.

Async JavaScript lässt sich auch mit Autoptimize kombinieren, wenn in den Einstellungen von Autoptimize ein entsprechender Haken gesetzt wurde. Die Kombination aus beiden Plugins kann mitunter noch bessere Ergebnisse bei PageSpeed Insights oder dem Pingdom Website Speed Test erzeugen – und die Besucher der Webseite freuen sich über schnellere Ladezeiten.

W3 Total Cache

Das beliebte Caching-Plugin W3 Total Cache setzt zwar einen anderen Schwerpunkt, kann aber auch für das Verhindern von Render-Blocking genutzt werden. Der Einsatz empfiehlt sich allerdings nur dann, wenn W3 Total Cache ohnehin schon Teil der Webseite ist. Um „nur“ Render-Blocking zu verhindern, ist W3 Total Cache zu groß und zu umfangreich.

Bei W3 Total Cache ist etwas mehr Arbeit nötig. In den Haupteinstellungen muss zunächst ein Haken bei Minify (Minifizierung) gesetzt und der Modus auf manuell gestellt werden. Anschließend müssen die Adressen der betroffenen JavaScript- und CSS-Dateien selbst eingegeben werden.

Tipp: PageSpeed Insights und andere Tools listen auf, welche Dateien für Render-Blocking sorgen. Diese URLs müssen dann selbst bei W3 Total Cache eingetragen werden.

Hummingbird

Auch mit dem Plugins Hummingbird lassen sich gute Ergebnisse erzielen. Die Erweiterung war früher kostenpflichtig, ist nun aber kostenfrei zu bekommen. Es handelt sich genau wie bei W3 Total Cache um ein recht umfangreiches Plugin, dass nicht nur für das Verhindern von Render-Blocking eingesetzt werden kann.

Der größte Vorteil ist hier, dass sich das Plugin selbst auf die Suche nach Problemen machen kann. Dafür wird der Button „Check Files“ in den Einstellungen der Erweiterung bemüht.

Nach dem Test können alle CSS- und JavaScript-Dateien ausgewählt werden. Sie können komprimiert und kombiniert werden oder in den Header- sowie Footer-Bereich verschoben werden. Hier sollte allerdings Schritt für Schritt vorgegangen werden, anstatt gleich alle Dateien in einen Topf zu werfen. Nach jedem Schritt sollte erneut ein Benchmark durchgeführt werden.

Hummingbird macht eine sehr gute Figur, was das Verhindern von Render-Blocking von JavaScript und CSS angeht. PageSpeed Insights und die Besucher dürften den Unterschied deutlich spüren.

JCH Optimize

Der Einsatz des kostenlosen JCH Optimize kann unter Umständen ebenfalls dazu führen, dass Render-Blocking verhindert wird – auch wenn die Erweiterung nirgendwo darauf explizit hinweist.

JavaScript- und CSS-Dateien lassen sich kombinieren, was immerhin zu weniger Anfragen an den Server führt. So werden weniger Ressourcen zum Laden der Seite benötigt was wiederum Render-Blocking verhindern kann.

Falls keine erweiterten Kenntnisse rund um CSS und JavaScript bestehen, kann das Plugin die verschiedenen Konfigurationsmöglichkeiten selbst übernehmen. Dazu muss nur in den Basisoptionen ein Haken gesetzt werden.

JavaScript und CSS werden anschließend von JCH Optimize kombiniert und komprimiert, was zu schnellen Ladezeiten führt und weniger Render-Blocking führt. Wer noch mehr Funktionen haben möchte, der kann sich JCH Optimize Pro anschauen. Die Premium-Variante des Plugins ist ab 29 Dollar zu bekommen und kann auch beliebig vielen WordPress-Seiten zum Einsatz kommen.

Speed Booster Pack

Zum Schluss noch ein kurzer Blick auf das Plugin Speed Booster Pack. Es handelt sich um eine eher einfach gestrickte Erweiterung, die dennoch viel Möglichkeiten zur individuellen Konfiguration mit sich bringt.

In den Einstellungen des Plugins lassen sich unter anderem Javascript-Dateien in den Footer-Bereich des Themes verschieben, um das Parsing zu verzögern und die Darstellung des sichtbaren Bereichs (Above-the-Fold) nicht zu stören.

CSS lässt sich über ein weiteres Menü asynchron laden, wobei hier Vorsicht geboten ist. Es kann durchaus passieren, dass die Website dann für einen kurzen Moment ohne CSS-Anweisungen angezeigt wird, was sicher kein gutes Bild abgibt. In diesem Fall sollte der entsprechende Haken wieder entfernt werden.

Obwohl das Speed Booster Pack oft gute Ergebnisse beim Render-Blocking bietet, kann es mitunter dazu kommen, dass sich die Anfragen an den Server durch das Plugin selbst erhöhen. In diesem Fall sollte nach ein alternatives Plugin eingesetzt werden.

Fazit: Render-Blocking von JavaScript und CSS

Um die Ladezeit der WordPress-Webseite zu verringern und bei Tools wie PageSpeed Insights oder dem Pingdom Website Speed Test besser dazustehen, reichen unter Umständen schon ein paar Minuten. Je nach Konfiguration der Webseite und den aktiven Plugins kann es aber durchaus etwas länger dauern, bis das gewünschte Ergebnis eintritt.

Automatische Lösungen haben den Vorteil, dass keine besonderen Kenntnisse rund um CSS und JavaScript vorhanden sein müssen. Manuelle Lösungen kosten zwar mehr Zeit, sind letztlich aber effektiver und effizienter. Falls schon ein umfangreiches Caching-Plugin eingesetzt wird, lohnt es sich, in den Einstellungen zu stöbern. Viele derartige Plugins bieten die Möglichkeit, Render-Blocking von JavaScript und CSS zu verhindern.

Pro-Versionen sind beim Render-Blocking in vielen Fällen einfach nicht nötig, da auch die kostenfreien Varianten einen sehr guten Job machen. Der einzige wirkliche Vorteil liegt im Support, der sich bei Bedarf um anfallende Probleme kümmern oder unterstützend bei der Beseitigung von Render-Blocking zur Seite stehen kann.