Speed-Tipp: Dateien mit Deflate komprimieren

Vor Kurzem habe ich meine Webseite mit Page Speed Insights getestet. Dabei wurde mir auch vorgeschlagen, ausgelieferte Dateien mit Deflate/gzip zu komprimieren.

In diesem Artikel möchte ich dir zeigen, wie du je nach Webseite einiges an KiloBytes sparen kannst.

Komprimierung der Inhalte

Im Normalfall sendet dein Webserver die Inhalte, und damit auch alle weiteren Dateien so, wie Du sie auch in einem Texteditor sehen würdest.

Das ZIP-Verfahren baut auf Deflate auf und außerdem kannst du auch gzip verwenden, um die Daten zu komprimieren. Das kann sich insbesondere bei großen JavaScript- und CSS-Dateien lohnen, wie sie häufig bei WordPress-Installationen oder anderen Content Management Systemen zu finden sind.

jQuery ist hier als JS-Datei ein gutes Beispiel. Die Datei dieser Bibliothek ist teilweise bis zu 100 KiloByte groß.

Die Komprimierung bedarf der Unterstützung von Anwender(-Browser) und Server. In der Regel werden alle modernen Server ein solches Verfahren unterstützen. Ältere Browser könnten jedoch Probleme mit solchen Verfahren haben.

Apache: mod_deflate

Unter Apache gibt es für diesen Zweck das Modul deflate. Bei den meisten Hostern sollte es bereits aktiviert sein. Wenn du über einen eigenen (v)Server verfügst, kannst Du es über die Konsole aktivieren:

a2enmod deflate

Nach einem Neustart von Apache sollte es dann aktiv sein:

/etc/init.d/apache2 restart

Nun kannst Du Apache am einfachsten über deine .htaccess anweisen, die Kompression zu nutzen. Das kann zum Beispiel so aussehen:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Damit werden die folgenden Dateitypen komprimiert: Text, HTML, XML, CSS, RSS und JavaScript. Probiere am besten gleich aus, ob es funktioniert (klicke hier).

Sollte bei dem Seitenaufruf ein Fehler mit dem Code 500 auftreten. So solltest du den obigen Code aus deiner .htaccess entfernen und überprüfen, ob Du das Modul im Apache tatsächlich korrekt aktiviert hast.

Du kannst auch die Komprimierung für einzelne (sehr alte) Browser aktivieren, die deflate nicht unterstützen. Dieser Artikel über mod_deflate beschreibt das Vorgehen und die Möglichkeiten ganz gut.

Nginx: HttpGzipModule

Die immer beliebter werdende Server-Software Nginx bietet ebenfalls die Komprimierung an. Da der Geschwindigkeitsvorteil auch daraus resultiert, dass es keine Dateien wie eine .htaccess gibt, muss das Modul zentral aktiviert werden.

Rufe die entsprechende Datei für den virtuellen Host auf. Dort kannst du die Konfiguration dann etwa mit diesen Zeilen in dem http { … }-Block anpassen:

gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain application/xml;

Entscheidend für all diejenigen, die das Skript anpassen wollen ist hier wohl die letzte Zeile. Dort werden die Datei-Typen festgelegt. Du kannst auch hier alle Datei-Typen aus dem Apache Beispiel einfügen, dafür musst du nur jeweils ein Leerzeichen zwischen den Typdefinitionen setzen.

Mit all den Typen aus dem Apache-Beispiel sieht das dann so aus:

gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript;

Auch hier gibt es eine ausführliche Anleitung auf der offiziellen Seite von nginx, die zeigt, wie man zwar nicht Deflate, aber direkt gzip aktivieren kann.