CSS-Minifier

Machen Sie Ihre Stylesheets leichter

CSS blockiert das Rendern: Der Browser zeigt die Seite erst an, wenn er die Stylesheets im <head> geladen und verarbeitet hat. Die Größe des CSS wirkt sich also direkt darauf aus, wie schnell Ihre Seite erscheint. Der CSS-Minifier entfernt Kommentare, Leerzeichen, Zeilenumbrüche und andere Zeichen, die Browser nicht brauchen, und zeigt die Zeichenzahl davor und danach.

Die Styles funktionieren genau gleich; nur die Datei ist kleiner. Ideal für eigenes CSS in WordPress-, Shopify- oder AltumCode-Themes, für kleine Projekte ohne Build-Tool und für Inline-Critical-CSS.

Behalten Sie das Original lesbar für spätere Änderungen und veröffentlichen Sie die minifizierte Kopie.

So verwenden Sie den CSS-Minifier

1. Fügen Sie Ihr CSS ein.
2. Senden Sie ab, um zu minifizieren.
3. Vergleichen Sie die Zeichenzahl davor und danach.
4. Kopieren Sie das minifizierte CSS in Ihre Website oder Datei.

Beispiele

Styles eines Buttons

Eingabe:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

Ausgabe:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

Der Kommentar und die Leerzeichen verschwinden, #ffffff wird zu #fff verkürzt, 0px wird zu 0, der wiederholte margin-Wert wird zusammengefasst und 0.80 wird zu .8.

Typische Anwendungen

• Eigenes CSS minifizieren, das über das Panel eines Themes oder CMS hinzugefügt wurde.
• Stylesheets kleiner Websites und Landingpages verkleinern.
• Inline-Critical-CSS für eine schnellere erste Anzeige vorbereiten.
• Das CSS von HTML-E-Mail-Vorlagen komprimieren.
• Das Stylesheet einer Website ohne Build-Prozess verkleinern, etwa einer kleinen statischen Website oder Landingpage.
• Critical CSS für den <head> einer Seite vorbereiten.
• Die Größe von eigenem CSS reduzieren, das in ein CMS oder einen Website-Baukasten eingefügt wird.

Tipps und Wissenswertes

• Entfernen Sie zuerst ungenutzte Regeln; CSS zu löschen spart mehr, als es zu minifizieren.
• Behalten Sie nötige Kommentare (etwa Lizenzhinweise) in der Quelldatei und prüfen Sie, ob sie erhalten bleiben.
• Testen Sie die Seite nach dem Veröffentlichen, vor allem wenn Ihr CSS ungewöhnliche Tricks nutzt.
• Minifizieren Sie auch Ihr HTML und Ihre Skripte mit dem HTML-Minifier und dem JS-Minifier. Prüfen Sie Farbwerte mit dem Farbkonverter.

Sonderfälle und Grenzen

• Das Ergebnis steht in einer einzigen langen Zeile, was Fehler schwer auffindbar macht. Behalten Sie Ihre Datei lesbar und minifizieren Sie eine Kopie.
• Kommentare werden entfernt, auch Lizenzkommentare. Setzen Sie Hinweise, die Sie behalten müssen, wieder ein.
• Ungültiges CSS kann entfernt oder verändert werden. Wirkt nach dem Minifizieren etwas seltsam, suchen Sie im Original nach einer fehlenden Klammer oder einem fehlenden Semikolon.

Häufige Fragen

Was macht ein CSS-Minifier?

Er entfernt überflüssige Zeichen wie Leerzeichen und Kommentare aus dem CSS, ohne die Funktionsweise der Styles zu ändern.

Ist minifiziertes CSS schneller?

Ja, kleinere Dateien laden und verarbeiten sich schneller, was der Seite hilft, früher zu erscheinen.

Kann ich CSS „entminifizieren“?

Sie können es mit einem Beautifier neu formatieren, aber entfernte Kommentare kommen nicht zurück. Behalten Sie Ihre Originaldatei.

Sollte ich CSS minifizieren, wenn ich gzip oder Brotli nutze?

Ja. Komprimierung und Minifizierung ergänzen sich für die kleinste Übertragungsgröße.

Ändert die Minifizierung das Aussehen meiner Website?

Das sollte sie nicht. Nur Zeichen, die Browser ignorieren, werden entfernt, und Werte werden zu gleichwertigen Formen wie #fff verkürzt.

Ähnliche Tools

• HTML-Minifier: Minifizieren Sie Ihr HTML, indem Sie alle unnötigen Zeichen entfernen.
• JS-Minifier: Minifizieren Sie Ihr JS, indem Sie alle unnötigen Zeichen entfernen.
• Farbkonverter: Wandeln Sie Ihre Farbe in mehrere Formate um.
• Textgrößen-Rechner: Ermitteln Sie die Größe eines Textes in Byte (B), Kilobyte (KB) oder Megabyte (MB).
• HTTP/2-Checker: Prüfen Sie, ob eine Website das HTTP/2-Protokoll verwendet.