10 Online-Werkzeuge zur CSS-Komprimierung

Style Sheets werden zumeist in einer eigenen Datei ausgelagert, auf die aus einem weiteren Dokument zugegriffen wird. Bei jedem Aufruf der Webseite lädt der Browser diese CSS-Datei. Um den Seitenaufruf zu beschleunigen und den Traffic der Webseite zu verringern, ist es empfehlenswert, die fertige Datei zu komprimieren. Dr. Web prüft 10 der gängigen Online-Tools auf Herz und Nieren.

Komprimierte CSS-Dateien beschleunigen den Traffic

Ist die CSS-Datei beispielsweise 15 Kilobyte groß und „wiegt“ nach der Kompression nur noch 10 Kilobyte, so lassen sich stolze 5 Kilobyte einsparen. Das hört sich zwar im ersten Moment nicht viel an, wenn allerdings die täglichen Aufrufe einer Website beachtet werden, so kommen sehr schnell mehrere dutzend Megabyte zusammen. Online werden einige Tools angeboten, die es dem Seitenbetreiber ermöglichen, eine CSS-Datei zu komprimieren.

Bei den verschiedenen Diensten sind per Standard-Einstellung die wichtigsten Optionen, wie etwa das Entfernen von Leerzeichen oder von Kommentaren, gesetzt. So lassen sich bereits ohne eigene Konfiguration CSS-Dateien optimieren. Als Versuchskaninchen im Test aktueller Online-Tools zur CSS-Komprimierung nutzen wir die CSS-Datei von diesen Seiten.

CSS Optimizer

Der CSS Optimizer ist ein recht typisches Online-Werkzeug zur Komprimierung. Die CSS-Datei wird zunächst mit einer der drei Optionen zur Optimierung dem Tool bereitgestellt. Es ist möglich, die direkte URL zu dem Stylesheet anzugeben, die entsprechende Datei selbst hochzuladen oder den Quellcode in ein vorgefertigtes Textfeld einzufügen. Die Verarbeitung startet man dann über Optimize!. Auf Wunsch kann man vor dem Komprimieren angegeben, dass keine Zeilenumbrüche entfernt werden sollen.

Zum Test wird der Quellcode per Copy & Paste in das Textfeld eingefügt. Das Tool zeigt nach der Umwandlung an, dass das Stylesheet zuvor 14,13 KB groß war, nach dem Komprimieren und Entfernen von aller Zeilenumbrüche nur noch 11,35 KB, was einer Einsparung von 19,71% entspricht.

CSS formatter v1.925

Mit dem CSS formatter lassen sich nicht nur CSS-Datei komprimieren, sondern auch unformatierte in formatierte CSS-Skripte umwandeln. Auch bei diesem Tool kann der Nutzer das Stylesheet entweder in ein vorgegebenes Textfeld einfügen oder die direkte URL zu diesem angeben. Ein Hochladen einer Datei ist hier nicht möglich.

Standardmäßig aktiviert sind die Entfernung der Kommentare, das Zusammenführen von Klassen und Attributen und die Kurzschreibweise von Farben und Attributen. Zusätzlich zu den bereits aktivierten Optionen kann der Benutzer noch angeben, ob die Klassen und Attribute sortiert werden sollen (das Tool sortiert die jeweiligen Klassen und Attribute alphabetisch) und ob das komprimierte CSS-Skript in einer Textarea ausgeben werden soll.

Auch bei dem CSS formatter erfährt der Anwender nach der Behandlung, wie effektiv das Tool gearbeitet hat. Als Ausgang wurden in unserem Beispiel 14473 Zeichen angeben, was 14,13 KB entspricht. Nach der Komprimierung enthält das CSS-Skript nur noch 9732 Zeichen und ist 9,5 KB schwer. Eingespart wurden somit insgesamt 4,63 Kilobyte, also 32,8%.

CSS-Drive – CSS-Compressor

Bei dem CSS-Compressor von CSS-Drive kann der Anwender eine normale und eine erweiterte Version aktivieren. Schon bei der normalen Version lassen sich drei verschiedene Modi der Kompression auswählen. Zur Wahl stehen „leicht“, „normal“ und „super kompakt“, was auch die Lesbarkeit der Datei beeinflusst. Darüber hinaus kann noch der Umgang mit Kommentaren angegeben werden.

Im erweiterten Modus erfährt der Anwender, was sich hinter den drei Vorgaben genau verbirgt. Anstatt sich mit den Einstellungen der Presets zufriedenzustellen, kann man hier im Detail angeben, wie die CSS-Daten komprimiert werden soll.

Zum Test habe ich „super kompakt“ ausgewählt und alle Kommentare innerhalb des Skriptes entfernen lassen. Nach der Kompression wird die Größe der Ausgangsdatei mit 14613 Byte angegeben. Das komprimierte Skript ist nur noch 9860 Byte groß, und lässt sich nun einfach aus der Textarea kopieren. Einsparung gleich 33 %.

Clean-CSS – CSS Formatierer und Optimierer

Der in drei Sprachen (Englisch, Deutsch und Französisch) angebotene CSS Formatierer und Optimierer erscheint auf den ersten Blick recht komplex. Aber auch hier lässt sich bereits mit nur einem Klick und den Standardeinstellungen eine Menge bewirken. Zuvor muss das Stylesheet über die direkte Eingabe in ein Textfeld oder per URL geladen werden. Eine Selectbox dient der Auswahl, wie stark die Komprimierung des Stylesheets sein soll.

