CSS online komprimieren, sicher auf die kleinste Größe

Wenn von einem CSS-Kompressor die Rede ist, geht es darum, aus einem Stylesheet so viele überflüssige Bytes wie möglich zu entfernen, ohne dabei die Funktion zu beschädigen. Der entscheidende Zusatz lautet sicher. Sicher bedeutet, dass ausschließlich solche Transformationen angewandt werden, die garantiert verlustfrei sind. Das Werkzeug streicht Leerzeichen, Einrückungen, Zeilenumbrüche und Kommentare, weil der Browser diese beim Auswerten des Codes ohnehin ignoriert. Zusätzlich ersetzt es Werte durch ihre kürzeste gleichwertige Schreibweise. Es erfindet dabei nichts hinzu, entfernt keine vermeintlich ungenutzten Regeln und rät nicht, was gebraucht wird. Genau darin liegt der Unterschied zwischen sicher und aggressiv: Eine sichere Komprimierung bewahrt jede einzelne Deklaration und garantiert, dass die gerenderte Seite exakt so aussieht wie zuvor, nur dass die Datei kleiner ist.

Die Verkürzung gleichwertiger Werte ist der interessanteste Teil und lohnt eine genauere Betrachtung. Eine Hex-Farbe wie #ffffff besteht aus drei identischen Paaren und lässt sich verlustfrei zu #fff zusammenfassen, ebenso wird #ff0000 zu #f00. Ein Nullwert mit Einheit wie 0px, 0em oder 0% wird zur schlichten 0, da null in jeder Einheit denselben Betrag bezeichnet. Führende Nullen wie in 0.5em entfallen zu .5em, und überflüssige abschließende Semikola vor der schließenden Klammer eines Blocks werden gestrichen. Jede dieser Umformungen ist rein syntaktisch: Der Browser liest die kurze und die lange Variante als exakt denselben Wert. Deshalb sind sie ausnahmslos sicher. Sie sparen echte Zeichen, ohne die Semantik zu berühren, und tragen in der Summe spürbar zur kleineren Endgröße Ihres Stylesheets bei.

Die kleinere Datei wirkt sich unmittelbar auf die Leistung Ihrer Seite aus. Über das Netz wandern weniger Bytes, was auf mobilen Verbindungen und bei hoher Latenz am deutlichsten spürbar ist. Gleichzeitig muss der Browser weniger Text einlesen und in seine interne Darstellung, das CSSOM, überführen, bevor er die Seite aufbauen kann. Da CSS zu den rendering-blockierenden Ressourcen zählt, verkürzt jede eingesparte Verarbeitungszeit den Weg bis zum ersten sichtbaren Aufbau. Wie viel Sie herausholen, hängt vom Ausgangszustand ab: Ein bereits knapp geschriebenes Stylesheet lässt sich weniger verkleinern als eines mit vielen Kommentaren und großzügiger Formatierung, bei dem verlustfreie Einsparungen von zwanzig bis über vierzig Prozent gut erreichbar sind. Da ein Klick genügt, ist der Kompressor eine der günstigsten Maßnahmen, um die Auslieferung Ihres CSS zu verbessern.

Ein sicherer Kompressor ersetzt nicht die serverseitige Komprimierung, sondern ergänzt sie. Die hier durchgeführte Minifizierung reduziert die Zeichenanzahl in der Datei selbst, während gzip oder Brotli den ausgelieferten Text zusätzlich auf Byte-Ebene zusammenfassen. Beide zusammen liefern das kleinste Resultat. Halten Sie zugleich Abstand von übertrieben aggressiven Werkzeugen, die versprechen, angeblich ungenutzte Regeln zu entfernen, denn solche Eingriffe sind nicht mehr garantiert verlustfrei und können bei dynamisch erzeugten Klassen zu fehlendem Styling führen. Dieser Kompressor beschränkt sich bewusst auf sichere Transformationen. Bewahren Sie außerdem stets eine unkomprimierte Quellkopie auf. Die komprimierte Ausgabe steht in einer einzigen dichten Zeile und eignet sich nicht zur Pflege. Bearbeiten Sie die lesbare Originaldatei und lassen Sie die Komprimierung als letzten Schritt vor der Auslieferung laufen.

Der gesamte Vorgang läuft ausschließlich in Ihrem Browser ab. Ihr CSS wird clientseitig mit JavaScript verarbeitet und zu keinem Zeitpunkt an einen Server übertragen, gespeichert oder mitgeschnitten. Wenn Sie möchten, öffnen Sie den Netzwerk-Tab der Entwicklerwerkzeuge und beobachten, dass beim Komprimieren keine ausgehende Anfrage mit Ihrem Code erscheint. Diese lokale Arbeitsweise macht das Werkzeug auch für vertraulichen Code geeignet, etwa für interne Designsysteme, Kundenprojekte oder noch nicht veröffentlichte Layouts, die aus Compliance-Gründen den Rechner nicht verlassen dürfen. Es entfällt jede Anmeldung, jedes Konto und jede Wartezeit durch Serverlast. Die Nutzung ist kostenlos, und die Ausgabe erhält weder Wasserzeichen noch Herkunftskommentare. Sie bekommen genau Ihr Stylesheet zurück, nur auf die kleinste sichere Größe gebracht und damit bereit für den produktiven Einsatz.