Ungenutztes CSS finden
CSS mit HTML abgleichen und ungenutzte Selektoren finden, Ersparnis anzeigen und bereinigtes CSS kopieren – lokal im Browser.
Ungenutztes CSS finden gleicht ein Stylesheet mit HTML ab und zeigt alle Selektoren, die auf kein Element passen. Zustände wie :hover und Pseudo-Elemente wie ::before werden dabei berücksichtigt. Du siehst Anzahl und Ersparnis und kopierst das bereinigte CSS. Der Abgleich passiert lokal im Browser mit dessen eigener Selektor-Engine.
Warum ungenutztes CSS stört
Themes, Frameworks und gewachsene Projekte schleppen oft große Mengen CSS mit, das keine Seite mehr verwendet. Der Browser muss es trotzdem laden und auswerten, bevor er die Seite darstellt. Weniger CSS verbessert die Ladezeit und damit Core Web Vitals wie Largest Contentful Paint.
- HTML aller wichtigen Seitentypen sammeln (Start, Artikel, Formular …).
- Hier abgleichen und die Liste kritisch prüfen.
- Bereinigtes CSS testen und mit CSS minifizieren weiter verkleinern.
Den Zustand einer Seite insgesamt prüft der SEO-Checker.
Häufige Fragen
Kann ich das bereinigte CSS bedenkenlos übernehmen?
Nicht ungeprüft. Das Tool kennt nur das eingefügte HTML. Klassen, die erst per JavaScript gesetzt werden, auf anderen Unterseiten vorkommen oder aus einem CMS stammen, erscheinen als ungenutzt. Prüfe die Liste und füge bei Bedarf das HTML mehrerer Seiten zusammen ein.
Wie werden :hover und ::before behandelt?
Zustände und Pseudo-Elemente werden für den Abgleich entfernt. .nav-link:hover gilt also als genutzt, wenn es ein Element mit der Klasse nav-link gibt.
Was passiert mit Selektorlisten?
Jeder Selektor wird einzeln geprüft. Aus „.card-title, .card-subtitle“ wird nur der ungenutzte Teil entfernt; ist nichts mehr übrig, fällt die ganze Regel weg. Leere Media Queries werden ebenfalls entfernt.
Wie mache ich das in einem Projekt automatisch?
Tools wie PurgeCSS durchsuchen beim Build alle Templates. Tailwind CSS erzeugt von vornherein nur genutzte Klassen. Dieses Tool eignet sich für schnelle Prüfungen und Altprojekte.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.