Kostenloser CSS-Minimierer: CSS-Code Online komprimieren und optimieren

Was ist ein CSS-Minifier?

Ein CSS-Minifier ist ein Werkzeug, das eine CSS-Datei (Cascading Style Sheets) verkleinert, indem es Zeichen entfernt, die Browser nicht benötigen. Es entfernt Kommentare, überflüssige Leerzeichen und Zeilenumbrüche und verkürzt einige häufige Muster, ohne das Aussehen der Seite zu verändern. Das Ergebnis ist eine kleinere Datei, die ein Browser schneller herunterladen und analysieren kann.

Wie die CSS-Minifizierung funktioniert

Webentwickler schreiben CSS mit Kommentaren, Einrückungen und Leerzeilen, weil diese Elemente das Lesen und Bearbeiten des Codes erleichtern. Browser ignorieren diese gesamte Formatierung. Ein Minifier löscht sie zusammen mit einigen weiteren Bytes ohne visuelle Funktion und hinterlässt eine kompakte Datei, die für den Produktionseinsatz statt für die Bearbeitung gedacht ist.

Dieses Werkzeug nimmt die folgenden Änderungen vor:

• Entfernt Kommentare. Jeder Block /* ... */ wird gelöscht.
• Führt Leerraum zusammen. Folgen von Leerzeichen, Tabulatoren und Zeilenumbrüchen zwischen Regeln werden auf nichts oder auf ein einzelnes Leerzeichen reduziert, wenn ein Leerzeichen eine Bedeutung hat (zum Beispiel zwischen .parent und .child in einem Nachfahrenselektor).
• Entfernt Leerraum um Satzzeichen. Leerzeichen neben {, }, :, ; und , werden entfernt.
• Entfernt überflüssige Semikolons. Wiederholte Semikolons werden zu einem zusammengeführt, und das letzte Semikolon vor einer schließenden Klammer } wird entfernt.
• Verkürzt Hex-Farben. Eine sechsstellige Farbe wie #ffffff wird zu #fff, wenn jedes Ziffernpaar übereinstimmt (Rot, Grün und Blau). Eine achtstellige Farbe mit Alphakanal, etwa #ffaa00cc, wird auf dieselbe Weise verkürzt, wenn alle vier Paare übereinstimmen.
• Entfernt die Einheit von Werten mit der Länge null. 0px, 0em und 0rem werden zu 0. Prozentwerte bleiben unverändert, da 0% nicht immer mit einem einfachen 0 austauschbar ist (beispielsweise bei einem flex-basis- oder @keyframes-Schritt).
• Entfernt die führende Null bei Dezimalzahlen. 0.5 wird zu .5.

Um eine Beschädigung der Datei zu vermeiden, lässt das Werkzeug drei Arten von Inhalten unverändert: Text in Anführungszeichen, den Wert innerhalb eines nicht in Anführungszeichen gesetzten url() sowie den Inhalt von mathematischen Funktionen wie calc(), clamp(), min() und max(). Leerzeichen innerhalb von calc(100% - 20px) sind für den Browser von Bedeutung, daher bewahrt das Werkzeug sie exakt.

Das Werkzeug führt keine doppelten Selektoren zusammen, löscht keine leeren Regelblöcke und wandelt rgb()-Farben nicht in Hex-Farben um. Das sind gültige Optimierungen, die andere Werkzeuge vornehmen, doch dieser Minifier konzentriert sich auf die oben aufgeführten Änderungen.

Die Formel für den prozentualen Rückgang

Das Werkzeug gibt an, um wie viel Prozent die Datei kleiner geworden ist:

Beide Längen werden in Zeichen gezählt. Das Ergebnis wird auf zwei Dezimalstellen gerundet.

Rechenbeispiel

Ursprüngliches CSS (193 Zeichen):

Minifizierte Ausgabe (129 Zeichen):

Anwendung der Formel: (193 − 129) / 193 × 100 = 33,16 %. Der Kommentar ist verschwunden, ebenso die Einrückung und die Zeilenumbrüche; 0px wurde zu 0, und #ffffff/#000000 wurde zu #fff/#000.

Der genaue Prozentsatz hängt von der Eingabe ab. Präzise geschriebenes CSS mit wenigen Kommentaren wird weniger stark verkleinert. Stark kommentiertes, tief eingerücktes CSS kann stärker verkleinert werden. Bei typischen Stylesheets, die mit diesem Werkzeug minifiziert werden, beträgt die Verringerung ungefähr 20 % bis 40 %.

So wird dieses Tool verwendet

1. CSS-Code in das Eingabefeld auf der linken Seite einfügen.
2. Die minifizierte Version erscheint automatisch auf der rechten Seite, ohne dass eine Schaltfläche betätigt werden muss.
3. Den über der Ausgabe angezeigten Prozentsatz der Verringerung prüfen.
4. „In Zwischenablage kopieren“ auswählen, um das minifizierte CSS zu kopieren, und es anschließend in eine Projektdatei einfügen.
5. „Löschen“ auswählen, um beide Felder zu leeren und neu zu beginnen.

