CSS-Abdeckung und ungenutzte Stile

Große CSS-Dateien enthalten häufig Styles für Komponenten, die auf der aktuellen Seite nicht vorhanden sind. Jedes ungenutzte Byte erhöht die Parse-Zeit, die Zeit zur Erstellung des CSSOM und die Übertragungsgröße. Eine typische Produktionsanwendung kann auf einer bestimmten Seite zu 90 % oder mehr ungenutztes CSS enthalten.

Öffnen Sie in den DevTools das Coverage-Panel (Cmd+Shift+P → Coverage). Starten Sie die Aufzeichnung, interagieren Sie mit der Seite und beenden Sie sie anschließend. Das Panel zeigt für jede CSS-Datei den Nutzungsprozentsatz an und hebt ungenutzte Regeln rot hervor. Exportieren Sie die Coverage-Daten zur Analyse als JSON.

PurgeCSS durchsucht Ihre HTML-, JS- und Template-Dateien nach Klassennamen und entfernt ungenutzte CSS-Regeln. Konfigurieren Sie Content-Globs, die alle Dateien abdecken, in denen Klassennamen vorkommen können. Setzen Sie Klassen, die dynamisch von JavaScript hinzugefügt werden, auf die Safelist, damit sie nicht versehentlich entfernt werden.

Der JIT-Compiler von Tailwind generiert nur die Utility-Klassen, die tatsächlich in Ihren Templates verwendet werden. Das resultierende CSS ist sehr klein – bei einer vollständigen Anwendung oft nur 5–15 KB –, da ungenutzte Utilities niemals generiert werden. Dies ist das ideale Ergebnis einer Bereinigung.

Fügen Sie PurgeCSS in einer webpack- oder Vite-Konfiguration mit Content-Globs hinzu, die alle Template-Dateien abdecken. Die Option safelist akzeptiert Zeichenfolgen, reguläre Ausdrücke und deep-safelist für komplexe dynamische Klassenmuster aus Bibliotheken wie Headless UI.

CSS Modules erzeugen pro Datei eindeutige Klassennamen und entfernen ungenutzte Module mithilfe der Tree-Shaking-Konfiguration des Bundlers. Nur importierte CSS-Module werden in das Bundle aufgenommen – die gemeinsame Ablage von Komponente und Styles beseitigt ungenutzte globale Styles auf natürliche Weise.

Teilen Sie CSS in Frameworks wie Next.js nach Routen auf (seitenspezifische CSS-Extraktion) oder verwenden Sie dynamische Importe mit CSS Modules. Jede Seite lädt nur ihre eigenen Styles, sodass eine Coverage-Analyse pro Seite statt pro Anwendung aussagekräftig wird.

Das Lighthouse-Audit „Reduce unused CSS“ schätzt die mögliche Byte-Einsparung durch das Entfernen ungenutzter Regeln. Es identifiziert konkrete Stylesheet-Ressourcen mit einem hohen Anteil ungenutzten Codes. Verwenden Sie es als Orientierung, um festzulegen, welche Dateien zuerst geprüft werden sollten.

Die Coverage-Analyse erfasst nur Zustände, die während der Aufzeichnung sichtbar sind. Hover-Zustände, geöffnete Modalfenster, Fehlerzustände und authentifizierte Zustände müssen während der Coverage-Aufzeichnung manuell ausgelöst werden, damit ihre Styles nicht fälschlicherweise entfernt werden.

Monolithische globale Stylesheets sammeln im Laufe der Zeit ungenutztes CSS an, wenn Funktionen entfernt werden. CSS pro Komponente (CSS Modules, Styled Components, Tailwind-Utilities) lässt sich leichter bereinigen, da die Styles bei ihren Komponenten liegen und gemeinsam mit ihnen entfernt werden.

Für große Legacy-CSS-Dateien gilt: Verwenden Sie UnCSS oder PurgeCSS zunächst im reinen Berichtsmodus. Sortieren Sie die Regeln nach Nutzungshäufigkeit. Extrahieren und löschen Sie eindeutig ungenutzte Styles von Vendor-Plugins. Arbeiten Sie schrittweise, damit Styles für seltene Zustände nicht versehentlich entfernt werden.

Was misst das Coverage-Panel der Chrome DevTools?

Die CSS-Coverage-Analyse mit DevTools Coverage und Lighthouse identifiziert ungenutzte Regeln. PurgeCSS und Tailwind JIT automatisieren die Entfernung von Totcode. CSS Modules und die Aufteilung nach Routen verhindern, dass sich ungenutzte Styles ansammeln. Zusammen minimieren sie CSS-Nutzlast und Parse-Zeit.