Schreibt man eine Weile an einer Seite, wächst das Stylesheet zusehens. Nur bei den ganz Ordentlichen unter uns bleibt der Code dabei schön übersichtlich und lesbar. Was also tut man, wenn die Seite zwar fertig ist, das Stylesheet dafür aber extrem unaufgeräumt aussieht?
Möglichkeit Nummer eins ist, den CSS Code selbst auf Vordermann zu bringen. Dies hat den Vorteil, dass man nach jedem Schritt das Ergebnis kontrollieren kann.
Möglichkeit Nummer Zwei ist, Tools zum Optimieren des CSS einzusetzen. An dieser Stelle habe ich mal vier Tools ausprobiert, die eine solche Optimierung versprechen.
Dazu habe ich das Screen Stylesheet von Schraegschrift durch die Tools gejagt und anschließend geprüft, welche Auswirkungen das Optimieren auf das Design hatte.
Originalgröße des Stylesheets vor dem Optimieren: 21.6 KB
1. CleanCSS
Dieser Optimierer bietet die verschiedensten Möglichkeiten, die Lesbarkeit mit der Komprimierung in Einklang zu bringen. Die härteste Methode brachte es auf 16.4 KB. Mit der Lesbarkeit des CSS Stylesheets war es dann aber auch vorbei. Ein weiteres Arbeiten an dem Stylesheet kaum denkbar. Das Design der Website funktionierte nach dieser Optimierung des CSS bis auf einen kleineren Fehler bei den Social Network Buttons tadellos.
Die Optimierung mit erhöhter Lesbarkeit brauchte immerhin auch noch eine kleinere Filegröße zu Stande: 21.1 KB
Hier gab es keinerlei Fehler mehr. Selbst bei der höchsten Lesbarkeit gab es noch eine kleine Einsparung in der Filegröße. Ich muß auch sagen: Ja, das Stylesheet sieht echt besser aus als vorher.
CleanCSS ermöglicht die Eingabe des Stylesheets auch durch Angabe einer URL, nicht jedoch den Upload eines Files. Das optimierte Resultat hingegen kann als Datei ausgegeben werden.
Die Seite ist in Deutsch verfügbar unter: http://www.cleancss.com/
2. Robson CSS Compressor
Die Möglichkeiten zum Optimieren sind hier nicht ganz so ausgefeilt. In der lesbar-Variante komme ich hier auf 23.6 KB. Das ist mehr als beim Original. Das Stylsheet funktioniert aber problemlos.
16.8 KB hat das Stylesheet nach der Optimierung auf die kleinste Variante. Auch hier ist kein Fehler auf der Seite zu erkennen.
Beim Robson CSS Composer habt Ihr die Möglichkeit eine Stylesheet Datei hochzuladen. Das Angeben einer URL ist ebenfalls vorgesehen.
3. CSS Optimizer
Kaum Einstellmöglichkeiten bietet dieses Tool. Vorgesehen sind Dateiupload, URL oder Direkteingabe des zu optimierenden Stylesheets. Nach der Optimierung werden die Bildchen für externe Links plötzlich überall auf der Schraegschriftseite angezeigt. Das Stylesheet hat nun eine GRöße von 18.2 KB. Schnell wieder das Original zurückgespielt. Sieht einfach besser aus. 🙂
Die Seite ist in English unter http://www.cssoptimiser.com/optimize.php zu finden.
4. Online CSS Optimizer
Der Online CSS Optimizer erlaubt ebenfalls die Angabe einer URL und die Direkteingabe des Stylesheets. Nach dem Optimieren mit der ption Pretty Print hat die Stylesheet Datei 21.4 KB. Keine wirkliche Ersparnis. Schraegschrift.de funktioniert aber mit diesem optimierten CSS problemlos. Genau 18 KB hat die Variante ohne Pretty Print. Hier bleibt der Code aber dennoch recht lesbar. Die Seite funktioniert auch mit dieser optimierten Version des CSS Stylesheets.
FAZIT
Bis auf kleine Ausreißer haben alle Optimierungen recht gut funktioniert. Die vielfältigsten Einstellmöglichkeiten hat man bei CleanCSS. Möchte man eine Datei hochladen, muß man hingegen auf eine andere Optimierung zurückgreifen. Die kleinste Dateigröße und damit die höchste Kompression erreichte ebenfalls CleanCSS. Auch wenn man versucht, den Code auf Lesbarkeit zu trimmen, ist CleanCSS eine gute Wahl. Ich denke, ich habe meinen Favoriten gefunden.