Joomla!^® User Group Fulda

Neben dem HTML-Code hat der Webserver heute noch einiges an CSS- und JavaScript Code zum Browser zu übertragen. Um die Ladezeit der Webseiten zu verbessern, kann man zur Optimierung und Komprimierung von CSS Formatierungen greifen. Doch, wie funktioniert sowas?

Schauen Sie sich folgenden CSS Code an (216 Byte ANSI):

.button {
   border-left-width: 6px;
   border-left-style: solid;
   border-left-color: rgb(153,153,153);
   border-bottom-width: 2px;
   border-bottom-style: solid;
   border-bottom-color: rgb(153,153,153);
}

Dieser CSS Code lässt sich zunächst - um die Hälfte - auf 106 Bytes verkürzen in dem man die border-Styles zusammenfasst:

.button {
    border-left: 6px solid rgb(153,153,153);
    border-bottom: 2px solid rgb(153,153,153);
}

Weiterhin lässt sich die Farbe ebenfalls um einiges verkürzen, wenn man statt der RGB-Notation die Hex-Schreibweise nutzt (wir kommen auf 88 Byte):

.button {
    border-left: 6px solid #999999;
    border-bottom: 2px solid #999999;
}

In diesem Fall könnte man die #999999 auch noch auf #999 zusammenfassen, wir kommen dann auf 82 Byte.

.button {
    border-left: 6px solid #999;
    border-bottom: 2px solid #999;
}

Lässt man dann noch die Zeilenumbrüche, Tabulatoren, unnötigen Leerzeichen und das letzte Semikolon weg, sieht der Code so aus:

