Unbenutztes CSS entfernen
Behalten Sie nur das CSS, das eine Seite wirklich nutzt, aus einem Chrome-Coverage-Export oder aus dem HTML und dem Stylesheet. Alles läuft in Ihrem Browser.
Unbenutztes CSS entfernen - nur das CSS behalten, das eine Seite nutzt
Die meisten Websites liefern weit mehr CSS aus, als eine einzelne Seite braucht. Ein Theme, ein Page Builder oder ein Framework bringt Styles für jedes Widget mit, das irgendwann einmal erscheinen könnte, und der Browser muss all das herunterladen und parsen, bevor er etwas zeichnen kann. Dieses Tool kürzt ein Stylesheet auf die Regeln, die eine Seite tatsächlich verwendet, und zwar auf zwei Wegen: aus dem Coverage-Export, den die Chrome DevTools aufzeichnen, oder aus dem HTML der Seite und dem CSS selbst.
Beide laufen vollständig in Ihrem Browser. Stylesheet, HTML und Coverage-Datei werden auf Ihrem eigenen Rechner gelesen und nie hochgeladen. Das ist wichtig, wenn das CSS zur noch unveröffentlichten Website eines Kunden gehört.
Zwei Wege zum Ziel
| Modus | Was Sie hineingeben | Was er weiß | Am besten für |
|---|---|---|---|
| Coverage-JSON | Die Datei, die aus dem Coverage-Panel der Chrome DevTools exportiert wurde | Genau, welche Regeln der Browser angewendet hat, während Sie die Seite benutzt haben | Themes und Page Builder, deren Klassen Sie nicht vorhersehen können |
| HTML + CSS | Das HTML der Seite und das Stylesheet | Welche Selektoren ein Element in diesem HTML treffen | Statische Seiten und Templates, die Sie selbst kontrollieren |
So exportieren Sie Coverage aus Chrome
- Öffnen Sie die Seite in Chrome und öffnen Sie die DevTools.
- Öffnen Sie das Menü mit den drei Punkten, dann More tools (Weitere Tools), dann Coverage (Abdeckung).
- Klicken Sie im Coverage-Panel auf die Schaltfläche zum Neuladen, damit die Aufzeichnung mit dem Laden der Seite beginnt.
- Benutzen Sie die Seite wie ein Besucher: Öffnen Sie Menüs, Akkordeons und Pop-ups, und ziehen Sie das Fenster auf die Breiten, die Sie unterstützen.
- Klicken Sie auf Export (Exportieren) und speichern Sie die JSON-Datei. Ziehen Sie sie dann auf den Tab Coverage-JSON und klicken Sie auf Genutztes CSS extrahieren.
Der Export listet jede Datei auf, die die Seite geladen hat, JavaScript eingeschlossen. Das Tool behält die Stylesheets, liest die Inline-Blöcke <style> aus HTML-Dokumenten heraus und überspringt den Rest, wobei es angibt, wie viele Einträge übersprungen wurden. Dasselbe Format liefert page.coverage.stopCSSCoverage() in Puppeteer, eine automatisierte Aufzeichnung funktioniert also ebenfalls.
Warum Regeln zurück in ihr @media kommen
Chrome zeichnet Coverage Regel für Regel auf. Bei einer Regel innerhalb von @media (max-width: 768px) { ... } erfasst es die Regel, nicht aber die @media-Zeile um sie herum. Ein Tool, das einfach die aufgezeichneten Bereiche kopiert, gibt die mobile Regel deshalb allein aus, und sie gilt plötzlich bei jeder Bildschirmbreite. Dieses Tool liest das ganze Stylesheet zuerst in einen Baum ein. So wird jede behaltene Regel wieder in ihren eigenen @media-, @supports-, @container- oder @layer-Block geschrieben, und ein Block, in dem nichts übrig bleibt, verschwindet.
Einige At-Regeln bleiben immer erhalten, weil andere Regeln von ihnen abhängen, statt dass die Seite sie trifft: @font-face, @keyframes, @import, @charset, @property und die @layer-Reihenfolgeanweisung. Behaltene Regeln werden so übernommen, wie sie geschrieben wurden; Kommentare darin, Formatierung und Vendor-Hacks bleiben genau wie im Original.
Der Modus HTML + CSS
Fügen Sie das HTML der Seite und das Stylesheet ein oder ziehen Sie beide Dateien hierher. Das Tool parst das HTML so, wie es der Browser tun würde, ohne ein Skript auszuführen, und behält eine Regel, wenn einer ihrer Selektoren ein Element trifft. Zustände und Pseudo-Elemente wie :hover, :focus und ::before werden für diesen Test ignoriert, sodass .menu a:hover bleibt, wenn die Seite ein .menu a hat. Einen Selektor, den der Browser nicht parsen kann, behält das Tool, statt zu raten, und @keyframes überleben nur, solange eine behaltene Regel oder ein Inline-Style die Animation noch nennt.
Die Schwachstelle ist JavaScript. Eine Klasse, die ein Skript erst später hinzufügt, etwa is-open an einem Menü oder active an einer Slide, steht nicht im eingefügten HTML, also wirken ihre Regeln ungenutzt. Tragen Sie solche Namen unter Immer behalten ein, getrennt durch Leerzeichen oder Kommas. IDs funktionieren mit oder ohne #, und ein Muster zwischen Schrägstrichen wie /^elementor-/ behält jede Klasse, auf die es passt. Teilen sich mehrere Seiten ein Stylesheet, fügen Sie ihr HTML einfach nacheinander ein.
Was die Zahlen bedeuten
Nach jedem Durchlauf zeigt das Tool, wie viel es behalten hat, wie viele Regeln übrig sind und im Coverage-Modus eine Zeile pro Stylesheet. Im Modus HTML + CSS listet Entfernte Selektoren auf, was weggefallen ist. Dort finden Sie am schnellsten eine Klasse, die auf die Safelist gehört hätte. Behalten Sie die Originaldatei: Das Ergebnis ist ein neues Stylesheet, und der ehrliche Test ist, die Seite damit zu laden und hinzusehen.
Grenzen, die Sie kennen sollten
- Coverage weiß nur, was während der Aufzeichnung passiert ist. Ein Hover-Zustand, den Sie nie ausgelöst haben, ein Menü, das Sie nie geöffnet haben, oder eine Breite, die Sie nie ausprobiert haben, gilt als ungenutzt.
- Die Coverage einer Seite sagt nichts über die anderen Seiten, die dieselbe Datei laden. Lassen Sie das Tool für jedes wichtige Template laufen oder behalten Sie ein gemeinsames Basis-Stylesheet vollständig.
- Styles, die JavaScript zur Laufzeit hinzufügt, über
style-Attribute oder eingefügte Stylesheets, liegen außerhalb dessen, was einer der beiden Modi sehen kann. - Stylesheets von anderen Websites, etwa Schriften oder Widget-CSS auf einem CDN, erscheinen ebenfalls im Export; behalten oder entfernen Sie sie bewusst.
Wo es am meisten bringt
- Seiten, die mit Elementor, Divi oder einem anderen Page Builder gebaut sind und auf jeder Seite das CSS jedes Widgets laden. Die Anleitung, wie Sie eine Elementor-Seite in reines HTML und CSS umwandeln, führt durch die ganze Aufgabe.
- Themes und Frameworks wie Bootstrap, bei denen eine Landingpage nur einen Bruchteil der Klassen nutzt.
- Critical CSS inline einbinden oder ein E-Mail-Template bauen, wo jedes Byte Style etwas kostet.
- Ein altes Stylesheet vor einem Redesign prüfen, um zu sehen, welche Regeln überhaupt noch eine Seite berühren.
Dasselbe auf der Kommandozeile
Für einen Build-Schritt erledigt PurgeCSS die HTML-+-CSS-Aufgabe per Skript. Es liest die Inhaltsdateien und die Stylesheets und schreibt das bereinigte CSS in einen Ordner:
npx purgecss --css css/style.css --content index.html --output dist/css/Puppeteer zeichnet dieselbe Coverage auf wie das Coverage-Panel, und die Ausgabe lässt sich als JSON speichern und auf dieses Tool ziehen:
await page.coverage.startCSSCoverage();
await page.goto('https://example.com');
const coverage = await page.coverage.stopCSSCoverage();
fs.writeFileSync('coverage.json', JSON.stringify(coverage));Verwandte Tools
Ein Coverage-Export ist JSON, daher ist der JSON Formatter der schnellste Weg, hineinzuschauen. Bauen und testen Sie die Muster für Immer behalten mit dem Regex-Tester, und komprimieren Sie die Bilder, die die schlankere Seite noch mitbringt, mit dem Bildkonverter.