CSS-Minifier
Füge dein Stylesheet ein: Kommentare, überflüssige Leerzeichen und Zeilenumbrüche verschwinden mit einem Klick, und du siehst, wie viel Prozent der Bytes gespart wurden.
Warum CSS minifizieren?
Jedes Leerzeichen, jeder Zeilenumbruch und jeder Kommentar in einem Stylesheet ist ein Byte, das der Browser herunterlädt, aber nie benutzt: Bei den meisten handgeschriebenen CSS-Dateien spart die Minifizierung 15–30 % der Dateigröße. Eine leichtere Datei bedeutet einen schnelleren First Contentful Paint, bessere Core-Web-Vitals-Werte und weniger verbrauchtes Datenvolumen für Besucher mit mobiler Verbindung. Es ist eine der einfachsten Optimierungen, ganz ohne Nachteile: Für den Browser verhält sich minifiziertes CSS genau wie das Original.
Was dieses Tool entfernt (und was es in Ruhe lässt)
Es entfernt Kommentare der Form /* … */ sowie Zeilenumbrüche, Einrückungen, Leerzeichen um
geschweifte Klammern, Doppelpunkte, Kommas und Kombinatoren und das letzte Semikolon vor
}. Strings in Anführungszeichen und der Inhalt von url(…) werden geschützt und
unverändert zurückgegeben: Eine Regel wie content: "a b" oder ein Pfad mit Leerzeichen wird nicht
verändert. Selektoren, Eigenschaften und Werte bleiben genau so, wie du sie geschrieben hast.
Die Komprimierung auf dem Server erledigt schon die halbe Arbeit
Fast jeder Server schickt CSS mit gzip oder Brotli komprimiert, und genau bei dieser Art von sich wiederholendem Text sind diese Algorithmen hervorragend: Leerzeichen, Einrückungen und Eigenschaftsnamen, die tausendmal vorkommen, lassen sich wunderbar komprimieren. Bei einem schon komprimierten Stylesheet bringt die Minifizierung viel weniger, als der Rückgang der Zeichenzahl vermuten lässt.
Der Gewinn ist trotzdem echt, aus zwei Gründen: Die Datei braucht nach dem Entpacken weniger Speicher und der Browser parst sie schneller. Auf einer kleinen Website sind das ein paar Kilobyte, bei einem Projekt mit zehn Stylesheets fällt die Summe ins Gewicht.
Was ein Minifier nicht anfassen darf
In Strings und URLs sind Leerzeichen Inhalt, keine Formatierung: Ein Leerzeichen in content: "a b" zu entfernen ändert, was auf der Seite erscheint. Dasselbe gilt für den Inhalt eingebetteter data: URIs, bei denen ein Zeichen weniger das Bild kaputtmacht.
Der andere heikle Bereich sind Berechnungen und Selektoren: In calc() sind die Leerzeichen um Plus und Minus von der Syntax vorgeschrieben, und im Selektor a > b kann das Leerzeichen weg, während es in a b bleiben muss, denn dort IST das Leerzeichen der Nachfahren-Kombinator.
Eine minifizierte Datei ist nicht zum Bearbeiten da
Minifiziertes CSS ist eine erzeugte Datei, keine Quelle: Du bearbeitest das Original und erzeugst die Datei neu. Wer die minifizierte Datei direkt korrigiert, bekommt zwei auseinanderlaufende Versionen, und beim ersten Neuerzeugen verschwindet die Korrektur spurlos.
Aus demselben Grund gilt, dass eine minifizierte Datei nicht in die Versionsverwaltung gehört, wenn das Projekt schon einen Build-Schritt hat: Es sind Tausende Zeilen, die sich bei jedem Build alle ändern und die Historie unlesbar machen. Ist die Website dagegen von Hand gebaut, bleibt nur, beide Dateien zu behalten, und dann gilt die Regel oben.
Siehe auch
Für JSON gibt es JSON formatieren & validieren, und wenn dein CSS unlesbar ist, weil es schon minifiziert ist, steckt der umgekehrte Weg im selben Tool. Um Regeln zu erzeugen, statt sie aufzuräumen, gibt es den CSS-Farbverlauf-Generator.