Zum Komprimieren von CSS-Dateien solltet ihr als erstes alle CSS-Dateien auf eine größe CSS-Datei reduziert haben, denn dann muss folglich auch nur eine Datei komprimiert werden. Das hat gleichzeitig auch noch den netten Nebeneffekt, dass ihr die HTTP-Requests für eure CSS-Dateien reduziert. Bei der Komprimierung gibt es in den meisten Fällen verschiedenen Optionen, wie stark die Komprimierung durchgeführt werden soll.

Ein kleiner Tipp: Führt die Zusammenlegung der CSS-Dateien und die Komprimierung dieser erst durch, wenn alle Arbeiten an der Webseite abgeschlossen sind. Für eventuelle Nacharbeiten, die immer mal wieder im laufenden Betrieb einer Webseite auftreten, solltet ihr die CSS-Dateien in ihrer unkomprimierten Form sichern. Wie stark die Dateien komprimiert werden sollen, überlasse ich jedem selbst. Im folgenden stelle ich einige Online-Quellen zum Komprimieren von CSS-Dateien vor. Als Beispieldatei dienen die Stylesheets dieses Blogs, die Datei hat eine Größe von 11.103 Bytes.

Codebeautifier

Dieses Online-Komprimierungstool basiert auf csstidy 1.3 und bietet einige verschiedenen Stufen zum  Komprimieren, wie z.B. höhere Lesbarkeit oder keine Lesbarkeit, niedrigste Größe, an. Es kann direkt  eine URL zu einer CSS-Datei angegeben werden oder der Quellcode kann über ein Textefeld angegeben  werden. Auf der höchsten Kompimierungsstufe (keine Lesbarkeit, niedrigste Größe) wurden die 11.103 Bytes auf 8.300 Bytes reduziert. Dies ergibt eine Ersparnis von 25,3 %. Im Anschluss an die Komprimierung wird zusätzlich zum optimierten Code auch eine Übersicht der veränderten CSS-Eigenschaften angezeigt.

CSSDrive

CSSDriveAuf www.cssdrive.com könnt ihr keinen direkten Pfad zu einer CSS-Datei eingeben, es wird aber natürlich ein Textfeld bereitgestellt. Wie auch beim Vorgänger www.codebeautifier.com gibt es verschiedene Komprimierungsstufen. In der höchsten Komprimierungsstufe wird die CSS-Datei von 11,55 KB auf 8,37 KB verkleinert. Das bedeutet, dass 3,18 KB bzw. 27 % komprimiert werden konnten.

CSS Compressor

CSSCompressorWie auch bei CSSdrive gibt es eine Schnellauswahl von Komprimierungsstufen, die Auswahlmöglichkeit reicht von Low bis Highest. Im Vergleich zu Codebeautifier stehen kaum weitere Optionen zur Verfügung. Eine Direkteingabe für eine URL ist nicht vorhanden.  Allerdings werden hier auch wieder die an dem Quellcode vorgenommen Änderungen angezeigt. Die Beispieldatei konnte mit diesem Komprimierungstool um 2,86 KB verkleinert werden – das bedeutet  eine Komprimierung von 26,4 %.

CSS Optimizer

CSS-OptimizerDieser Kompressor kann via URL, File-Upload oder Direkteingabe gefüttert werden und liefert bei der Beispieldatei ein beachtliches Ergebnis. Die Beispieldatei ist nachdem Kompressordurchlauf um 28,1 % geschrumpft. Das Ergebnis entschädigt auch, dass es keine Auswahlmöglichkeiten gibt, den Komprimierungsdurchlauf beeinflussen zu können.

CleanCSS

CleanCSSCleanCSS basiert ähnlich wie Codebeautifier auf CSSTidy, allerdings in der Version 1.1. Dennoch liefert CleanCSS ein ähnliches Ergbnis, aus den 11.103 Bytes sind 8.308 Bytes geworden. Das ergibt eine Komprimierung von 25,2 % oder 2.795 Bytes. Einstellungen zum Komprimierungsprozess könnt ihr ebenfalls in zahlreicher Form vornehmen. Nach dem Komprimierungsdurchlauf wird neben dem optimierten Quellcode auch die durchgeführten Änderungen am CSS-Quellcode aufgelistet.

