Critical CSS, im Tech-Kontext.
Critical CSS ist der Teil des Stylesheets, den der erste Bildschirm braucht. Direkt im HTML ausgeliefert, spart er eine blockierende Anfrage beim Aufbau.
Critical CSS bezeichnet die Regeln, die für die Darstellung des ersten sichtbaren Bereichs nötig sind. Sie werden direkt in den Kopf des Dokuments geschrieben, der Rest des Stylesheets wird ohne Blockade nachgeladen. Damit entfällt eine Anfrage, die sonst vor dem ersten Zeichnen abgewartet werden muss, was First Contentful Paint und LCP verbessert. Der Aufwand liegt nicht im Einbau, sondern in der Pflege: extrahiertes CSS veraltet bei jeder Gestaltungsänderung, und zu viel davon bläht jede HTML-Antwort auf. Sinnvoll bei großen Stylesheets oder wenn der Prüfbericht blockierende Ressourcen als Hauptbremse ausweist. Bei kleinen, gebündelten Stylesheets bringt es wenig.
Beispiele aus dem Mittelstand
- Eine Seite mit umfangreichem Stylesheet liefert Kopfbereich und Hero-Regeln inline aus, der Rest folgt ohne Blockade.
- Ein Redesign vergaß die Aktualisierung des inline ausgelieferten CSS; die Startseite zeigte kurz ein altes Farbschema.
<style>/* nur Kopfbereich, Hero und Grundtypografie */</style>
<link rel="stylesheet" href="/assets/app.css" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="/assets/app.css" /></noscript>Folge-Fragen
Wie ermittle ich, welche Regeln kritisch sind?
Werkzeuge wie critters oder critical lesen die Seite in der Zielbreite aus und extrahieren die benötigten Regeln beim Build.
Wie viel Inline-CSS ist zu viel?
Sobald der spürbare Zuwachs der HTML-Antwort den gesparten Umlauf übersteigt. Dann lieber das Stylesheet insgesamt verkleinern.
Lohnt sich das bei Tailwind?
Meist nicht. Der Build entfernt ungenutzte Klassen bereits, und das verbleibende Stylesheet ist oft klein genug.
Was passiert bei veraltetem Inline-CSS?
Der erste Bildschirm zeigt kurz die alte Gestaltung, bis das vollständige Stylesheet greift. Ein sichtbarer Sprung im Layout.
Critical CSS in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
SEO-Performance