CSS komprimieren
Jedes Byte CSS muss heruntergeladen und geparst werden, bevor eine Seite gerendert werden kann. Kleinere Stylesheets bedeuten einen schnelleren First Paint, bessere Core Web Vitals und weniger Datenverbrauch. Dieser CSS Minifier entfernt Leerzeichen und Kommentare und wendet strukturelle Optimierungen an – er fasst doppelte Regeln zusammen, kürzt Farbcodes und entfernt überflüssige Werte. So wird dein Stylesheet so klein wie möglich, ohne das Aussehen der Seite zu verändern.
Funktionen
- Entfernung von Leerzeichen und Kommentaren.
- Kürzung von Werten: Farben, Nullen, Einheiten und Schriftstärken.
- Strukturelle Optimierung: Fasst doppelte Selektoren zusammen und entfernt überschriebene Deklarationen.
- Lizenzkommentare (
/*! … */) bleiben auf Wunsch erhalten. - Größenvergleich in Bytes und Prozent.
- Privat: Läuft vollständig in deinem Browser.
Vorher und nachher
.card .title {
font-weight: bold;
color: #333333;
}
.card .title {
font-size: 1.25em;
}
wird zu
.card .title{font-weight:700;color:#333;font-size:1.25em}
Wann du CSS komprimieren solltest
Komprimiere CSS als Teil deines Build-Prozesses für die Produktion und behalte den lesbaren Quellcode in der Versionskontrolle. Die meisten Frameworks und Bundler erledigen das automatisch; dieses Tool ist praktisch für schnelle Anpassungen, CMS-Themes, E-Mail-Templates, eingebettete Widgets und Projekte ohne Build-Schritt.
Verwandte Tools
Komprimiere Skripte mit dem JavaScript Minifier, erstelle Styles visuell mit dem Box Shadow Generator und dem CSS Gradient Generator, oder formatiere JSON mit dem JSON Formatter.