Ladezeiten von Webseiten spielen eine große Rolle. Und da CSS-Dateien gut und gerne mehr als 1000 Zeilen Code umfassen können sowie bei jedem Seitenaufbau neu geladen werden (bei deaktiviertem Cache), ergibt sich hier ein gewisses Verbesserungspotential. Ich habe vor kurzem eine Webseite gefunden, mit der man innerhalb von Sekunden die Größe von CSS-Dateien um mindestens 20% senken kann.
Es handelt sich um csscompressor.com.
Die Vorgehensweise ist immer die selbe und sehr einfach:
- Kompressionsrate wählen. Ich empfehle “Highest”.
- Kompressionsoptionen wählen. Am besten alles ankreuzen, so werden die besten Ergebnisse erzielt.
- CSS-Code in das Textfeld einfügen.
- Auf “Compress” klicken.
- Komprimierten Code aus dem dritten Textfeld kopieren und in einer neuen CSS-Datei speichern.
- Alte CSS-Datei durch neue ersetzen.
Ich empfehle jedoch, den originalen Code zu behalten, da man nach der Kompression den Code nicht mehr komfortabel bearbeiten kann. csscompressor.com bringt bei der höchsten Kompressionsstufe den gesamten Code auf eine Zeile. Also sehr unübersichtlich ;)
Der Hauptvorteil besteht darin, dass der Browser nicht mehr so lange zum Laden und Verarbeiten der CSS-Datei braucht. Außerdem sortiert csscompressor.com alle Attribute und kürzt Farbcodes ein (#333333 zu #333). Nebenbei werden Kommentare aus der Datei entfernt, um noch einmal Platz zu sparen.
Beweis gefällig? Ich habe die Stylesheet-Datei vom Blocks2-Theme (1042 Zeilen) mal durch den CSS-Kompressor geschickt und erhielt dadurch eine 20% kleinere Datei (3,7 KB weniger):
Und hier ist nochmal der Link zum Klicken: csscompressor.com
[Teaserbild ist © by Stihl024 @ Pixelio]
Sei der erste.