CSS minifizieren
CSS verkleinern und optimieren: Leerzeichen und Kommentare entfernen, Regeln zusammenfassen, Ersparnis in Kilobyte und Prozent sehen.
CSS minifizieren verkleinert Stylesheets für schnellere Ladezeiten. Leerzeichen, Kommentare und überflüssige Zeichen werden entfernt, Werte gekürzt (zum Beispiel #ffffff zu #fff) und auf Wunsch doppelte Regeln zusammengefasst. Die Ersparnis siehst du in Kilobyte und Prozent. Grundlage ist der Optimierer CSSO, alles läuft im Browser.
Minifiziert
Was beim Minifizieren passiert
| Schritt | Vorher | Nachher |
|---|---|---|
| Leerzeichen entfernen | color: red; | color:red |
| Farben kürzen | #ffffff | #fff |
| Nullen kürzen | 0px, 0.20s | 0, .2s |
| Kurzschreibweise | 16px 16px 16px 16px | 16px |
| Regeln zusammenführen | Zwei .header-Blöcke | Ein Block |
Minifiziertes CSS wieder lesbar machen kannst du mit CSS formatieren. Noch mehr spart, wer ungenutzte Regeln entfernt: Ungenutztes CSS finden.
Häufige Fragen
Was bringt Minifizieren?
Typischerweise 15 bis 30 Prozent weniger Dateigröße, bei kommentarreichem Code mehr. Mit GZIP- oder Brotli-Komprimierung des Servers schrumpft die Datei weiter. Weniger Bytes bedeuten schnelleres Laden, vor allem mobil.
Was macht „Regeln zusammenfassen“?
CSSO führt Regeln mit gleichem Selektor zusammen, entfernt überschriebene Deklarationen und fasst Kurzschreibweisen zusammen. Das spart zusätzlich Platz, verändert aber die Struktur. Schalte es aus, wenn du Probleme mit der Reihenfolge vermutest.
Bleiben Lizenzhinweise erhalten?
Kommentare, die mit /*! beginnen, gelten als wichtig und bleiben auf Wunsch erhalten. Viele Lizenzen verlangen, dass der Hinweis im ausgelieferten Code steht.
Soll ich mein CSS-Original minifiziert speichern?
Nein. Bearbeite immer die lesbare Datei und erzeuge die minifizierte Fassung für die Auslieferung. Build-Tools wie Vite erledigen das in Projekten automatisch.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.