Wie man Render-Blocking von JavaScript und CSS eliminiert
Wissen
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.
Render-Blocking von JavaScript und CSS sollten eliminiert werden (© prabowo stock.adobe.com)
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. Langsame Websites können die Benutzer frustrieren und sich negativ auf die Wahrnehmung einer Marke auswirken, während optimierte Websites bessere Chancen haben, in den Suchergebnissen höher eingestuft zu werden.
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.
Was sind renderblockierende Ressourcen?
Renderblockierende Ressourcen sind Dateien, die das Laden einer Webseite verlangsamen können. Dazu gehören HTML, CSS, JavaScript, Bilder und andere Dateien. Diese Ressourcen können die Ladezeit einer Webseite verlangsamen, indem sie das Rendering des Inhalts blockieren. Wenn der Browser auf solche Ressourcen trifft, muss er diese zuerst herunterladen und verarbeiten, bevor er mit dem Rendern der Seite fortfahren kann. Dies führt zu Verzögerungen und kann die Benutzererfahrung erheblich beeinträchtigen. Daher ist es wichtig, diese renderblockierenden Ressourcen zu identifizieren und zu optimieren, um die Ladegeschwindigkeit der Webseite zu verbessern.
Warum sollten Sie renderblockierende Ressourcen eliminieren?
Die Eliminierung von renderblockierenden Ressourcen kann die Benutzererfahrung, SEO und Konversionen erheblich verbessern. Langsame Webseiten führen oft zu einer höheren Absprungrate, da Besucher nicht bereit sind, lange Ladezeiten zu tolerieren. Dies wirkt sich negativ auf das Suchmaschinenranking aus, da Suchmaschinen wie Google die Ladegeschwindigkeit als wichtigen Rankingfaktor betrachten. Durch die Beseitigung von renderblockierenden Ressourcen kann die Ladezeit der Webseite verkürzt werden, was zu einer besseren Benutzererfahrung führt. Eine schnellere Webseite hält Besucher länger auf der Seite und erhöht die Wahrscheinlichkeit von Konversionen, sei es durch Käufe, Anmeldungen oder andere gewünschte Aktionen.
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. Die Identifizierung von render blocking ressourcen ist entscheidend, um die Ladegeschwindigkeit zu optimieren und ein besseres Nutzererlebnis zu gewährleisten. 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.
Core Web Vitals: Googles Leistungsbenchmarks
Core Web Vitals sind wichtige Kennzahlen, die die wesentlichen Aspekte der Ladeleistung von Webseiten messen. Diese Metriken dienen als Leitfaden und helfen Website-Besitzern, schnelle, visuell stabile und interaktive Erlebnisse zu schaffen. Die drei Hauptmetriken der Core Web Vitals sind:
Largest Contentful Paint (LCP): Misst die Ladezeit des größten sichtbaren Inhalts auf der Seite. Ein guter LCP-Wert liegt unter 2,5 Sekunden.
First Input Delay (FID): Misst die Zeit, die vergeht, bis die Seite auf die erste Benutzerinteraktion reagiert. Ein guter FID-Wert liegt unter 100 Millisekunden.
Cumulative Layout Shift (CLS): Misst die visuelle Stabilität der Seite und wie oft sich Layout-Elemente unerwartet verschieben. Ein guter CLS-Wert liegt unter 0,1.
Diese Metriken sind entscheidend, um die Leistung und Benutzerfreundlichkeit einer Webseite zu bewerten und zu verbessern.
Ressourcen beseitigen, die das Rendering blockieren – CSS und JavaScript
CSS und JavaScript sind zwei der häufigsten Gründe für Rendering-Blockaden. Durch die Optimierung des CSS- und JavaScript-Ladens kann die Ladezeit einer Webseite erheblich verbessert werden. Eine effektive Methode ist die Verwendung der Attribute async und defer für JavaScript-Dateien. Das async-Attribut ermöglicht es dem Browser, das Skript parallel zum HTML-Parsing herunterzuladen und auszuführen, sobald es verfügbar ist. Das defer-Attribut hingegen sorgt dafür, dass das Skript erst nach dem vollständigen Parsen des HTML-Dokuments ausgeführt wird. Durch diese Techniken kann die Render-Blockade minimiert und die Ladegeschwindigkeit der Webseite verbessert werden.
Ressourcen beseitigen, die das Rendering blockieren – CSS und JavaSrcipt
Render-Blocking von CSS und JavaScript führt dazu, dass das schnelle Laden Deiner Webseite verhindert wird. Es gibt verschiedene Schritte, die Du unternehmen kannst, um renderblockierende Ressourcen zu beseitigen und somit die Benutzererfahrung zu verbessern. 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 wichtig 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.
Beschleunige das Laden Deiner Webseite durch das Löschen von Ressourcen (© WrightStudio stock.adobe.com)
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. Der nächste Schritt zur Optimierung besteht darin, diese renderblockierenden Ressourcen zu identifizieren und zu minimieren. 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 und das Litespeed Cache Plugin nutzen, um die Ladezeiten zu verbessern.
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.
Caching und Content Delivery Networks (CDNs)
Caching und Content Delivery Networks (CDNs) sind leistungsstarke Werkzeuge, um die Ladezeit einer Webseite zu verbessern. Caching speichert Kopien von Dateien auf dem Server, sodass sie bei wiederholten Anfragen schneller geladen werden können. Dies reduziert die Serverlast und beschleunigt die Ladezeit. CDNs hingegen verteilen Kopien von Dateien auf verschiedene Server weltweit. Wenn ein Benutzer auf die Webseite zugreift, wird der Inhalt vom nächstgelegenen Server geliefert, was die Ladezeit erheblich verkürzt. Durch die Implementierung von Caching und CDNs kann die Performance der Webseite optimiert und die Benutzererfahrung verbessert werden.
