CSS gzip Kompression

Aus VMS1 Tutorial

Wechseln zu: Navigation, Suche

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:

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

Persönliche Werkzeuge