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),
16 Antworten
> Rang 1 belegte der CSS Compressor von sevenforty.com, …
Das muss IMHO heißen:
Rang 1 belegte der CSS Compressor von http://www.csscompressor.com, …
Oder?
Ich halte einen Hinweis für angebracht, dass die Komprimierung unter Umständen Auswirkungen auf die Darstellung hat. Insbesondere wenn Klassen/IDs “sortiert” und zusammengefasst werden, ist ein Backup des Original-CSS ein Muss!
@Alex: Pardon – da hätte die Redaktion noch einen Link setzen können, nämlich diesen
http://www.sevenforty.com/tools/csscompressor
@Manuela Müller: ich meinte, dass der in Ihrem Vergleich am besten wegkommende Compressor nicht der im Fazit genannte beste Compressor ist (rein inhaltlich/logisch).
Habe mir die jetzt mal angeschaut. Bei allen Tools, die “stark” komprimieren kann es wie von Steffen gesagt durch das Sortieren und Zusammenfassen zu veränderten Darstellungen kommen. Das “sicherste” Tool scheint mir noch der YUI Compressor zu sein (eigentlich für JS, hat aber auch eine CSS-Funktion): http://developer.yahoo.com/yui/compressor/
Das ist zwar zunächst kein Online-Tool, wie ich aber gerade bemerkt habe, gibt es bereits Online-Tools, die den YUI Compressor verwenden, z.B. http://refresh-sf.com/yui/
Bisher halte ich für mich solche CSS Kompressoren für unnötig. Zum einem, weil meine Projekte gar nicht so groß sind, das es sich lohnen würde. Und zum anderen sind meine CSS-Dateien so sortiert, das ich für mich immer nachvollziehen kann, was für wo an welcher Stelle eingesetzt wird.
Der mehr Traffic, der durch meine unkomprimierten CSS-Datei dabei “verursacht” wird, ist mehr als vernachlässigbar.
Bei einer Webseite wie Yahoo.de oder Chip.de möge die Nutzung Sinn machen.
So für “Just 4 Fun” werde ich die vorgestellten Tools mal durchprobieren und mir mal anschauen, was die in meinen CSS so anrichten 😉 .
Nichts gegen die Optimierung von Ladezeiten. Aber ein paar winzige kB über eine komprimierte CSS-Datei sparen, die im Cache landet und nur einmal geladen wird ?!
Das erscheint mir sehr übertrieben angesichts der Tatsache, dass die meisten Webdesiger mit Photoshop arbeiten und ihre verwendeten jpgs damit exportieren. Dessen Komprimierungsfunktion ist selbst in CS4 immer noch grauenhaft (z.B. in Vergleich früheren Fireworks-Versionen) und lässt so viel liegen.
Und dann ist da der Trend zu png. Hat seine Vorteile, bringt aber fast durchweg mehr auf die Waage, als ein vergleichbares gif oder jpg. Das Einsparpotential bei Bild-Dateigrößen ist m.E. also um so vieles größer und wird heutzutage so sehr vernachlässigt, dass es mir sehr übertrieben scheint, CSS-Dateien komprimieren zu wollen.
Das nenn ich mal geil und werd es gleich probieren, denn ich schon ein paar hundert css-Zeilen auf snooker-classic.de
Ich berichte meine Erfahrungen und danke für die Links
Da bin ich ja mal gespannt mach mich gleich ans testen der tools ran ich hoffe es wird gehalten was es verspricht 🙂
/* Begin function compress */
function compress($buffer) {
/* remove comments */
$buffer = preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $buffer);
/* remove tabs, spaces, new lines, etc. */
$buffer = str_replace(array(“\r\n”, “\r”, “\n”, “\t”, ‘ ‘, ‘ ‘, ‘ ‘), ”, $buffer);
/* remove unnecessary spaces */
$buffer = str_replace(‘{ ‘, ‘{‘, $buffer);
$buffer = str_replace(‘ }’, ‘}’, $buffer);
$buffer = str_replace(‘; ‘, ‘;’, $buffer);
$buffer = str_replace(‘, ‘, ‘,’, $buffer);
$buffer = str_replace(‘ {‘, ‘{‘, $buffer);
$buffer = str_replace(‘} ‘, ‘}’, $buffer);
$buffer = str_replace(‘: ‘, ‘:’, $buffer);
$buffer = str_replace(‘ ,’, ‘,’, $buffer);
$buffer = str_replace(‘ ;’, ‘;’, $buffer);
return $buffer;
}
Nachdem Google in den Webmaster-Tools einen Komprimierungsvorschlag nicht mehr anzeigt (oder ich sie nicht mehr finde), habe ich hier das gefunden, was ich ziemlich gern nutze. Neben der gz-Kompression (welche leider nicht von jedem Browser genutzt werden kann) ist die Einsparung von Traffic durch Textkomprimierung durchaus sinnvoll!
Wobei das kurze Script von Simon auch nicht zu verachten ist. Mal in Ruhe schauen…
Vielen Dank für diese Auflistung!
Hi Jan, ich habe nützliches ein CSS Online Tool entwickelt, mit dem man seinen CSS Code minimieren und auf das Wesentliche komprimieren kann: http://csslift.t3premium.de/
Gruß
Sam
Hi Sam, dein Tool funktioniert wunderbar. Danke!
Gruss
Gabi
Toller Artikel – hab das gleich mal ein Bookmark gesetzt. Ein paar deiner Tipps werde ich mal ausprobieren. Obwohl ich immer auch echt ein wenig Respekt davor habe, CSS und JS anzufassen. Man kann sich die Seite auch schnell damit zerschießen!
Eine interessante Sammlung. Leider kommt, es wie von einigen ja bereits angesprochen, bei manchen Tools zu Problemen bei der CSS-Darstellung. Das ist mir insbesondere bei Browser eigenen CSS-Modifikatoren aufgefallen (also: z.B. -moz…), aber leider auch bei dem neueren CSS calc().
Ich habe hier noch einmal ein Tool gefunden, welches diese Werte nicht sortiert, Kommentare entfernt und einem Befehl eine Zeile zugesteht: http://60tools.com/de/tool/css-compressor
Kleiner Hinweis: Den Link zum CSS Optimiser solltet Ihr entfernen, da man auf eine Trojaner-verseuchte Webseite stoßt. Grüße Marco