Und wie man es sicher reduziert
Warum "unused CSS" auch in modernen Projekten auftaucht
Auch in Tailwind- und Next.js-Projekten sammelt sich ungenutztes CSS an. Das ist kein Fehler, sondern eine Folge von Skalierung und Flexibilität.
Je größer das Projekt, desto mehr Styles bleiben zurück.
Was "ungenutztes CSS" wirklich bedeutet
Ungenutztes CSS:
- ist im Bundle enthalten,
- wird aber nicht (oder nicht überall) angewendet.
Wichtig:
- Pro Seite ungenutzt != global ungenutzt.
- Tools erkennen keine Zustaende, Interaktionen oder Breakpoints.
Typische Ursachen
- globale Utility-Verfügbarkeit,
- zustandsabhängige Klassen,
- geteilte Komponenten,
- Legacy-Code,
- zu breite Safelists.
Relevanz für Performance und SEO
SEO direkt: nein. Performance indirekt: ja.
Zu viel CSS kann:
- Rendering verzögern,
- LCP verschlechtern,
- Layout-Reflows verursachen.
Häufige Fehler
- blindes Löschen,
- überaggressives Tree-Shaking,
- Optimierung ohne visuelle Prüfung.
Unser sicherer Ansatz
- Impact bewerten
- Global vs. lokal trennen
- Styles scopen
- Tailwind-Konfig prüfen
- Visuell validieren
Stabilität hat Vorrang.
Wo echte Verbesserungen entstehen
- kleinere globale Styles,
- aufgeraeumte Komponenten,
- saubere Design-Systeme.
Nicht durch Perfektionismus.
Fazit
Ungenutztes CSS ist normal.
Ziel ist nicht Eliminierung, sondern Kontrolle. Gute Performance entsteht durch saubere Architektur - nicht durch Tool-Hoerigkeit.