Komprimierungs- Tools für CSS Dateien

Wie schnell eine Webseite geladen wird, ist nicht erst ein wichtiger Faktor im Webdesign geworden seit dem Google angekündigt hat dies in Zukunft  als Ranking- Faktor zu berücksichtigen.

Im Idealfall bestehen Webseiten aus verschiedenen Dateien der (X)HTML Datei, dem CSS- File evtl. aus JavaScript Dateien etc. .

Alle diese Daten werden beim Öffnen der Webseite in einem Browser geladen und haben somit Einfluss auf die Ladegeschwindigkeit.

Auch bei den CSS Dateien und den JavaScript Files kann man einiges an der Ladegeschwindigkeit optimieren in dem man die Dateien einfach komprimiert speichert.

Heute stelle ich Ihnen ein Online- Tool zur Komprimierung von CSS Dateien vor.

Üblicher CSS Code während der Entwicklungsphase

Bei der Entwicklung ist es angebracht den CSS Code sinnvoll zu strukturieren und die einzelnen Merkmale in eine Zeile der CSS Datei zu schreiben. Gerade CSS- Neulingen ist dies zu empfehlen um den Überblick zu behalten.

Ein Beispiel:

body {
background-color:  #cccccc;
color: #000000;
font-size: 12px;
font-weight: bold;
}
h1{
color: #cc0000;
font-size: 30px;

}

Ein solcher Code ist natürlich sehr gut lesbar, auf der anderen Seite aber auch sehr „geschwätzig“ - jede einzelne Zeile kostet physikalischen Speicherplatz und somit später auch Ladezeit beim Aufbau der Website.

Der komprimierte CSS Code

In einem komprimierten CSS Code werden in erster Linie die Zeilen der CSS Datei „zusammengezogen“ und Kommentare entfernt.

Für das obige Beispiel sieht das dann so aus:

body{background-color:#ccc;color:#000;font-size:12px;font-weight:bold;}h1{color:#c00;font-size:30px;}

Dies entspricht einer Verringerung der Dateigröße um ca. 22%.

Mein Beispiel war ja nun sehr klein - sicher können Sie sich vorstellen, dass es bei großen CSS Dateien extrem lohnenswert sein kann, die Dateien zu komprimieren und somit die Ladezeit der Website zu beschleunigen.

Der CSS Optimierer und Formatierer von CLEANCSS.com

Wer die Komprimierung nicht von Hand ausführen möchte, dem stehen eine Vielzahl von CSS Online- Kompressoren zur Verfügung die diese Aufgabe für Sie übernehmen.

Die Meisten dieser Tools basieren auf CSSTidy – einem Open Source CSS Parser der über eine Reihe von Komprimierungs- Funktionen verfügt.

Im Online- Tool von CLEANCSS.com wurden alle diese Funktionen berücksichtigt.

Sie können mit Hilfe dieses CSS Online- Komprimierers die CSS Daten in das dafür vorgesehen Feld kopieren oder von einer URL laden und eine Vielzahl an Komprimierungs- Optionen auswählen.

Das Ergebnis können Sie sich am Bildschirm anzeigen oder in eine Datei schreiben lassen.

Probieren Sie es einfach einmal aus – komprimieren lohnt sich.

Wird langsam Zeit das hpvorlagen24.de auch mal schnelle wird – seufz …

Weiterführender Link:

Eine schöne Zusammenstellung von weiteren CSS- Komprimierungs- Tools ist bei mostinspired.com unter dem Titel “Online CSS compressor tools to optimize your stylesheets” erschienen.

In diesem Beitrag werden Ihnen insgesamt 16 solcher Kompressoren vorgestellt.