CSS minifizieren

Wo die Bytes wirklich stecken

Der größte Teil der Ersparnis sind Leerraum und Kommentare, und davon gibt es in einem handgeschriebenen Stylesheet sehr viel – Einrückungen, Leerzeilen zwischen Regeln und die Abschnittsüberschriften, die eine große Datei übersichtlich machen, sind nach der Auslieferung reiner Ballast. Darüber hinaus werden Werte so gekürzt, dass sich ihre Bedeutung nicht ändern kann: Eine als #ffffff geschriebene Farbe wird zu #fff, 0px wird zu 0, weil Null keine Einheit braucht, die führende Null in 0.5em fällt weg, und margin: 10px 10px 10px 10px schrumpft zu margin: 10px.

Bewusst nicht gemacht wird alles aus der riskanten Kategorie. Regeln mit identischen Deklarationen zusammenzuführen oder sie umzusortieren, verändert die Kaskade – und die Kaskade ist der Teil von CSS, in dem von zwei Regeln gleicher Spezifität die spätere gewinnt. Ein Minifier, der aggressiv umsortiert, liefert eine kleinere Datei und bei einem großen Stylesheet eine subtil andere Seite. Auch doppelte Deklarationen sind oft Absicht – als Fallback für ältere Browser, die die zweite ignorieren.

Verschachtelte Regeln und die moderne Bereichssyntax für Media Queries werden abgelehnt statt minifiziert, und der Grund verdient eine Erklärung, weil es das Gegenteil dessen ist, was die meisten Tools tun. Der Parser dahinter ist älter als beide Funktionen, und wenn er auf etwas stößt, das er nicht versteht, meldet er keinen Fehler – er löscht es stillschweigend. Ein verschachtelter Block verschwindet also einfach aus der Ausgabe, und der Seite fehlen Styles, ohne dass irgendetwas davon berichtet hätte. Die Datei abzulehnen ist die ehrliche Antwort. Wenn Ihr Stylesheet native Verschachtelung oder @media (400px <= width <= 700px) verwendet, nehmen Sie eines der Tools unten.

Wie beim Markup gilt: Beurteilen Sie das Ergebnis nach der Komprimierung. Stylesheets werden mit gzip oder Brotli komprimiert ausgeliefert, und diese Algorithmen kommen mit wiederholtem Leerraum schon extrem gut zurecht – eine Datei, die sich um 30 Prozent minifizieren lässt, schrumpft bei der Übertragung womöglich nur um 5 Prozent. Die Ersparnis ist echt, aber kleiner als die Schlagzeilenzahl.

Wenn Sie etwas anderes brauchen

Lightning CSS ist das richtige Tool für moderne Stylesheets: Es versteht Verschachtelung, Media-Bereiche, Farbfunktionen und alles andere, was in den letzten Jahren hinzugekommen ist, minifiziert gründlicher als alles Ältere und übersetzt neue Syntax nebenbei auch für ältere Browser. esbuild --minify style.css ist fast genauso gut und extrem schnell. Beide gehören in einen Build-Schritt, nicht in einen Browser-Tab.

Der weitaus größere Gewinn liegt meist darin, Regeln zu entfernen, die Sie nicht verwenden. Eine Website auf Basis eines Utility-Frameworks oder einer Komponentenbibliothek liefert häufig Stylesheets aus, deren Großteil von nichts auf der Seite je getroffen wird – und PurgeCSS oder der Build des Frameworks selbst verkleinert das um eine Größenordnung. Wer ungenutztes CSS minifiziert, macht ungenutztes CSS kleiner; es zu löschen ist die eigentliche Lösung.