CSS-Minifizierer
Verkleinere CSS-Dateien und sieh genau, wie viel du gespart hast.
Läuft in deinem Browser. Nichts, was du eingibst, wird irgendwohin gesendet.
- Zeigt gesparte Bytes
- Entfernt Kommentare
- Nichts wird hochgeladen
So minifizierst du CSS
- Füg dein CSS ein.
- Prüf die gesparte Größe in der Statuszeile.
- Kopiere oder lade das minifizierte CSS herunter.
Was entfernt wird
- Kommentare, geschrieben als /* ... */
- Leerraum und Zeilenumbrüche zwischen Regeln und Deklarationen
- Ein abschließendes Semikolon direkt vor einer schließenden geschweiften Klammer
- Doppelte oder überflüssige Regeln, wo csso sie sicher zusammenführen kann
- Zusätzliche Semikolons und leer gebliebene Regelblöcke ohne Deklarationen darin
Typische Größenersparnis
| Ausgangspunkt | Ungefähr wie viel kleiner |
|---|---|
| Handgeschriebenes CSS mit Kommentaren | 20 bis 30 Prozent |
| Bereits kompaktes CSS | 5 bis 10 Prozent |
| Von einem Präprozessor erzeugtes CSS | 10 bis 20 Prozent |
Wann minifizieren, und wann nicht
- Minifiziere kurz vor dem Deployment, nicht während der aktiven Bearbeitung, denn ein lesbares Stylesheet lässt sich viel schneller debuggen.
- Überspring das Minifizieren einer Datei, die schon gzip-komprimiert und klein ausgeliefert wird, wo sich der Größenunterschied nicht lohnt.
Wann Minifizieren den größten Unterschied macht
- Stylesheets, die auf vielen Seiten geteilt werden, da sich die gesparten Bytes mit jedem Seitenaufruf vervielfachen.
- Große Designsysteme oder Komponentenbibliotheken mit vielen wiederholten, zusammenführbaren Regeln.
- Websites ohne Build-Pipeline, wo handgeschriebenes CSS direkt ohne weiteren Minifizierungsschritt ausgeliefert wird.
- Ein CSS-Framework, das auf nur die auf der Seite tatsächlich genutzten Utility-Klassen zusammengestutzt ist.
Häufige Fragen zu CSS-Minifizierer
Wie viel kleiner wird mein CSS?
Meist 10 bis 30 Prozent, mehr wenn das Original viele Kommentare und Leerraum hat, weniger wenn es schon kompakt ist.
Verändert Minifizieren, wie meine Seite aussieht?
Nein. Minifizieren entfernt nur Leerraum, Kommentare und überflüssige Syntax. Die Regeln, die für deine Seite gelten, bleiben gleich.
Führt das doppelte Regeln zusammen?
Ja, wo es sicher möglich ist, das kann die Datei weiter verkleinern als reines Entfernen von Leerraum.
Sollte ich die Originaldatei behalten?
Ja. Behalte die lesbare Version zum Bearbeiten und nutze die minifizierte nur in der Produktion.
Welchen Minifizierer nutzt das hier?
csso, denselben CSS-Minifizierer, den mehrere Bundler-Plugins nutzen. Er fasst auch manche doppelten und überflüssigen Regeln zusammen, über reines Entfernen von Leerraum hinaus.
Ist minifiziertes CSS noch sicher in ein Stylesheet einfügbar?
Ja, es ist Standard-CSS mit entferntem Leerraum. Jeder Browser oder jedes Build-Tool liest es genau wie das Original.
Entfernt es Vendor-Präfixe, die ich noch brauche, wie -webkit-?
Nein. Vendor-präfixierte Eigenschaften und Werte bleiben genau wie geschrieben. Minifizieren entfernt nur Leerraum, Kommentare und sicher zusammenführbare Regeln, nie eine Eigenschaft, die dein CSS tatsächlich deklariert.
Was passiert mit CSS-Custom-Properties (Variablen)?
Sie bleiben unverändert, samt ihrer --Namen und Werte, da Minifizieren Custom Properties nicht umbenennt oder auflöst.