CSS-Minifier & Formatter

Was der CSS-Minifier entfernt und kürzt

Wie viel bringt Minimieren?

Bei typischem, gut kommentiertem CSS spart das Minimieren 15 bis 40 Prozent der Dateigröße. Komprimiert der Server zusätzlich mit gzip oder Brotli, schrumpft der Unterschied, weil Kompressionsverfahren Wiederholungen ohnehin gut verkleinern – trotzdem lohnt sich beides, denn der Browser muss die entpackte Datei parsen. Größere Effekte erzielen Maßnahmen wie das Entfernen ungenutzten CSS (Tree Shaking), das Auslagern von kritischem CSS in den Head und der Verzicht auf riesige Frameworks für kleine Seiten.

Achte beim Minimieren darauf, dass Leerzeichen in bestimmten Ausdrücken bedeutsam sind: In calc() müssen Leerzeichen um + und − stehen, und Leerzeichen zwischen Selektoren (Nachfahren-Kombinator) dürfen nicht entfernt werden. Der Minifier beachtet das.

Typische Anwendungsfälle für den CSS-Minifier

Eine Stylesheet-Datei ist über die Jahre auf 180 KB gewachsen, weil Kommentare, Erklärzeilen und vier Leerzeichen Einrückung mit ins Projekt gewandert sind. Ein Klick reduziert sie, und die Anzeige mit Größe vorher und nachher zeigt, was tatsächlich gespart wird – oft ein Drittel. Wichtige Kommentare bleiben mit dem Haken für Lizenzhinweise erhalten.

Der zweite Einsatz ist die Kontrolle: Ausgeliefertes, minimiertes CSS aus einer Vorlage willst du anpassen. Über „Formatieren“ entsteht wieder lesbare Struktur mit Einrückung, sodass du die Regel findest, die deinen Button verschiebt. Danach minimierst du für die Auslieferung neu – dieselbe Datei, zwei Richtungen.

Der dritte Anwendungsfall ist die Abnahme vor der Übergabe: Du siehst, ob Kommentare, Rasterangaben und Hilfetexte noch in der Datei stecken. Solche Hinweise gehören in die Arbeitsfassung, nicht in die ausgelieferte – und anhand der Größenanzeige lässt sich belegen, was die Bereinigung gebracht hat.

Für wen sich der CSS-Minifier eignet

Sinnvoll ist er für Frontend-Entwicklerinnen vor jedem Deployment, für Betreiber von Themes, die ihre Stylesheets ohne Build-Schritt ausliefern, für Agenturen bei der Übergabe optimierter Dateien an Kunden sowie für Teams, die vor der Veröffentlichung prüfen, ob Kommentare und Hilfetexte noch in der Datei stecken.

Für Markup gehört der HTML-Formatter daneben, für JavaScript der JavaScript-Minifier. Farbwerte in anderen Schreibweisen zusammenzubringen, übernimmt der Farbcode-Umrechner.

Auch Schulen und Weiterbildungen arbeiten mit dem Tool, weil die Größenanzeige unmittelbar zeigt, was in einer Datei überflüssig ist. Ein Vergleich zweier Fassungen erklärt den Begriff Optimierung ohne weitere Folien. Für die Abnahme vor der Übergabe reicht die Zahl als Beleg, dass die Datei tatsächlich bereinigt wurde.