Donnerstag,
23. Oktober 2008

Tools zur automatischen Optimierung von CSS-Dateien sind toll – so man sie als Anwender im Griff hat und nicht umgekehrt. Denn kaum etwas ist peinlicher als ein kaputt-optimiertes Stylesheet im Livesystem einer Webseite. Deshalb hier ein paar Tipps für die ersten Schritte bei der Arbeit mit CSSTidy.

CSSTidy steht aktuell in der Version 1.3 als PHP-Script und als Kommandozeilenversion für Windows zur Verfügung. Die einfache und übersichtliche Benutzeroberfläche erlaubt im Textfeld auf der linken Seite die Übergabe der CSS-Daten per copy/paste oder alternativ den Import von CSS-Dateien über eine URL.

Auf der rechten Seite finden sich einige Optionen, um die Arbeitsweise des Tools zu beeinflussen. Leider führen die standardmäßigen Voreinstellungen schnell zu unbrauchbarem CSS.

Squeeze me ...

Komprimierung (Code Layout) Über diese Auswahlbox wird der Umgang mit Leerzeichen, Tabulatoren und Zeilenumbrüchen bestimmt. Die Einstellungen haben daher vorrangig Einfluss auf die Les- und Wartbarkeit des optimierten Codes. In der Einstellung “Standard” bleiben Zeilenumbrüche weitgehend erhalten, unnötige Leerzeilen werden hingegen bereits entfernt, genauso wie Einrückungen am Zeilenanfang. Auf Stufe “Hoch” werden sämtliche Selektoren zeilenweise notiert, ihre Eigenschaften folgen innerhalb der Zeile. Ich empfehle diese Einstellung als guten Kompromiss, denn das CSS ist noch lesbar (wenn auch nicht mehr übersichtlich) und erlaubt eine schnelle Fehlerkontrolle. In der höchsten Stufe werden auch die letzten Zeilenümbrüche entfernt und somit der gesamte Inhalt wie an einer Perlenschnur aufgefädelt. Die Lesbarkeit ist hier stark eingeschränkt, dem CSS-Parser des Browsers ist das jedoch egal - es entstehen minimale Dateigrößen.

Etwas mißverständlich ist die letzte Option “Benutzerdefiniert (unten eingeben)”. Damit ist NICHT gemeint, dass die darunter befindlichen Optionen bei den vier oberen Einstellungen keine Bedeutung hätten. Oftmals werden die Komprimierungseinstellungen irrtümlich mit den weiter unten festzulegenden Optimierungseinstellungen gleichgesetzt - CSS-Probleme sind dann vorprogrammiert. Hierbei geht es wirklich nur um das Code-Layout, für welches eine benutzerdefinierte Vorlage verwendet werden kann. 

CSS-Optimierungen, Teil 1

Der oberste Optionsschalter ist auch gleich der wichtigste, denn hier passieren die meisten Fehler. Zu dieser Checkbox gehören nämlich auch die vier nachfolgenden Optionen, die meist mehr Chaos im Code anrichten als Nutzen bringen.

Selektoren sortieren Diese Option sollte man tunlichst ausgeschaltet lassen, denn die Selektoren werden strikt alphabetisch aufsteigend sortiert, was die CSS-Kaskade innerhalb des Stylesheets gehörig durcheinander würfeln kann. Zudem gewinnt man durch Umsortieren kein einziges Byte - daher Finger weg.

Eigenschaften sortieren Das alphabetische Sortieren der Eigenschaften innerhalb eines Selektors ist ebenfalls in erster Linie eine Geschmacksfrage. Knifflig wird es erst, wenn Sie in ihren Stylesheets mit Parser-Hacks für den Internet Explorer arbeiten (z.B. Tantek-Hack), deren Funktion von der richtigen Abfolge der Eigenschaften anhängt sind. Da auch hier kein echtes Einsparpotential in Bezug auf die Dateigröße besteht - lieber ausgeschaltet lassen.

Selektoren umgruppieren Jetzt wirds richtig heftig. Per Default steht diese Option auf “Selektoren mit gleichen Eigenschaften zusammenfassen”. Dummerweise überließt man diesen viel zu langen Text in der schmalen Box zu leicht und wundert sich im Anschluss stundenlang über offenbar fehlerhaftes CSS. Denn auch diese Option sortiert Selektoren innerhalb der Datei um und greift somit willkürlich in die Kaskade ein. Daher: Unbedingt umstellen auf “Nichts ändern”.

Shorthands optimieren Das ist in meinen Augen die sinnvolle Option, denn damit werden CSS-Eigenschaften - wo möglich - in die Kurzschreibweise (shorthand) überführt. Allerdings empfehle ich hier - es bei der in diesem Fall sinnvoll gewählte Voreinstellung “Sichere Optimierungen” zu belassen. 