Icey CSS Compressor

Icey CSS Compressor

Nicht mit der schönsten Aufbereitung der Ergebnisse kommt der Icey CSS Compressor daher, dafür aber mit einem akzeptablen Ergebnissen. Einstellungsmöglichkeiten sind genauso vorhanden wie die üblichen drei Möglichkeiten die eigene CSS-Datei dem Kompressor zu übergeben – Direkteingabe, File-Upload und URL-Angabe. Aus der Beispieldatei mit einer Größe von 11.103 Bytes sind 8.054 Bytes geworden, das bedeutet die CSS-Datei wurde um 27,5 % verkleinert.

CSS Formatter

Der CSSFormater bietet keinen File-Upload an, dafür aber eine Direkteingabe sowie die Möglichkeit eine URL anzugeben. Vom Ergebnis reiht sich der CSS Formatter in die Ergebnisse der anderen Komprimierungstools ein, von den 11.103 Bytes sind noch 8.362 Bytes übrig geblieben. Das ist eine Datei-Reduzierung von 24,7 %.

CSS Optimiser

Der CSS Optimiser kommt mit einer überschaubaren Anzahl an Optionen daher und bietet ebenfalls nur zwei Möglichkeiten für die CSS-Quellcode-Eingabe zur Verfügung. Der Komprimierungsgrad kann leider ebenfalls nicht eingestellt werden, so erklärt sich vielleicht auch das Ergebnis von einer Reduzierung von 12 %. Aus den anfänglichen 11.103 Bytes sind nur 9.691 Bytes geworden, es konnten somit 1.343 Bytes eingespart werden.

CSS SuperScrup

Dieser Compressor bietet lediglich die Eingabe via URL und die Einstellungen sind ebenfalls sehr begrenzt, dafür ist das Ergebnis akzeptabel. Die eingehenden 11.103 Bytes sind zu 8.514 Bytes zusammengeschrumpft, in Prozenten ausgedrückt, hat sich die Dateigröße um 23,3 % reduziert.

Fazit

Viele der CSS-Kompressoren bewegen sich in etwa im selben Bereich der Komprimierungsrate. Es kommt da sicherlich darauf an, was ihr für einen Quellcode optimieren wollt. Hier gilt: Probieren geht über studieren – probiert also einfach eure persönlichen Favoriten aus. Mir persönlich hat der Codebeautifier, ausgehend von den Einstellungsmöglichkeiten und dem Ergebnis, sehr gut gefallen. Der CSS Optimizer lieferte die beste Komprimierungsrate, dicht gefolgt von dem Icey CSS Compressor. Diesen CSS-Compressoren solltet ihr auf jeden Fall einen Besuch abstatten.

Es sollte euch natürlich bewusst sein, dass die Ergebnisse dieses Überblicks nicht repräsentativ sind und so verallgemeinert werden können, dass sie für alle CSS-Quellcodes gelten. Eine Tendenz lässt sich mit dieser Übersicht aber erkennen. Ihr solltet euch auf jeden Fall bewusst sein, dass die Komprimierungsrate natürlich sehr von eurem „Programmierstil“ abhängig ist. Der eine erstellt CSS-Quellcode schon sehr optimiert und der andere wiederum nicht, d.h. das Ergebnis kann auch von Benutzer zu Benutzer stark abweichen. Dennoch kann es sicherlich nicht schaden, sich einmal mit dem Thema der CSS-Kompression zu beschäftigen. Denn nicht nur ihr profitiert durch geringen Traffic von euren Optimierungen, sondern auch eure Besucher werden es euch danken, wenn die Webseitengröße schrumpft. Denkt aber immer daran, dass nicht jede optimierte/komprimierte Variante auch einwandfrei funktioniert, sichert daher immer eure aktuellen und funktionierenden CSS-Dateien.