Was ist Rendering blockierendes CSS?
CSS kann grundsätzlich das Rendering einer Webseite blockieren. Rendering blockierendes CSS verzögert die Sichtbarkeit von Inhalten.
Diese Verzögerung beim Rendering gilt für jede einzelne CSS Datei.
Größere CSS Dateien erhöhen die Ladezeiten einer Webseite noch einmal.
Je mehr CSS Dateien vorhanden sind desto länger wird die Ladezeit einer Webseite.
Rendering blockierendes CSS ist schlecht!
Durch Rendering blockierendes CSS werden Ihre Webseiten langsamer.
Werbung kann erst später geladen werden.
Verkäufe in Online Shops werden abgebrochen.
Die User Experience wird schlechter.
Besucher verlassen Ihre Webseiten schneller.
Webseiten werden nicht fertig geladen.
Das Ranking in den Suchmaschinen sinkt.
Besucher bleiben ganz weg.
Sie machen kein Geld mehr mit Ihren Webseiten und haben nur noch Kosten.
Rendering blockierendes CSS beseitigen
Einbindung von CSS Dateien optimieren
Es gibt einige Möglichkeiten CSS Inhalte in eine Website einzubinden. Im folgenden führe ich die 5 wichtigsten Methoden auf.
1. @import Regel am Beginn eines Stylesheets
1.1 @import Regel und Adresse als Pfad
1
@import "name-der-datei.css";
1.2 @import Regel und Adresse als URL
1
@import url("http://staticweb.de/name-der-datei.css");
Die @import Regel muss immer am Beginn eines Stylesheets stehen. Die Adresse kann als Zeichenkette oder mit der url() Funktion angegeben werden.
Der Aufruf einer CSS Datei über die @import Regel sollte vermieden werden!
CSS Dateien die über die @import Regel eingebunden sind, werden aufgerufen bevor die Webseite fertig geladen wurde. Dadurch wird die Ladezeit der Webseite erhöht.
Entfernen Sie alle @import Regeln von Ihrer Webseite. Kopieren Sie den Code der referenzierten Dateien und fügen Sie ihn ans Ende der Datei mit der @import Regel. Bei mehreren @import Regeln muss die Reihenfolge der referenzierten Dateien beim Einfügen beachtet werden.
Sollte diese Lösung nicht möglich oder nicht gewollt sein, ist die Einbindung über das HTML-Element “link” der @import Regel vorzuziehen.
2. HTML-Element “link” innerhalb des head Elements
Über das HTML-Element “link” im Head Bereich können Sie externe Stylesheets einbinden.
2.1 link Element in HTML4 und HTML5 Dateien
1
<link href="name-der-datei.css" rel="stylesheet" type="text/css" media="all" title="titel-des-stylesheets">
2.1 link Element in XHTML Dateien
1
<link href="name-der-datei.css" rel="stylesheet" type="text/css" media="all" title="titel-des-stylesheets" />
Die Attribute “rel” und “href” sind hier verpflichtend. Das Attribut “type” ist nur für HTML Dokumente verpflichtend die nicht der HTML5 Spezifikation entsprechen. Die Attribute “media” und “title” sind optional.
Obwohl die Angabe des media Attributes nur optional ist, sollte es auf jeden Fall mit angegeben werden.
Das hat den Vorteil dass der Browser CSS Dateien mit bestimmten media Attributwerten erst nach dem Rendering der Webseite lädt. Diese CSS Ressourcen werden so als nicht blockierend gekennzeichnet.
Das betrifft z.B. bestimmte Ausgabemedien / Mediengruppen wie “print” oder “media queries” mit Ausdrücken für bestimmte Dimensionen “device-width: 600px”, Auflösungen “resolution: 96dpi”, Seitenverhältnisse “aspect-ratio: 4/3”, … .
3. HTML Element “style” innerhalb des head Elements
1
2
3
<style media="all" title="titel-des-stylesheets">
/* CSS Code */
</style>
Die Attribute “media” und “title” sind auch hier optional.
Für das “media” Attribut gilt das gleiche wie beim letzten Punkt. Unbedingt benutzen!
4. HTML Attribut “style” innerhalb eines einführenden Tags im body Bereich
1
<body style=" /* CSS Code */ ">
Diese Einbindung wird auch als inline CSS bezeichnet. Da diese Variante zu redundantem CSS Code führen und das Dokument aufblähen kann, sollte inline CSS nur vereinzelt eingesetzt werden.
5. Weiterhin gibt es noch die Möglichkeit der Einbindung über den HTTP Header Link und das HTML Element meta. Da diese 2 Varianten aber nicht von jedem Browser unterstützt werden kann ich sie auf keinem Fall empfehlen.
Optimierung des kritischen Rendering-Pfads
Der kritischen Rendering-Pfad umfasst alle Dinge die der Browser macht bevor die Webseite das erste mal gerendert wird.
Anzahl der CSS Ressourcen verringern
Zuerst sollte die Zahl der benötigten CSS Dateien verringert werden, so dass im Idealfall nur noch eine CSS Datei übrig bleibt. Dies verringert die Anzahl der Requests im Browser.
Dazu nimmt man sich die zuerst eingebundene CSS Datei und kopiert den Code der anderen CSS Dateien an das Ende dieser. Natürlich muss die Reihenfolge der Einbindung beachtet werden, da sonst Nebeneffekte, wie überschriebene Selektoren, auftreten können.
Den Dateinamen kann man unter Umständen anpassen (main.css, style.css, o.ä.). Dann aber auch die Änderung des Namens im Code nicht vergessen.
Dies funktioniert natürlich nur wenn man auch Zugriff auf die CSS Ressourcen hat. Externe CSS Dateien z.B. in CDN Netzwerken kann man nicht bearbeiten. Man sollte sich überlegen ob man diese Ressourcen lieber selbst hostet, darf dabei aber die Lizenz-rechtliche Seite nicht vernachlässigen.
Die Zusammenlegung aller CSS Ressourcen hat aber auch einen Nachteil. Die verbliebene CSS Datei wird unter Umständen sehr groß und unübersichtlich.
Deshalb empfehle ich an dieser Stelle mit Sass oder einem anderen CSS Präprozessor zu arbeiten.
Dort bietet sich eine Modularisierung der CSS Datei in kleine übersichtliche Module an, die auch noch entsprechend benannt und in einer Verzeichnisstruktur gelagert werden können.
Über die Sass @import Regel werden diese untereinander referenziert. Aber im Gegensatz zur nativen CSS @import Regel, werden später alle Dateien deren Dateiname mit einem Unterstrich beginnt direkt in die aufrufende Datei inkludiert und keine separaten Dateien erzeugt.
zentrales CSS innerhalb des head Elements
Wie oben bereits beschrieben kann man über das HTML-Element “style” innerhalb des head Elements auch CSS Code direkt im Dokument unterbringen. Dies bietet die Möglichkeit auf die Einbindung externer CSS Dateien ganz zu verzichten. Damit spart man sich Requests und die Länge des kritischen Rendering-Pfads wird verkürzt.
So gut wie das klingt hat die Sache aber auch einen Haken. Wenn dadurch das HTML Dokument zu groß und die magische 14KB Grenze überschritten wird kann diese Maßnahme auch kontraproduktiv sein, da ein zusätzlicher Request benötigt wird.
Deshalb bietet es sich an nur den kritische CSS Code aus der CSS Datei zu extrahieren und diesen zentral abzulegen. Die CSS Datei mit dem restlichen Code wird nach dem kritischen Rendering, JavaScript-gesteuert, verzögert nachgeladen.
Schlussfolgerung über Rendering blockierendes CSS
- so wenig CSS wie möglich verwenden
- Anzahl der CSS Dateien und damit der benötigten Requests reduzieren
- auf die @import Regel bei nativen CSS verzichten
- das media Attribute im “style” und “link” Element verwenden
- CSS Code über das “style” Element in das Dokument einbinden
- externes CSS erst nach dem kritischen Rendering laden
Bei der Nutzung von freien oder gekauften Wordpress Themes oder Themes eines anderen CMS bzw. eines statischen Webseiten Generators sollte man bereits bei der Auswahl des Themes auf diese Punkte achten oder als Anforderung bei einer Beauftragung stellen.
Ansonsten ist Nacharbeit notwendig!
Leider machen sich viel Theme Designer nicht die Arbeit dass CSS unter den oben genannten Gesichtspunkten zu optimieren. Die Nutzung von reduntantem, nicht benötigtem CSS ist halt einfacher als eine Optimierung. Zusätzlich werden noch Frameworks benutzt die eine Menge zusätzliches CSS mitbringen. Wenn man deren Code nicht genau kennt kommt es auch oft zu Redundanzen.
Vielleicht interessieren dich auch die Artikel Rendering blockierendes JavaScript und JavaScript verzögert laden die sich mit einem ähnlichen Thema beschäftigen.
Sollten Sie Unterstützung bei der Entfernung von Rendering blockierendem CSS haben, können Sie mich gern für eine Umsetzung oder Beratung beauftragen.
Quellen:
CSS-Bereitstellung optimieren - PageSpeed Insights - Google
Kritischer Rendering-Pfad - Web Fundamentals - Google
Render blocking CSS | How to fix it