CSS gzip Kompression
Aus VMS1 Tutorial
K |
|||
Zeile 53: | Zeile 53: | ||
Ein nützliches Tool, um zu prüfen, ob die Regeln in der [[.htaccess]] Datei funktionieren, welches auch weitere Hinweise auf Traffic Einsparmöglichkeiten liefert: [http://floern.com/tools/trafficscanner TrafficScanner] | Ein nützliches Tool, um zu prüfen, ob die Regeln in der [[.htaccess]] Datei funktionieren, welches auch weitere Hinweise auf Traffic Einsparmöglichkeiten liefert: [http://floern.com/tools/trafficscanner TrafficScanner] | ||
+ | |||
+ | [[Kategorie:Dateiformate]] |
Aktuelle Version
Um Traffic zu sparen, kann man CSS Dateien als gzip Dateien komprimieren.
Statisch
Für diese Variante benötigt man die CSS Datei einmal unkomprimiert und einmal komprimiert, im Folgenden wird style.css als Beispielname genutzt. Nicht jeder Browser unterstützt das gzip Format, daher sollte man auch die unkomprimierte Datei den Besuchern ausliefern können.
Die Datei style.css hat 36.141 Bytes, und kann bspw. mit dem kostenlosen Programm 7zip komprimiert werden:
Rechtsklick auf die Datei -> 7zip -> Zu einem Archiv hinzufügen...:
- Archivfomat: GZip
- Kompressionstärke : Ultra
Die restlichen Einstellungen unverändert lassen, OK anklicken, danach sollte die Datei style.css.gz sich im selben Verzeichnis befinden.
In unserem Test ist diese dann nur noch 8.948 Bytes groß.
Um nun den Besuchern abhängig von ihrem Browser entweder die unkomprimierte oder komprimierte Datei auszuliefern, benötigt man noch eine mod_rewrite Regel in einer .htaccess Datei:
RewriteEngine On RewriteBase / RewriteCond %{HTTP:Accept-encoding} gzip RewriteCond %{REQUEST_FILENAME} \.css$ RewriteCond %{REQUEST_FILENAME}.gz -f RewriteRule ^(.*)$ $1.gz [QSA,L] AddEncoding gzip .gz <filesmatch "\.css\.gz$"> AddType "text/css" .gz </filesmatch>
Kompression des Textes
Wer noch einen Schritt weiter gehen will, kann auch den Text der Datei komprimieren, mit dem Nachteil, dass diese dann relativ unleserlich wird. Das sollte einen aber kaum stören, sofern man sich die Originaldatei für Änderungen aufhebt.
Dazu gibt es Online-Dienste, bei denen man die Datei hochlädt oder den Inhalt in ein Formular kopiert, und dann das komprimierte Ergebnis bekommt. 4 davon hier exemplarisch verglichen:
http://iceyboard.no-ip.org/projects/css_compressor | 22.982 Bytes |
http://www.cssdrive.com/index.php/main/csscompressor/ | 24.355 Bytes |
http://compressor.ebiene.de/ | 24.599 Bytes |
http://www.csscruncher.com/de/ | 25.143 Bytes |
Bei dieser Art der Einsparung werden aus der Datei überflüssige Formatierungszeichen wie Zeilenumbrüche, Kommentare, Leerzeichen etc. entfernt, die CSS Regeln funktionieren weiterhin. Es gibt aber keine Garantie, dass diese Dienste tatsächlich nur Überflüssiges löschen, daher sollten die Ergebnisse getestet werden!
Diese Datei dann auch wieder gzip komprimiert, ergibt bei der Kleinsten (22.982 Bytes) eine Größe von 5.874 Bytes.
Ein nützliches Tool, um zu prüfen, ob die Regeln in der .htaccess Datei funktionieren, welches auch weitere Hinweise auf Traffic Einsparmöglichkeiten liefert: TrafficScanner