CSS-Optimierungen, Teil 2

Farben komprimieren Dieser Schalter ist standardmäßig aktiviert und kann es im Regelfall auch bleiben. Hierbei geht es um die Optimierung von Stringlängen. Farbcodes in hexadezimaler Schreibweise (#ff0000) oder RGB-Codes (rgb(255,0,0)) werden ggf. gegen Kurzbezeichnungen (red) ausgetauscht, um das eine oder andere Byte zu sparen.

Font-weight komprimieren Auch hier versucht CSS-Tidy kürzere Strings in den Code einzufügen. So wird der 4-Byte lange String bold gegen den 3-Byte langen Ersatzstring 700 ausgetauscht. Auch diese Optimierung ist in der Regel harmlos, da so ziemlich alle aktuell am Markt befindlichen Browser mit beiden Werten klarkommen.

Selektoren in Kleinbuchstaben Wieder eine Option, die mir Vorsicht zu genießen ist. Sie ist zum Glück standardmäßig deaktiviert. HTML-Klassen und ID’s sind zum Teil case-sensitive (Wussten Sie das schon?), weshalb die Änderung der Schreibweise dazu führen kann, dass dessen Eigenschaften nicht mehr berücksichtigt werden. Ich werde hier jetzt jedoch nicht in die Abgründe der Standards abtauchen. Wer mehr darüber wissen will, hier gibts mehr zum Thema. Ende vom Lied: Finger weg - Checkbox deaktiviert lassen.

Groß-/Kleinschreibung für Eigenschaften Diese Option ist harmlos und dient der Lesbarkeit, indem es die Schreibweise der CSS-Eigenschaften vereinheitlicht. Auf Datei- und Verzeichnisnamen (die durchaus case-sensitiv sein können) wird dabei Rücksicht genommen. Daher gibts hier keine Bedenken.

Unnötige Backslashes entfernen Diese Option ist per Default aktiviert, doch leider auch hier - Vorsicht! Nicht alles, was unnötig zu sein scheint, ist es auch - Stichwort IE-Parserbugs. Backslashes lassen sich ganz hervorragend dazu nutzen, IE5.x und IE6 auseinander zu halten, bzw. gezielt anzusprechen, wobei dabei nicht zwingend invalides CSS entsteht. Daher ist auch ein Validitätscheck eines unbekannten Stylesheets kein Garant dafür, dass keine auf Backslashes aufbauenden Parser-Hacks für den IE im Stylesheet enthalten sind. Wenn Sie sich also unsicher sind - unbedingt ausschalten.

Letztes ; entfernen Und mal wieder eine nützliche Option, vor allem bei größeren Stylesheets. Jeder einzelne Selektor liefert ein Byte Optimierungspotential. Das summiert sich zum Teil ganz ordentlich.

Ungültige Eigenschaften entfernen Für die meisten Anwender ist das eine weitgehend sinnlose Option. Ausnahme: Validitäts-Fetischisten. Der CSS-Standard ist so angelegt, dass Browser unbekannte Eigenschaften und Selektoren einfach ignorieren. Es gibt also keinen Grund, solche Dinge bei der Optimierung aus dem Stylesheet zu werfen. Lediglich einige CSS-Validatoren kreiden sowas u.U. als Warnung an, was ich aber ebenfalls für unsinnig halte.

Zusammenfassung

Wie die Erläuterungen zu den einzelnen Optionen bereits deutlich machen, sind viele Schalter mit Vorsicht zu geniessen. Das Schrumpfpotential bei der Dateigröße von CSS-Dateien rührt in erster Linie aus dem Entfernen von Kommentaren, Einrückungen und Zeilenumbrüchen her. Wenn Sie sich über den Inhalt einer CSS-Datei nicht im Klaren ist, sollte man es dabei auch belassen. Die zusätzlich von CSSTidy angebotenen Optimierungen sind vielfach nicht ohne Weiteres zu empfehlen und führen schnell zu Komplikationen. Vor allem vor der Umsortierung von Selektoren sollte man einen großen Bogen machen.

Beachtet man die oben genannten Hinweise, so ist CSSTidy eine sehr wertvolle Hilfe bei der Performance-Optimierung. Die Ausgabe erfolgt entweder in Dateiform oder als ASCII-Text unterhalb der Konfiguration. Arbeitet man in der Entwicklungsphase des Projektes mit mehreren, ggf. sogar verschachtelten Stylesheets, so empfielt es sich für den Produktivbetrieb, Stylesheets weitgehend zusammenzufassen, um HTTP-Requests und damit indirekt Wartezeiten beim Aufruf der Webseite zu reduzieren.


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.