.button{border-left: 6px solid #999;border-bottom: 2px solid #999}

Wir haben den Code in diesem kleinen Beispiel durch das Nutzen von Kurzschreibweisen, HEX statt RGB Farben, entfernen von unnötigen Leerzeichen, Tabulatoren und Zeilenumbrüchen von 212 Byte auf 66 Byte "komprimiert". Setzt man diese Vorgehensweise konsequent ein, so kann man einige CSS-Dateien (auf dem selben Wege auch JavaScript-Dateien) stark komprimieren.

Das was man benötigt, ist eine CSS Formatierung, die von den Browsern noch einwandfrei interpretiert werden, von den Menschen aber nicht unbedingt gut gelesen werden muss.

Speichern Sie Ihre CSS Formatierungen in einer externen Datei ab. Sie sollten zwei Dateien haben: Die Eine, in der Sie arbeiten, die auch schön mit Zeilenumbrüchen und Tabulatoren formatiert ist. Die Andere, die im Web per <link>-Tag eingebunden ist und stark komprimiert wurde.

Online Tools für die CSS Komprimierung

Zur Komprimierung von solchen Dateien müssen Sie nicht unbedingt selbst hinsetzten und alles durchsehen. Gerade für diese Aufgabe gibt es einige Tools, die auch Online zur Verfügung stehen.

Online Tool "compressor" von eBiene

Versuchen Sie es selbst einmal. Nutzen Sie den obigen Code (kopieren Sie ihn in die Zwischenablage) und fügen Sie den ihn bei dem "Compressor von ebiene" ein.

Ein Klick auf "powerfull compress" genügt und es kommt ein Ergebnis heraus. OK er ist nicht ganz so mächtig, aber besser als nix. Leerzeichen, Tabulatoren und Zeilenumbrüche wurden korrekt entfernt. Die CSS Formatierungen sind immer noch Einsatzbereit.

CSS Compressor auf tools.pingates.com

Eine bessere Figur hat mit dem obigen Bespiel der CSS Compressor auf pingates.com gemacht.

Alle oben genannten Punkte wurden berücksichtigt. Vorbildlich, wie ich meine. Aber testet doch mal selbst ein wenig. Über weitere Hinweise auf solche Komprimierer würde ich mich freuen.

Applikationen für die CSS Komprimierung

Neben den "Online-Tools" gibt es da auch direkte Windows / UNIX / MAC Applikationen, die offline ausführbar sind.

YUI Compressor

Yahoo hat den YUI Compressor entwickelt, der sowohl CSS als auch JavaScript komprimiert. Was benötigen Sie? Java und den YUI Compressor.

Im Beispiel hab ich den YUI Compressor direkt in "c:\" entpackt. Die Datei "screen.css" - mit dem Inhalt der obigen Beispiels -  hab ich dann ins das Verzeichnis "c:\yuicompressor-2.4.2\build" gelegt.

Der Aufruf des YUI Compressors geschieht direkt an der Kommandozeile (Start - Alle Programme - Zubehör - Eingabeaufforderung). Die "alten" DOS Befehle "cd \" und "cd yuicompressor-2.4.2\build" muss man dann schon noch kennen ;-)

Die YUI Compressor Dokumentation beschreibt, was man so machen kann. In der obigen Abbildung hab ich das Script einfach durchlaufen lassen und in die Datei "src.css" ausgeben lassen. Der Befehl lautet:

java -jar yuicompressor-2.4.2.jar --type css --charset ansi screen.css -o src.css

Heraus kam folgendes:

.button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#999;}

Leerzeichen, Tabulatoren und Zeilenumbrüche wurden korrekt entfernt und die RGB-Schreibweise wurde in HEX (Kurzform) umgewandelt. Ergebnis hier: 153 Byte.

Soweit zum YUI Compressor.

Free CSS Toolbox

Die Free CSS Toolbox geht ein wenig weiter. Sie ist CSS Formatierer, Validator und Komprimierer.

Ein Klick auf "Re-Format Now" und los geht es. Das Ergebnis ist fast das gleiche wie beim "YUI Compressor". Hier wurde noch das letzte Semikolon entfernt. Der Umgang mit diesem Tool fällt allerdings etwas leichter.

.button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#999}

Wir haben den Code von 216 auf 152 Byte komprimiert. Über die Schaltfläche "Other Tools" kann man die so komprimierten CSS Formatierungen direkt beim W3C CSS Validator prüfen lassen.

Noch ein Hinweis: Manche Erweiterungen bringen ihre eigenen CSS Dateien mit. Hier könnt Ihr ggf. auch mal danach schauen, ob die nicht komprimiert werden können. Nach jedem Update der Erweiterung ist dass dann ggf. zu wiederholen.

Wenn Ihr noch ein paar Tools kennt, die hier gute Arbeit leisten, schreibt doch kurz einen Kommentar hierzu. Danke, Eure JUG Fulda.

Weitere Infos im Web

Artikel zum Thema CSS

• 18 CSS Komprimierer (http://designshack.co.uk/articles/css/18-css-compression-tools-and-techniques)
• CSS Code organisieren und Ladegeschwindigkeit optimieren (webstandard.kulando.de)
• CSS Dateien komprimieren (http://mrfoo.de/archiv/138-CSS-Dateien-komprimieren.html)
• CSS Spritest verringern die Ladezeit - Weniger Bilder für Hovereffekte nötig (http://bueltge.de/css-sprites-einfach-erklaert/675/)
• CSS Dateien komprimieren (http://mrfoo.de/archiv/138-CSS-Dateien-komprimieren.html)
• Serverseitige Komprimierung (http://www.cekay.de/2008-01-30-seitenaufbau-beschleunigen-teil-1-css-komprimierung)
• Serverseitige Komprimierung (http://www.phpblogger.net/2007/04/14/javascript-und-css-komprimieren/)

Offline Tools zur CSS Komprimierung

• http://linux.softpedia.com/get/Internet/HTTP-WWW-/django-compress-43526.shtml
• Free CSS Toolbox (www.blumentals.de/csstool)

Online kann man die CSS Formatierung z. B. über

• TOP! CSS Compressor auf pingates.com ... (tools.pingates.com)
• CSS Compressor (www.csscompressor.com)
• YUI CSS und JavaScript Komprimierer (http://yui.2clics.net/)
• CSS und JavaScript Komprimierer (http://compressor.ebiene.de/)
• CSS formatter (http://teenage.cz/acidofil/tools/cssformat.php)
• CSS Cruncher (www.csscruncher.com/de/)
• CSS und JavaScript Compressor (http://www.creativyst.com/Prod/3/)

komprimieren lassen.

• Zurück
• Weiter