Critical CSS

Was ist Critical CSS?

Critical CSS bezeichnet die CSS-Regeln, die ein Browser für die erste sichtbare Darstellung einer Webseite benötigt. Diese Regeln werden direkt in den HTML-Kopf eingebunden. Der Browser kann dadurch den sichtbaren Seitenbereich rendern, bevor die vollständigen Stylesheets geladen und verarbeitet sind. Das kann den PageSpeed und den Largest Contentful Paint verbessern.

Was Critical CSS technisch bewirkt

Critical CSS, auf Deutsch einmalig auch als kritisches CSS bezeichnet, umfasst nur die Stilregeln für Inhalte, die beim Aufruf ohne Scrollen sichtbar sind. Dazu gehören beispielsweise Layout, Schriftgrößen, Farben und Abstände von Navigation, Überschrift, Hero-Bild und einleitendem Text. Welche Regeln benötigt werden, hängt vom Seitentyp, vom Viewport und von den sichtbaren Komponenten ab.

Ein reguläres Stylesheet, das mit <link rel='stylesheet'> im HTML-Kopf eingebunden ist, kann die Darstellung blockieren. Der Browser lädt und verarbeitet die Datei, bevor er die Seite vollständig zeichnet. Critical CSS verkürzt diesen Verarbeitungspfad, indem die benötigten Regeln direkt innerhalb eines <style>-Elements im HTML stehen.

Der zentrale Denkfehler besteht darin, Critical CSS mit einer allgemeinen Verkleinerung von CSS-Dateien gleichzusetzen. Eine komprimierte Datei kann weiterhin das Rendering blockieren. Critical CSS verändert dagegen die Ladereihenfolge: Zuerst stehen die Regeln für den sichtbaren Bereich bereit, anschließend lädt das vollständige Stylesheet.

So funktioniert Critical CSS

Der Browser erstellt aus dem HTML das Document Object Model und aus den Stylesheets das CSS Object Model. Erst aus beiden Strukturen kann der Renderbaum für die sichtbaren Elemente entstehen. Fehlen benötigte CSS-Regeln, wartet der Browser auf das Stylesheet. Inline eingebundenes Critical CSS stellt diese Regeln bereits mit dem HTML-Dokument bereit.

Eine typische Umsetzung folgt diesem Ablauf:

Die sichtbaren Elemente einer Vorlage werden für relevante Bildschirmgrößen ermittelt.
Die benötigten CSS-Regeln werden aus dem vollständigen Stylesheet extrahiert.
Critical CSS wird innerhalb eines <style>-Elements in den HTML-Kopf geschrieben.
Das übrige Stylesheet wird so geladen, dass es die erste Darstellung nicht blockiert.
Nach dem Laden übernimmt das vollständige Stylesheet sämtliche Darstellungsregeln der Seite.

Critical CSS muss pro Seitentyp betrachtet werden. Eine Produktseite, eine Kategorieseite und ein Magazinartikel besitzen unterschiedliche sichtbare Komponenten. Eine einzige statische Auswahl für die gesamte Domain kann deshalb Regeln auslassen oder unnötigen Code auf jeder URL einfügen.

Critical CSS und PageSpeed

Critical CSS zielt vor allem auf den wahrgenommenen Seitenaufbau. Nutzer sehen Überschrift, Navigation und zentrale Inhalte früher, obwohl weitere Ressourcen noch geladen werden. Die Maßnahme kann insbesondere den Largest Contentful Paint beeinflussen, wenn das größte sichtbare Element zuvor auf ein blockierendes Stylesheet warten musste.

Ein besserer PageSpeed entsteht jedoch nicht automatisch. Wartet ein großes Hero-Bild auf den Download, blockiert eine Schriftdatei die Textdarstellung oder beschäftigt JavaScript den Hauptthread, reicht Critical CSS allein nicht aus. Prüfe deshalb zuerst, welche Ressource das größte sichtbare Element tatsächlich verzögert. Nur ein CSS-bedingter Engpass lässt sich unmittelbar durch diese Technik verkürzen.

Für SEO sind schnell sichtbare Inhalte relevant, weil die technische Nutzererfahrung Teil der Seitenqualität ist. Für SEA kann eine schneller dargestellte Zielseite die Nutzung nach dem Anzeigenklick erleichtern. Für GEO, also Generative Engine Optimization, ist Critical CSS kein direktes Auswahlkriterium für KI-Antworten. Sauber ausgelieferte, technisch zugängliche Inhalte unterstützen jedoch dieselbe technische Basis, die auch Crawling und SEO stärkt.

Messbar ist Critical CSS durch einen Vergleich derselben URL vor und nach der Änderung. Prüfe dabei mobile und größere Viewports getrennt und vergleiche den Largest Contentful Paint, den Zeitpunkt der ersten Darstellung und blockierende CSS-Ressourcen. Ein einzelner Gesamtwert reicht nicht, weil er die Ursache einer Verzögerung nicht erklärt. Einen ersten Überblick liefert der kostenlose Ladezeiten-Check.

Prüfe den PageSpeed deiner Website direkt im Artikel:

Mit Nutzung dieses PageSpeed-Checks erklären Sie, dass Sie die Datenschutzerklärung zur Kenntnis genommen haben und damit einverstanden sind, dass die von Ihnen angegebenen Daten elektronisch erhoben und gespeichert werden. Ihre Daten werden dabei nur streng zweckgebunden zur Bearbeitung des PageSpeed-Checks benutzt. Mit der Nutzung dieses PageSpeed-Checks erklären Sie sich mit der Verarbeitung einverstanden.

Ladezeiten-Score: N/A von 100

