Geschwindigkeit
Viel ausgeliefertes CSS wird beim initialen Laden nie angewendet
Woran du es erkennst
Die Browser-Coverage über den initialen Ladevorgang zeigt Stilvorlagen, deren Großteil zu nichts auf der geladenen Seite passt — typisch für seitenweite Framework-Bündel, von denen die Seite nur eine Handvoll Bausteine nutzt.
Warum es zählt
CSS blockiert das Rendern: Jedes ungenutzte Kilobyte in einer Stilvorlage im Seitenkopf verzögert den ersten Bildaufbau für jeden Besucher. Große ungenutzte Regelsätze bremsen außerdem jede Stilneuberechnung bei Änderungen am Dokument.
So behebst du es
- Teile die Stile nach Route oder Bauteil auf und binde nur ein, was die aktuelle Seite braucht, statt ein globales Bündel für das ganze Angebot.
- Entferne ungenutzte Framework-Bausteine im Build (PurgeCSS/UnCSS) — die meisten Sites nutzen nur einen kleinen Teil eines UI-Frameworks.
- Bette den kleinen kritischen Teil der Stile direkt in den Seitenkopf ein und lade den Rest verzögert, damit der erste Bildaufbau nicht auf die volle Stilvorlage wartet.
- Miss vorher in den DevTools-Coverage über eine volle Sitzung nach: Die Ladephase-Messung stoppt vor Interaktionen, Stile für Dialoge, Menüs oder spätere Zustände gelten dort als ungenutzt.