Insgesamt stehen vier verschiedene Einstellungen zur Verfügung, von „Höchste (keine Lesbarkeit, niedrigste Größe)“ bis „Niedrig (höhere Lesbarkeit)“. Besonders interessant ist die Möglichkeit, eine eigene benutzerdefinierte Vorlage festzulegen.

Neben der Kompressionsstufe lassen sich weitere Optionen wie etwa „Eigenschaften zusammenfassen“, „Farben kombinieren“ oder „font-weight kombinieren“ aktivieren. Als zusätzliches Feature ist es möglich, ungültige CSS-Eigenschaften automatisch entfernen zu lassen. Dabei kann angegeben werden, welcher CSS-Standard genutzt werden soll.

Wird bei diesem Tool die höchste Kompressionsstufe ausgewählt, lässt sich hier aus 14,473 KB ein 9,496 KB Stylesheet zaubern. Das ist eine Einsparung von insgesamt 34,4%.

CSS Cascading Style Sheet Optimiser

Der CSS Cascading Style Sheet Optimiser von flumpcakes analysiert das über eine URL oder über das Textfeld gesendete Stylesheet so, wie es ein Browser tun würde. Aus diesem Grund ist es wichtig, alle Browser-spezifischen Hacks vor der Kompression zu entfernen. Sieben verschiedene Optionen stehen dem Anwender dann zur Verfügung.

Nach dem Entfernen der „Pretty Print“ Option, um auf diesem Wege das Stylesheet weiter zu verkleinern, schafft es das Skript insgesamt 31% der Originalgröße einzusparen. Dabei gibt das Skript die vorherige Größe mit 13798 Bytes und die Größe nach der Kompression mit 9481 Bytes an.

CSS SuperScrub

Ein recht schlank wirkendes Online-Werkzeug ist der CSS SuperScrub. Im Gegensatz zu den bisher vorgestellten Werkzeugen kann man nur die URL zu dem Stylesheet anzugeben. Eine direkte Eingabe in ein Textfeld oder die Möglichkeit, die Datei hochzuladen, fehlen hier also.

Doch auch wenn das Tool dem Anwender kaum Möglichkeiten der Konfiguration eröffnet, lassen sich mit diesem dennoch 26,1% der Größe einsparen.

sevenforty.com – CSS Compressor

Der CSS Compressor von sevenforty.com bietet ebenso kaum Optionen an. Das Stylesheet kann nur per File-Upload bereitgestellt werden und als einzige Option kann man hier den gewünschten Zeilenumbruch innerhalb des Stylesheets angegeben. Auch wird das komprimierte Skript nicht auf der Seite ausgegeben, sondern auf dem Server in einer ZIP-Datei gepackt, welche der Anwender dann auf seinen Computer herunterladen muss. Erst nach dem Entpacken der Datei steht dem Anwender das neue Stylesheet zur Verfügung. Eingespart werden hierbei etwa 27%.

CSS Compressor

Bei dem CSS Compressor der gleichnamigen Domain wird das Stylesheet durch die direkte Eingabe in ein Textfeld zur Verfügung gestellt. Der Anwender kann nun aus vier verschiedenen Stufen der Kompression eine auswählen, je nachdem, wie gut lesbar das komprimierte Stylesheet später sein soll. Neben der Kompressionsstufe kann man auch noch einige weitere Optionen, wie etwa „Eigenschaften sortieren“, „entfernen unnötiger Semikolons“ oder „Selektoren in Kleinbuchstaben“, bestimmen.

Mit der höchsten Kompressionsstufe lässt sich das Skript von insgesamt 14.473 KB auf 9.342 KB verkleinern, was einer Einsparung von 35,5% entspricht.

lotterypost.com – CSS Compressor

Auch bei dem CSS Compressor von lotterypost.com ist es nur möglich, dass zu komprimierende Stylesheet direkt in ein Textfeld einzugeben. Nach dem Einfügen kann der Anwender nicht mehr machen, als den Button zum Starten anzuklicken. Aber auch ohne das Setzen entsprechender Einstellungen schafft es das Skript, den Beispielcode um 34,1% zu verkleinern. Dabei wird das 14,473 KB große Stylesheet auf 9,535 KB reduziert.

Funktionsbeschreibung als Vorlage für eigene Tools

Zwar ist es nicht möglich, individuelle Einstellungen vorzunehmen, doch es wird als kleiner Ersatz genau beschrieben, wie das Online-Tool funktioniert. Das könnte durchaus für diejenigen interessant sein, die überlegen, ein eigenes Tool zu entwickeln.

CSS Compressor Tool

Auch bei dem CSS Compressor Tool muss der CSS-Code per Copy & Paste in die vorgegebene Textbox eingefügt werden. Alle wichtigen Angaben, um den Code zu optimieren, sind bereits gesetzt. Natürlich können die entsprechenden Einstellungen auf Wunsch des Anwenders auch deaktiviert werden.

Werden jedoch alle Default-Einstellungen beibehalten, lässt sich das 14473 Byte große Skript auf eine Größe von 9842 Bytes verkleinern. Das entspricht einer Einsparung von um 32%.

Hinweis

Egal welches der Tools zur CSS-Kromprimierung – von denen ich hier nun eine kleine Auswahl vorgestellt habe – Sie verwenden, ist eine Sicherung der Originaldatei ein Muss.

(mm),