i Ladezeiten (Desktop):	N/A
i Ladezeiten (Mobile):	N/A
i PageSpeed (Desktop):	N/A
i PageSpeed (Mobile):	N/A
i CMS:
i Gehosted bei:
i WordPress Theme:

Ladezeiten (Desktop)

Ladezeiten (Mobile)

Abgrenzung zu ähnlichen Verfahren

Der Unterschied zwischen Critical CSS und CSS-Minifizierung liegt im Zweck. Minifizierung entfernt beispielsweise Leerzeichen, Kommentare und unnötige Zeichen aus einer Datei. Critical CSS wählt dagegen die Regeln aus, die für die erste sichtbare Darstellung benötigt werden. Beide Verfahren lassen sich kombinieren, lösen aber unterschiedliche Aufgaben.

Der Unterschied zwischen Critical CSS und dem Entfernen ungenutzter CSS-Regeln liegt im Geltungsbereich. Ungenutztes CSS wird auf einer Seite oder innerhalb eines Projekts nicht benötigt und kann dauerhaft entfernt werden. Nicht kritisches CSS wird dagegen benötigt, jedoch erst für Inhalte außerhalb des zunächst sichtbaren Bereichs oder für spätere Interaktionen.

Critical CSS ist auch nicht mit Code Splitting gleichzusetzen. Code Splitting teilt Styles nach Seiten, Komponenten oder Funktionen auf. Critical CSS orientiert sich am Zeitpunkt der Darstellung. Eine Regel kann Bestandteil eines korrekt aufgeteilten Komponenten-Stylesheets sein und trotzdem das erste Rendering blockieren.

Critical CSS richtig umsetzen

Eine belastbare Umsetzung beginnt mit repräsentativen Vorlagen statt mit einzelnen URLs. Bei einem Onlineshop sollten mindestens Startseite, Kategorieseite, Produktseite und redaktionelle Seite getrennt geprüft werden. Responsive Breakpoints müssen einbezogen werden, weil eine Navigation auf dem Desktop sichtbar sein kann, während sie mobil hinter einem Menü-Icon liegt.

Typische Fehler bei der Umsetzung sind:

Das Inline-CSS enthält große Teile des vollständigen Stylesheets und vergrößert jedes HTML-Dokument.
Benötigte Regeln fehlen, sodass Inhalte zunächst ungestaltet erscheinen oder beim Nachladen springen.
Dieselben Regeln werden inline und im vollständigen Stylesheet übertragen, ohne den Umfang regelmäßig zu prüfen.
Nach Änderungen an Templates oder Komponenten bleibt eine veraltete Critical-CSS-Version im Quellcode.
Die Prüfung erfolgt nur für eine Bildschirmgröße und übersieht mobile Abweichungen.

Besonders relevant ist die Aktualisierung nach einem Relaunch, einem neuen Navigationsaufbau oder Änderungen am Hero-Bereich. Veraltetes Critical CSS kann zu einem Flash of Unstyled Content führen, bei dem Inhalte kurz ohne die vorgesehenen Styles erscheinen. Es kann auch Layout-Verschiebungen verursachen, wenn nachträglich geladene Regeln Größen oder Abstände verändern.

Automatisch erzeugtes Critical CSS sollte deshalb nicht ungeprüft veröffentlicht werden. Vergleiche den sichtbaren Bereich auf mehreren Seitentypen und Viewports, kontrolliere die Browserkonsole auf Ladefehler und teste Interaktionen wie Menüs oder Formulare. Weitere technische Prüfpunkte findest du im Ratgeber zur laufenden Kontrolle technischer SEO-Fehler. Für wiederkehrende Analysen kann ein verlinkter Technik-Crawler für technische Checks auffällige URLs und Veränderungen zentral erfassen.

Häufige Fragen zu Critical CSS

Braucht jede Webseite Critical CSS?

Nein. Critical CSS lohnt sich vor allem, wenn große oder mehrere Stylesheets die erste Darstellung blockieren. Bei kleinen Seiten mit schlankem CSS kann die zusätzliche technische Komplexität größer sein als der messbare Nutzen.

Wie groß darf Critical CSS sein?

Es gibt keine feste Dateigröße, die für jede Webseite passt. Critical CSS sollte ausschließlich die Regeln für den ersten sichtbaren Bereich enthalten. Wird der Inline-Code sehr umfangreich, sollte die Auswahl pro Vorlage und Viewport erneut geprüft werden.

Kann Critical CSS automatisch erzeugt werden?

Ja, Critical CSS lässt sich anhand einer URL und definierter Viewports automatisiert extrahieren. Das Ergebnis muss nach Template-Änderungen aktualisiert und visuell geprüft werden, weil dynamische Elemente oder unterschiedliche Zustände fehlen können.

Ist Critical CSS auch für WordPress geeignet?

Ja, Critical CSS kann bei WordPress über die technische Optimierung, ein geeignetes Plugin oder den Build-Prozess eingebunden werden. Wichtig ist, Cache-Dateien nach Änderungen zu erneuern und das Ergebnis auf unterschiedlichen Seitentypen zu testen.

Warum erscheint die Seite kurz ungestaltet?

Eine kurz ungestaltete Darstellung entsteht, wenn Critical CSS benötigte Regeln nicht enthält und das vollständige Stylesheet verspätet eintrifft. Prüfe in diesem Fall sichtbare Komponenten, responsive Regeln, Schriftdefinitionen und die Ladeweise der restlichen CSS-Dateien.

Verbessert Critical CSS automatisch die Core Web Vitals?

Nein. Critical CSS kann CSS-bedingte Verzögerungen beim Largest Contentful Paint reduzieren. Werden die Werte durch Bilder, Schriftdateien, JavaScript, Serverantworten oder Layout-Verschiebungen begrenzt, müssen diese Ursachen getrennt optimiert werden.