Wie man Render-Blocking von JavaScript und CSS eliminiert
Geschwindigkeit ist ein wichtiger Faktor, wenn Du Leser oder Kunden auf Deiner Webseite halten möchtest. Die Webseite sollte sich schnell aufbauen und ein zeitlich interessantes Durchklicken ermöglichen. Wenn der Seiten- und Verbindungsaufbau zu lange benötigt, dann wenden sich Besucher schnell ab und kommen nicht mehr wieder. Eine hohe Geschwindigkeit beim Verbindungsaufbau ist wichtig und sollte nicht als Nebensächlichkeit betrachtet werden. Zwar kannst Du nicht alle Faktoren beeinflussen, die sich auf die Geschwindigkeit auswirken, aber Du kannst Probleme identifizieren und erhältst so einen Überblick, welche Faktoren genau die Verbindungsgeschwindigkeit reduzieren. Die Ressourcen zu beseitigen, die das Rendering blockieren, ist ein wichtiger Punkt für den Erfolg Deiner Webseite. Nachfolgend gehen wir näher darauf ein, wie Du Ressourcen beseitigen kannst, die das Rendering blockieren und wie Du diese überhaupt erkennst.
Was beeinflusst die Schnelligkeit der Webseite?
Wie schnell eine Webseite aufgebaut wird und wie schnell der Besucher der Webseite sich durch die einzelnen Bereiche klicken kann, das hängt von verschiedenen Faktoren ab.
Für Dich nicht beeinflussbare Faktoren sind die Internetgeschwindigkeit des Besuchers, lokal bedingte Netzwerküberlastungen oder die geografische Lage des Besuchers. Es gibt noch weitere Faktoren, die Du nicht kontrollieren kannst. Du kannst allerdings die Probleme identifizieren, die auf Deiner Seite zu einer reduzierten Geschwindigkeit führen können. Das können Ressourcen sein, die das sogenannte Rendering blockieren. Um Ressourcen zu beseitigen, die das Rendering blockieren, können Tools eingesetzt werden. Die Identifizierung ist beispielsweise mit speziellen Google Tools möglich.
Geschwindigkeitsreduzierende Faktoren identifizieren
Um geschwindigkeitsreduzierende Faktoren zu identifizieren, können Tools, wie beispielsweise PageSpeed Insights von Google genutzt werden. Das Tool von Google ist kostenlos und kann Ressourcen identifizieren, die das Rendering blockieren und die Geschwindigkeit reduzieren. Es können durch die Identifizierung die blockierenden Faktoren erkannt und ggfs. beseitigt werden.
Wenn Du Ressourcen beseitigen möchtest, die die Bereitstellung Deines Blogs bzw. Deiner Internetseite blockieren oder verlangsamen, dann solltest Du darauf achten, dass Deine Webseite noch stabil und das Erlebnis für Besucher noch angenehm ist. Faktoren, die das Rendering blockieren, wirken sich auf CSS und JavaScript aus. Nachfolgend gehen wir näher auf Render-Blocking von CSS und JavaScript ein.
Ressourcen beseitigen, die das Rendering blockieren - CSS und JavaSrcipt
Render-Blocking von CSS und JavaScipt führt dazu, dass das schnelle Laden Deiner Webseite verhindert wird. Wenn Du durch PageSpeed Insights von Google die Meldung über “Render-Blocking JavaScript und CSS” erhältst, dann solltest Du die Ressourcen beseitigen, die das Rendering blockieren.
Bestimmte CSS und JavaScript Inhalte sind nicht unbedingt erforderlich, um den Bereich anzuzeigen, den der Besucher auf den ersten Blick sieht. Dieser Bereich wird auch als above-the-fold Inhalt bezeichnet. Diese JavaScript und CSS Inhalte, die nicht für den ersten Blickbereich wictig sind, können dennoch die Schnelligkeit des Seitenaufbaus beeinflussen. Du kannst verhindern, dass diese CSS und JS Inhalte das Rendering blockieren. Das ist mit sogenannten defer Attributen und async Attributen möglich.
Wie können Ressourcen beseitigt werden, die das Rendering blockieren?
Zunächst mal müssen CSS und JavaScript im Zusammenhang mit above-the-fold Inhalten erläutert werden. Wenn Du eine Webseite besuchst, dann nutzt Du einen Browser. Der Browser muss zunächst die Webseite laden, damit Du Dir diese ansehen kannst. Während des Ladens der Webseite verhindern CSS-Ressourcen und JavaScript-Ressourcen, dass die Webseite vollständig angezeigt wird. Diese Ressourcen müssen erst vom Browser aus dem Internet geladen und schließlich verarbeitet werden. Das Herunterladen der Ressourcen liest sich zunächst als sehr schlecht und zeitverzögernd.
Aber es kann auch gute Seiten haben. Denn würde die Webseite angezeigt, bevor die Ressourcen verarbeitet sind, würde der Stylesheet nicht korrekt angezeigt und die Webseite könnte nicht so wie beabsichtigt aussehen. Die kurzweilige Anzeige von Seiteninhalt ohne das Stylesheets korrekt verwendet werden können, wird Flash of Unstyled Content (FOUC) genannt. Es ist für Besucher und Seiteninhaber also von Vorteil, wenn Stylesheets korrekt verwendet werden und der Besucher nur wenige huntertstelsekunden auf die korrekte Inhaltsdarstellung warten muss.
Konditionale JavaScript- und CSS-Ressourcen
Bestimmte CSS-Ressourcen und JavaScript-Ressourcen sind nicht wesentlich, um den Seiteninhalt anzuzeigen. Wiederum andere Ressourcen in JavaScript und CSS sind wichtig, damit überhaupt etwas von der Internetseite korrekt angezeigt werden kann. Die nicht wichtigen Ressourcen werden auch als konditional bezeichnet. Konditionale JavaScrip- und CSS-Ressourcen können, wenn Sie nicht zum Rendern benötigt werden, beseitigt werden. Allerdings sollten nicht alle Renderblocking-Ressourcen gelöscht bzw. beseitigt werden. Zwar lädt die Seite dann sehr schnell, aber der Inhalt kann schlicht weg zum FOUC führen und das Besuchererlebnis negativ gestalten. Generell kannst Du nicht alle Ressourcen beseitigen, die das Rendering blockieren. Es geht nicht darum, die perfekte Geschwindigkeit zu erzielen, sondern darum, dem Besucher Deines Blogs ein gutes Erlebnis zu bieten. Der Nutzer sollte alle Seiteninhalte schnell und in Deinem gewünschten Seitenstyling abrufen können. Es dürfen keine ungestylten Inhalte auftauchen.
Weitere Geschwindigkeitstools
Neben PageSpeed Insights kannst Du auch andere Tools, wie beispielsweise GTmetrix nutzen, um Renderblocker-Ressourcen zu identifizieren. Wenn Du GTmetrix nutzt, dann erhältst Du beispielsweise die Info “Defer Parsing of JavaScript”. Auch hier gilt, das JavaScript-Ressourcen, wenn Sie eleminiert werden sollen, konditional sein sollten.
Ressourcen beseitigen, die das Rendering blockieren - Plugins konfigurieren
Wenn Du Ressourcen beseitigen möchtest, die das Rendering blockieren, dann kannst Du Plugins konfigurieren. Bevor Du das tust, solltest Du allerdings wissen, wie JavaScript- und CSS-Ressourcen eliminiert werden. So kannst Du eine bessere und effektivere Plugin-Wahl treffen. Zunächst musst Du JavaScript-Ressourcen, die unwichtig sind, aus dem sogenannten kritischen Render-Pfad entfernen. Wie das geht, wird nachfolgend erläutert.
MERKE: JavaScript-Ressourcen und jQuery-Ressourcen müssen aus dem kritischen Render-Pfad eliminiert werden.
Du fügst ein sogenanntes async- oder defer-Attribut ein. Das Attribut muss zu den sogenannten “script HTML-Elementen” hinzugefügt werden, die normalerweie die Ressourcen für JavaScript aufrufen. Weder die async-Attribute, noch die defer-Attribute sind als gleichwertig zu verstehen. Du musst den Unterschied genau kennen, um gezielt handeln und Ressourcen beseitigen zu können, die das Rendering blockieren. Ein async-Attribut veranlasst Deinen Browser, den Ressourcen-Download zu starten. Das sogenannte HTML-Parsing wird dadurch nicht verlangsamt. Erst wenn die Ressource vollständig für den Browser verfügbar ist, wird das HTML-Parsing gestoppt und die Ressource kann geladen bzw. verarbeitet werden. Ein defer-Attribut dient dazu, den Browser erst zum Download einer Ressource zu veranlassen, wenn das sogenannte HTML-Parsing stattgefunden hat und abgeschlossen ist. Hat der Browser die HTML-Version geladen, wird er die Skripte mit geringerer Priorität herunterladen und rendern. Das Rendern erfolgt allerdings in einer bestimmten Reihenfolge. Es werden zunächst die Skripte geladen, die zuerst im Dokument auftauchen.
Welchen Unterschied gibt es zwischen async- und defer-Attribut?
Wenn Du Ressourcen beseitigen möchtest, die das Rendering blockieren, dann musst Du die Unterschiede zwischen async- und defer-Attribut kennen. Defer-Attribute sorgen, wie bereits erwähnt, dafür, dass die Skripte in korrekter Reihenfolge heruntergeladen werden, so wie diese schließlich auch im HTML-Dokument vorkommen. Async hingegen, wird unter Umständen auf allen JavaScript-Ressourcen genutzt und das kann zu einer inkorrekten Darstellung von Webseiten-Inhalten führen. Das passiert vor allem, wenn Ressourcen geladen werden, die eigentlich von anderen Ressourcen abhängig sind, die erst später geladen werden. Das führt zu sogenannten defekten jQuery-Ressourcen.
Wie kann die Optimierung erfolgen?
Zunächst sollten die Ressourcen bzw. die Styles identifiziert werden, die unbedingt für die erste Darstellung der Webseite wichtig sind. Die, auch als above-the-fold Webseiteninhalte bezeichneten Styles, müssen unbedingt mit dem HTML übermittelt werden. Du kannst also nicht alle Ressourcen beseitigen, die das Rendering blockieren. Es muss eine sogenannte Optimierung von CSS-Ressourcen erfolgen. Wenn Du die wichtigen CSS-Ressourcen zur HTML-Darstellung kennst, dann musst Du im Gegenzug die konditionalen Ressourcen identifizieren. CSS-Ressourcen sind konditional, wenn Sie nur für ganz bestimmte Situationen oder Geräte genutzt werden müssen. Konditionale CSS-Ressourcen können durch das media-Attribut auf den Link-Elementen identifiziert werden.
Die CSS-Ressourcen, die verbleiben, solltest Du asynchron laden lassen. Das asynchrone Laden kann durch ein asynchrones oder verzögertes JavaScript geschehen. Da das in der Regel sehr kompliziert ist, kannst Du mit WordPress arbeiten und dort die sogenannten CSS- und JavaScript-Ressourcen durch Plugins reduzieren. Sogenannte Render-Blocking CSS- und JavaScript-Ressourcen können mit den richtigen Plugins beseitigt werden.
Ressourcen beseitigen, die das Rendering blockieren - welche Plugins nutzen?
Plugins, die Ressourcen beseitigen können, die das Rendering blockieren, sind beispielsweise Autoptimize, Speed Booster Pack Plugin und JCH Optimize. Insgesamt gibt es um die 12 Plugins in Wordpress, die Ressourcen beseitigen können, die das Rendering blockieren oder diese Ressourcen zwar nicht beseitigen, aber reduzieren können. Die genannten Plugins führen eine messbare Reduzierung von Ressourcen, die das Rendering blockieren, herbei. Jedes Plugin bieten seine Vor- und Nachteile. Welche Aufgabe die einzelnen Plugins besitzen, kann in Google genauer nachgelesen werden. Nachfolgend wird kurz auf die Plugins eingegangen.
LiteSpeed Cache
Mit dem in allen Paketen enthaltenen Litespeed Cache Modul für Wordpress beispielsweise kann man all diese Probleme mit ein paar Klicks beheben.
JCH Optimize
Durch das Plugin werden CSS und JavaScript spürbar verkleinert. Das Plugin enthält Elemente, durch die Deine Webseite beschleunigt lädt. Das wird durch die Kombination von CSS und JavaScript erzielt. Denn durch die Kombination kann die Webseite mit weniger Ressourcen geladen werden. Es können also auch weniger Ressourchen das Render-Blocking verursachen.
Autoptimize
Autoptimize ist in WordPress ein sehr beliebtes Plugin, um Ressourcen zu beseitigen, die das Rendering blockieren. Autoptimize ist einfach zu händeln und kann schnell eingestellt werden. Andere Plugins sind komplexer und müssen über schwer zu bedienende Optionsmenüs gehandhabt werden. Um Autoptimize in WordPress zu nutzen, musst Du nur auf Settings und schließlich auf Autoptimize gehen. Dann kannst Du drei Kontrollkästchen (die Hauptkästchen) auswählen und schon hast Du Ressourcen beseitigen bzw. optimieren können, die das Rendering blockieren.
Speed Booster Pack
Das Speed Booster Pack ist ein Plugin, das Du in WordPress ebenfalls unter Settings findest. Du hast in Settings das Menü Speed Booster Pack zur Verfügung und kannst allerlei Konfigurationen einstellen. So ist es Dir beispielsweise möglich, Skripte in die Fußzeile zu verrücken und so Parsing von Skripten zu verzögern. Das Speed Booster Pack soll in der Lage sein, JavaScript komplett zu eliminieren. Zumindest die Skripte, die für das Render-Blocking verantwortlich sind. Du kannst zudem im Speed Booster Pack ein Menü auswählen, das “Still need more speed” heißt. Durch dieses Menü wird es Dir ermöglicht, CSS asynchron zu laden. Allerdings ist die Auswahl des Menüs mit Vorsicht zu genießen, denn es kann zu FOUC kommen, wenn die Option “Still need more speed” im Speed Booster Pack aktiviert ist.
Ressourcen beseitigen, die das Rendering blockieren
Du solltest zunächst herausfinden, was Ladeprobleme bei der Webseite verursacht und dafür bekannte Tests nutzen. Wenn Du die Skripte (JavaScript, CSS) gefunden hast, die das Rendering blockieren, dann solltest Du identifizieren, welche Skripte genau wichtig sind. Im Gegenzug müssen die Ressourcen identifiziert werden, die konditional sind und nicht unbedingt für das erste Laden der Webseite benötigt werden. Anschließend kannst Du mit Plugins arbeiten, die Ressourcen beseitigen, die das Rendering blockieren.
Allerdings ist Vorsicht geboten, denn wenn Du nicht weist, welches Plugin, was genau macht, dann kann das zu einer Fehldarstellung der Webseite kommen und der Besucher sieht nicht die wichtigen Inhalte. Im schlimmsten Fall führt das dazu, dass die Webseite nicht richtig und nicht schnell genug lädt und der Besucher nicht wiederkommt.