Ein CSS-Audit untersucht den Umfang der Styles, ihre Nutzung und die Spezifität der Selektoren. „Ungenutzt“ bedeutet, dass eine Regel im geprüften Seitenzustand nicht verwendet wurde. Beim Öffnen eines Menüs oder bei einer anderen Fensterbreite kann sie dennoch nötig sein.
Seiten und Interaktionen festlegen
Wählen Sie Seiten mit unterschiedlichen Gestaltungsmustern, etwa einer gemeinsamen Kopfzeile, einer Produktliste und einem Eingabeformular. Prüfen Sie auch geöffnete Menüs, Validierungsfehler und Registerkarten. Verwenden Sie vor und nach einer Änderung dieselben Fensterbreiten und Interaktionen.
Untersuchen Sie eine öffentliche Seite mit dem CSS Scanner von Milten. Notieren Sie das Stylesheet und die Befunde. Halten Sie Zustände, die der Scan nicht abdeckt, für manuelle Tests fest.
CSS nicht allein anhand des ungenutzten Anteils entfernen
Ein Beispiel zur Veranschaulichung: Beim Laden ist ein Menü geschlossen. Seine Styles werden zunächst möglicherweise nicht verwendet, sind aber im geöffneten Zustand nötig. Testen Sie die Interaktion, bevor Sie eine Regel als überflüssig einstufen.
Die Dokumentation zu Chrome DevTools Coverage erklärt, wie sich die CSS- und JavaScript-Nutzung während der Bedienung aufzeichnen lässt. Eine in dieser Aufzeichnung ungenutzte Regel ist nicht zwangsläufig auf der gesamten Website überflüssig.
Ermitteln Sie für jeden Löschkandidaten die Quelldatei oder den Build-Schritt, der das CSS erzeugt. Ändern Sie die Quelle, erstellen Sie den Build neu und prüfen Sie das Ergebnis, statt direkt eine minimierte Datei zu bearbeiten.
Duplikate und Selektorspezifität prüfen
Wiederholte Deklarationen können unter unterschiedlichen Bedingungen gelten. Prüfen Sie Media Queries, Elementzustände und die Reihenfolge in der Kaskade. Kontrollieren Sie nach dem Zusammenführen, ob dieselben Elemente weiterhin die vorgesehenen Styles erhalten.
Ein weiteres Beispiel ist das wiederholte Hinzufügen von !important, um eine Schaltflächenfarbe zu ändern. Untersuchen Sie zuerst die konkurrierenden Regeln und deren Spezifität. Der MDN-Leitfaden zur Spezifität hilft dabei, die gewünschten Prioritäten im Quellcode auszudrücken.
Darstellung und Bedienung nach der Veröffentlichung prüfen
Scannen Sie die URL nach der Änderung erneut. Testen Sie neben der Dateigröße auch Schaltflächen, Formulare und Menüs. Prüfen Sie Textumbrüche und sichtbare Fokusmarkierungen auf Mobilgeräten und größeren Bildschirmen.
Mit Design Tokens können Sie gemeinsame Farb- und Abstandswerte untersuchen. Bei Darstellungsproblemen durch Markup hilft die Anleitung zur HTML-Prüfung.
Macht weniger ungenutztes CSS eine Seite immer schneller?
Auch Ladereihenfolge, Ressourcenübertragung und JavaScript beeinflussen die Geschwindigkeit. Vergleichen Sie Ergebnisse des Speed Scanners unter denselben Bedingungen.
Reicht eine automatische Analyse aus?
Testen Sie zusätzlich die relevanten Interaktionen und Fensterbreiten. Dokumentieren Sie den Umfang des automatischen Scans getrennt von den manuell geprüften Zuständen.
CSS einer öffentlichen Seite analysieren. Halten Sie Ausgangsbedingungen und Befunde fest, bevor Sie Änderungen vornehmen.
