Hilfe und Dokumentation
Geschwindigkeit Hohe Auswirkung Schwer 1–3 Std.
Reduzierung von blockierendem CSS
Großes CSS im Header verzögert das Rendern.
Was es ist
CSS ist standardmäßig blockierend — der Browser rendert nichts, bis er die Styles heruntergeladen und verarbeitet hat. Große oder zahlreiche CSS-Dateien verzögern so das erste Bild der Seite.
Warum es wichtig ist
Das Laden eines einzigen großen CSS für die gesamte Website verzögert auch eine einfache Seite. Die Optimierung verbessert direkt das LCP und die wahrgenommene Geschwindigkeit.
So geht's
- 1Extrahiere „Critical CSS“ für den sichtbaren Teil und füge es inline in den <head> ein.
- 2Lade das restliche CSS asynchron (media="print"-Trick oder rel="preload" + onload).
- 3Entferne ungenutzte Styles (PurgeCSS / Coverage-Tool in den DevTools).
- 4Teile das CSS nach Seiten/Komponenten auf statt eines Monolithen.
Asynchrones Laden von unkritischem CSS
Richtig
<link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>Fazit
Critical CSS inline + den Rest asynchron ist das wirksamste Muster gegen blockierendes CSS. Es ist eine aufwendigere Anpassung, bringt aber bei langsamen Websites eine deutliche Beschleunigung des ersten Renderns. Moderne Build-Tools und Frameworks erleichtern sie dir.
Verwandte Themen