Fabian Letscher – Blog + Portfolio

CSS Komprimierer im Test

Gerade bei der Erstellung des Stylesheets für dieses WP-Theme habe ich festgestellt, dass mein Quelltext sehr aufgebläht ist. Durch Zufall bin ich letztlich auf diverse Webseiten gestoßen, die anbieten den CSS-Code zu komprimieren.
Im Folgenden habe ich nun mein Stylesheet dazu verwendet drei solcher CSS-Komprimierer zu testen. Zudem habe ich selbst einige Veränderungen an dem Stylesheet vorgenommen und werde nun die Ergebnisse präsentieren. In der folgenden Tabelle ist die Dateigröße vor der Komprimierung nicht aufgeführt. Sie beträgt 12283 Bytes. Die ursprüngliche Datei kann man sich hier ansehen.

Fazit

In der Tabelle erkennt man deutlich, dass eine Optimierung des Stylesheets sich als schwierig erweist. Die drei benutzen “Optimierer” bieten drei verschiedene Ansätze an. Davon vergrößert einer sogar die Datei. Grundlegend hängt diese Optimierung stark vom Aufbau der Datei ab, kann also immer verschiedene Ergebnisse erzielen. Ich würde daher empfehlen, erst mal selbst über den eigenen Code zu schauen. Vieles kann man erst mal selbst verbessern, immerhin kennt der Ersteller sich damit am besten aus. Danach kann man immernoch einen dieser CSS-Verbesserer nutzen und vergleichen welcher den größten Erfolg verbucht.

Tipps zur Optimierung des eigenen Stylesheets

1. Mehrere IDs sind nicht immer günstig

   Mir ist aufgefallen, dass ich beim Erstellen des Stylesheets viele IDs hintereinander benutze um eine Struktur zu bewahren. Dies ist dann immer unnötig, wenn die ID in keinen Zusammenhang mit einer anderen steht. Beispiel:

   <code>
   #wrapper form#searchform {...}
   /* Dies lässt sich so vereinfachen */
   #searchform {...}
   </code>
   

   Die ID “searchform” soll immer gleich auf der Seite aussehen, egal welche andere ID davorsteht. Zudem ist klar, dass es sich um eine “form” handelt.

2. Gleiche Inhalte zusammenfassen

   Oft kommt es vor, dass man das gleiche Attribut mit dem gleichen Wert im Stylesheet öfters benutzt. Die kann man ganz einfach zusammenführen, indem man die verschieden Elemente mit Kommata abtrennt.

   <code>
   #searchform {display:none}
   .hide {display:none}
   /* Dies lässt sich so vereinfachen */
   #seachform, .hide {display:none}
   
   </code>

3. Grundlegende Formatierung vornehmen

   Darunter verstehe ich, dass beispielsweise bei einem Hyperlink das Attribut “text-decoration” auf “none” gesetzt wird. Falls man dies nicht am Anfang des Stylesheets schon festlegt, muss man jedes “a”, dass darin vorkommt mit diesem Wert zuweisen. Das verbraucht unnütz viel Speicherplatz. Einige empfehlen ein Reset-Stylesheet immer einzufügen, das solche grundlegenden Sachen übernimmt.

4. Kurzschreibweise

   Wirklich effizient ist es die Kurzschreibweise zu benutzen. Da spart man sich sehr viel Tipparbeit und es spart Platz. Dies funktioniert mit einigen Attributen sehr gut. Hierdurch kann allerdings auch einiges an Übersichtlichkeit verloren gehen. Beispiel:

   <code>
   font-family: helvetica, arial, sans-serif;
   font-size: 10px;
   /* Dies lässt sich so vereinfachen */
   font: 1px helvetica, arial, sans-serif;
   
   </code>

5. Das Semikolon vor dem Schließen weglassen

   Wenn die Wertezuweisung zu Ende ist, kann man das Semikolon getrost weglassen. Ich mache dies allerdings nicht, da einer meiner häufigsten Fehlerquellen darin liegt ein Semikolon zu vergessen. Wenn man jedoch fertig ist kann man gerne nochmal drüber schauen und die unnötigen entfernen. Beispiel:

   <code>
   a {text-decoration:none;}
   /* Dies lässt sich so vereinfachen */
   a {text-decoration:none}
   
   </code>