Nichts, was in das Werkzeug eingegeben wird, wird an einen Server gesendet; die Minifizierung läuft im Browser.

Wann CSS minifiziert werden sollte

Entwicklungsteams minifizieren CSS häufig als Schritt ihres Build-Prozesses mit Werkzeugen wie Webpack oder npm-Skripten, sodass die Änderung vor jedem Deployment automatisch erfolgt. Die lesbare, kommentierte Quelldatei bleibt in der Versionsverwaltung; nur der Produktions-Build wird minifiziert. Zu den häufigen Einsatzbereichen minifizierten CSS gehören:

• Große Websites, etwa Onlineshops, bei denen ein kleineres Stylesheet eine schneller ladende Seite bedeutet.
• Single-Page-Anwendungen, die mit Frameworks wie React oder Vue erstellt werden und bei denen CSS zusammen mit JavaScript gebündelt wird.
• Mobile Webseiten, bei denen Nutzer eher eine langsamere Verbindung verwenden.
• HTML-E-Mails, für die häufig strenge Größenbeschränkungen gelten.

CSS-Minifizierung und Seitengeschwindigkeit

Eine kleinere CSS-Datei wird schneller heruntergeladen und analysiert, wodurch sich die Zeit bis zur Sichtbarkeit einer Seite verkürzen kann. Google hat erklärt, dass die Seitengeschwindigkeit eines der Signale ist, die beim Suchranking verwendet werden. Eine schnellere Seite kann daher unter vielen Faktoren einen kleinen Einfluss darauf haben, wie eine Website in den Suchergebnissen abschneidet. Die Minifizierung allein garantiert keine Änderung des Rankings; sie ist eine von mehreren Optimierungen, zu denen auch die Bildkomprimierung und die Antwortzeit des Servers gehören.

CSS-Minifier im Vergleich zum CSS-Beautifier

Ein Minifier komprimiert Code für den Produktionseinsatz. Ein Beautifier macht das Gegenteil: Er nimmt komprimiertes CSS und formatiert es mit Einrückungen und Zeilenumbrüchen neu, damit es wieder von Menschen gelesen werden kann. Ein Beautifier kann weder Kommentare noch ursprüngliche Variablennamen wiederherstellen, die während der Minifizierung entfernt wurden, weil diese Informationen nach dem Löschen nicht mehr vorhanden sind.

Häufig gestellte Fragen

Wie viel kleiner wird CSS durch die Minifizierung? Mit diesem Werkzeug typischerweise um 20 % bis 40 %, abhängig davon, wie viele Kommentare, Leerzeilen und Einrückungen die ursprüngliche Datei enthält. Eine Datei mit von Anfang an wenig Formatierung wird weniger stark verkleinert.

Verändert die Minifizierung von CSS das Aussehen einer Seite? Nein. Die Minifizierung entfernt nur Zeichen, die Browser ignorieren, etwa Kommentare und überflüssigen Leerraum, und schreibt einige gleichwertige Werte um (zum Beispiel #ffffff zu #fff). Die gerenderte Seite bleibt unverändert.

Sollte CSS während der Entwicklung minifiziert werden? Nein. Beim Schreiben und Debuggen des Codes sollte die lesbare, kommentierte Version beibehalten werden. Nur die Kopie, die auf einen Produktionsserver gelangt, sollte minifiziert werden, üblicherweise als automatischer Schritt im Build-Prozess.

Kann minifiziertes CSS wieder in die ursprüngliche Datei zurückverwandelt werden? Ein Beautifier kann minifiziertes CSS mit Einrückungen neu formatieren, aber er kann gelöschte Kommentare nicht wiederherstellen und keine beschreibenden Namen zurückholen, die in der minifizierten Version nie vorhanden waren. Die ursprüngliche Quelldatei sollte aufbewahrt werden.

Wandelt dieses Werkzeug rgb()-Farben in Hex-Farben um oder führt es doppelte Selektoren zusammen? Nein. Es verkürzt Hex-Farben und entfernt unnötige Zeichen, schreibt aber weder rgb()-/hsl()-Werte um noch führt es wiederholte Selektoren zusammen. Einige andere Minifier führen diese zusätzlichen Schritte aus.

Ist Minifizierung dasselbe wie Gzip-Komprimierung? Nein. Die Minifizierung entfernt unnötige Zeichen direkt aus dem Quellcode. Die Gzip- (oder Brotli-)Komprimierung wird vom Webserver angewendet, wenn die Datei gesendet wird, und verwendet einen separaten Algorithmus. Die gemeinsame Verwendung beider Verfahren erzeugt die kleinste Datei für die Übertragung über das Netzwerk.