Was ist CSS-Minifizierer?

CSS Minifier komprimiert Ihren CSS-Code, indem Leerzeichen, Kommentare und überflüssige Syntax entfernt werden. Kleinere Dateien laden schneller und heben Ihre PageSpeed-Bewertung.

Unter der Haube läuft der CSSO-Algorithmus, der mehr macht als Leerzeichen zu entfernen. Er fasst benachbarte Regeln mit demselben Selektor zusammen, kürzt Kurzschreibweisen (margin: 10px 10px 10px 10px wird margin: 10px), entfernt Vendor-Prefixes, die du nicht mehr brauchst, und verkürzt sechsstellige Hex-Farben auf drei, wo es geht.

Anleitung

1. Fügen Sie Ihren CSS-Code in das Eingabefeld ein, laden Sie eine .css-Datei hoch oder laden Sie ein Stylesheet direkt über eine URL.
2. Klicken Sie auf „Minifizieren" — das Tool entfernt Kommentare, Leerzeichen und kürzt Werte.
3. Kopieren Sie die minifizierte Ausgabe oder laden Sie sie als .css-Datei herunter. Prüfen Sie die angezeigte Kompressionsrate.

Wann verwenden

• Ein Stylesheet für eine statische Seite ausliefern, die keinen Build-Schritt hat.
• Zwei Versionen einer CSS-Datei vergleichen und zeigen, wie viel handgeschriebene Redundanz drinsteckt.
• Die letzten Bytes herausholen, wenn kritisches CSS direkt in den HTML-head eingebunden wird.

Ergebnis

Ein 24-KB-Stylesheet mit Kommentaren und Formatierung wird auf 16 KB minifiziert — eine Reduktion von 33 %, die bei 3G-Verbindungen 50 ms Ladezeit einspart.

Häufige Fragen

Wird minifiziertes CSS im Browser anders dargestellt als das Original?

Browser verarbeiten minifiziertes und formatiertes CSS identisch. Kaskade, Spezifität und berechnete Stile bleiben gleich. Anders ist nur die Dateigröße auf der Platte und über die Leitung.

Sollte ich zusätzlich gzip einsetzen?

Ja. Gzip nach der Minifizierung spart weitere 60-80 %. Die meisten CDNs aktivieren gzip automatisch. Vorher zu minifizieren bleibt sinnvoll, weil gzip wiederkehrende Muster gut komprimiert und minifiziertes CSS davon mehr hat.

Macht die Minifizierung meine Source Maps kaputt?

Dieses Tool erzeugt keine Source Maps, weil es nur eine CSS-Zeichenkette verarbeitet und keinen Build-Graphen. Brauchst du Maps, nimm einen Bundler wie esbuild oder Vite, der neben dem minifizierten CSS die .css.map ausgibt.

Warum stehen in meiner minifizierten Datei noch Leerzeichen?

CSS bewahrt Leerzeichen in Zeichenketten, zwischen Selektorteilen (.a .b ist nicht .a.b) und in calc(). Der Minifier entfernt nur die Leerzeichen ohne semantische Bedeutung und lässt den Rest stehen.

Ist es sicher, CSS mit Custom Properties (CSS-Variablen) zu minifizieren?

Ja. Namen und Werte der Custom Properties bleiben unverändert. Der Minifier kürzt nur die Formatierung drumherum. Variablen wie --brand-color überleben genau so wie geschrieben und funktionieren in var() weiter.

Ähnliche Tools