HomeKontaktImpressum
Sie sind hier: Home

Komprimierung von Stylesheets

Extern eingebundene Stylesheet-Dateien können durch eine Vorverarbeitung mit Programmen oder Scripten zur Komprimierung des CSS-Codes erheblich verkürzt werden. Auch für in einer Website eingebundene Stylesheets gilt: Je kleiner desto schneller erfolgt die Übertragung der Datei und desto kürzer ist auch die Latenzzeit.

Ähnlich wie bei auf der Website enthaltenem JavaScript-Code, enthalten auch Stylesheets häufig zahlreiche Kommentare und anderen Ballast, der die Dateigröße unnötig steigert. Auch hier lohnt es sich die im Stylesheet enthaltenen Kommentare herauszufiltern und unnötige Leerzeichen aus der CSS-Datei zu entfernen. Dies kann mit recht einfachen Mitteln beispielsweise durch Suchen und Ersetzen im Editor unter Anwendung von regulären Ausdrücken erledigt werden.

Vor einiger Zeit habe ich mal ein in JavaScript geschriebenes Tool zur Minimierung des Code-Umfangs von Stylesheets geschrieben, welches ich demnächst auf Homepage-Performance Online stellen werde. Zwar werden bei diesem CSS Packer Tool keine in Komponenten aufgeteilte Regeln – z. B. font-size und font-variant – zusammengefasst, dennoch ist das resultierende Stylesheet nach der Komprimierung – je nach Eingabe – bereits deutlich kleiner.

Darüber hinaus gibt es Tools – beispielsweise den YUI-Compressor – die diese Aufgabe für den Webentwickler erledigen. Dazu benötigt man lediglich eine Java-Laufzeitumgebung. Mit einem einfachen Kommandozeilenaufruf kann das Stylesheet dann automatisch von überflüssigem Ballast befreit werden. Zwar wird die Struktur des Stylesheets nicht optimiert, allerdings können gut dokumentierte CSS-Dateien einiges an Umfang verlieren.

Mit CSSTidy existiert ein weiteres Tool, welches die Kompression von Stylesheets beherrscht. Auch die Nutzung dieses Tools führt zu deutlich kompakteren Stylesheets, die sowohl von Kommentaren als auch von Whitespaces befreit sind. Doch CSSTidy kann weitaus mehr als nur Kommentare und Leerzeichen filtern: So werden zusammengehörige Eigenschaften, die mittels einzelner Regeln definiert sind, soweit dies möglich ist zusammen gefasst. Oft werden solche Regeln vom Webentwicker der Übersichtlichkeit halber oder einfach aus Gedankenlosigkeit in getrennten Angaben formuliert. Aber auch die während der Entwicklung anfallenden Änderungen führen häufig zu unnötig enthaltenen Regeln, die als Altlasten in der CSS-Datei verbleiben. Die Folge ist aber, dass die Zahl der Style-Angaben und damit der benötigte Speicherplatz ansteigt. Das Beispiel aus dem nachstehenden Script-Block soll die dahinter liegenden Prozesse andeuten.

border-width:1px;
border-color:red;
border-style:solid;

border:1px solid red;

Aus den in den ersten drei CSS-Regeln angegebenen Anweisungen wird die in der letzten Zeile angegebene Zusammenfassung generiert – aus den 56 Zeichen der ersten Variante bleiben lediglich 21 übrig. Derartige Zusammenfassungen können gerade bei umfangreichen Stylesheets zu deutlichen Einsparungen führen. Neben der Zusammenfassung von Eigenschaften entfernt CSSTidy auch Angaben, die sich gegenseitig überschreiben. Folgendes Beispiel soll die Auswirkungen dieses Vorgangs aufzeigen:

background-color:green;
color:blue;
border:1px solid yellow;
background-color:white;

Die Angaben zum Hintergrund werden hier doppelt angegeben. Da letztlich die zuletzt angegebene Farbe genutzt wird, werden alle zuvor getätigten Angaben aus dem Stylesheet entfernt. Das resultierende Stylesheet enthält also die erste Zeile aus dem Block nicht mehr.

Ist das Stylesheet erst einmal durch derartige Tools auf das Nötigste reduziert, so kann die Datei mit einem konventionellen Packgrogramm – etwa GZIP – komprimiert werden. Auf dem Webserver landen dann eine komprimierte und eine unkomprimierte CSS-Datei selben Inhalts. Handelt es sich um eine statische Internetseite, so kann die Auslieferung des Stylesheets auch hier wieder über die .htaccess-Datei gesteuert werden – GZIP-fähige Browser erhalten die gepackte, alle anderen Clients die ungepackte Datei.

  
© 2009-2017 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website