Render Blocking Resources beziehungsweise render-blockierende Ressourcen sind Dateien oder Verarbeitungsschritte, die verhindern, dass der Browser eine Webseite frühzeitig sichtbar darstellen kann. Besonders CSS und synchron eingebundenes JavaScript können den ersten Seitenaufbau verzögern.
Was passiert beim Rendering?
Nachdem der Browser das HTML-Dokument erhalten hat, analysiert er dessen Struktur und lädt zusätzlich benötigte Ressourcen. Dazu gehören beispielsweise Stylesheets, Skripte, Bilder und Schriftarten.
Bestimmte Dateien müssen verarbeitet werden, bevor der Browser die Seite korrekt darstellen kann. Ein Stylesheet legt beispielsweise fest, wie Elemente aussehen und angeordnet werden.
Muss der Browser erst auf solche Ressourcen warten, spricht man von Render Blocking.
Welche Ressourcen blockieren das Rendering?
Klassische Stylesheets gehören zu den häufigsten render-blockierenden Ressourcen. Der Browser möchte verhindern, dass Inhalte kurz ohne die richtigen Styles erscheinen und sich direkt danach stark verändern.
Auch JavaScript kann blockieren. Ein synchrones <script>-Element im Kopfbereich kann dazu führen, dass der Browser die HTML-Verarbeitung unterbricht, das Skript herunterlädt und ausführt und erst danach fortfährt.
Lighthouse kennzeichnete deshalb insbesondere bestimmte Stylesheets und Skripte ohne defer oder async als render-blockierend. In Lighthouse 13 wurde dieser ältere Audit in die neuere Analyse render-blockierender Anfragen überführt.
Warum sind render-blockierende Ressourcen problematisch?
Wenn der Browser lange auf CSS oder JavaScript wartet, kann der Bildschirm trotz bereits geladener Daten noch leer oder unvollständig bleiben.
Dadurch verschlechtern sich Messwerte wie First Contentful Paint und unter Umständen Largest Contentful Paint. Für Besucherinnen und Besucher wirkt die Website langsamer.
Besonders problematisch werden viele kleine Dateien, langsame Server oder umfangreiche Skripte, die zuerst heruntergeladen und anschließend noch lange verarbeitet werden müssen.
Wie lassen sich Render Blocking Resources reduzieren?
Nicht jedes Stylesheet und jedes Skript muss vor der ersten Darstellung verfügbar sein. Kritisches CSS kann priorisiert werden, während weniger wichtige Styles später geladen werden.
JavaScript, das nicht für den ersten Seitenaufbau benötigt wird, lässt sich häufig mit defer später ausführen. In anderen Situationen kann async geeignet sein, wobei die Ausführungsreihenfolge dann anders funktioniert.
Ungenutztes CSS und JavaScript sollte möglichst entfernt werden. Auch das Aufteilen großer Dateien kann sinnvoll sein, wenn dadurch nur der tatsächlich benötigte Code früh geladen wird.
Sind alle render-blockierenden Ressourcen schlecht?
Nein. Manche Ressourcen müssen früh vorhanden sein, damit die Seite korrekt und stabil dargestellt wird. Das Ziel besteht nicht darin, grundsätzlich jede Blockierung zu entfernen.
Wichtig ist vielmehr, zwischen kritischen und nicht kritischen Dateien zu unterscheiden. Der Browser sollte zuerst das bekommen, was für den sichtbaren Seitenbereich wirklich notwendig ist.
Bedeutung für SEO und Core Web Vitals
Render Blocking Resources sind kein eigener Core Web Vital. Sie können aber Messwerte beeinflussen, die für die Nutzererfahrung relevant sind.
Deshalb tauchen entsprechende Hinweise in Performance-Werkzeugen wie Lighthouse auf. Die Optimierung sollte sich dabei immer am tatsächlichen Effekt auf die Seite orientieren und nicht nur daran, jede einzelne Warnung verschwinden zu lassen.
Häufige Fragen
Was sind Render Blocking Resources?
Render Blocking Resources sind Ressourcen, die der Browser zuerst laden oder verarbeiten muss und dadurch die sichtbare Darstellung einer Webseite verzögern können.
Welche Dateien blockieren das Rendering?
Vor allem Stylesheets und synchron eingebundene JavaScript-Dateien können render-blockierend wirken.
Wie reduziert man render-blockierende Ressourcen?
Du kannst kritische Ressourcen priorisieren, nicht benötigtes CSS oder JavaScript entfernen und nicht sofort notwendige Skripte passend verzögert laden.
