smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Website beschleunigen: 4. Gzip-Komprimierung

11. Oktober 2012
Stephan
Website beschleunigen - Tipps für eine schnellere Website

Um die Datenmenge von zu übertragenden Ressourcen/Dateien zu verkleinern, ist es sinnvoll sie zu komprimieren.

Hierfür hat sich im Webbereich die Gzip-Komprimierung durchgesetzt, mit der im Allgemeinen zwischen 60-75% der jweiligen Dateigröße eingespart werden kann.

Der offentsichtliche Vorteil dabei ist natürlich, dass komprmierte Dateien schneller übertragen werden und wir somit kürzere Ladezeiten erzielen können.

Aus diesem Grund erfahrt ihr in diesem Artikel, wie ihr die Dateien eurer Website bzw. eures Blogs mittels Gzip komprimiert übertragen könnt.

Teile der Artikel-Serie

Zur Übersicht eine Auflistung aller erschienenen Artikel der Artikel-Serie „Website beschleunigen“:

  1. Reduzierung von HTTP-Requests
  2. Grafiken optimieren
  3. Browser-Caching
  4. Gzip-Komprimierung
  5. Code minimieren & optimieren
  6. Tipps für WordPress
  7. Sonstige Performance-Tipps

Kommunikation zwischen Browser & Server bzgl. Komprimierung

Der Browser kann im Header einer Anfrage (Request) den sogenannten Accept Encoding-Header mitsenden, um dem Server mitzuteilen, dass komprimierte Dateien vom Browser akzeptiert werden. Mit Firebug können wir uns das ganze mal ansehen:

Firebug: Accept-Encoding-Header ansehen

Hiermit teilt der Browser dem Server mit, dass sowohl gzip- als auch deflate-komprimierte Dateien akzeptiert werden.

Wenn nun für den Server Gzip-Komprimierung aktiviert ist, so kann er dem Browser die angefragte Datei in komprimierter Form zusenden. Damit der Browser aber auch weiß, ob denn die Datei nun komprimiert übertragen wird oder nicht, sendet der Server seinerseits einen Content-Encoding-Header mit:

Firebug: Content-Encoding-Header ansehen

Der Server sagt dem Browser damit, dass die übertragene Datei komprimiert wurde und zwar mittels gzip. Für den Browser ist das insofern wichtig, als dass dieser ja die Datei wieder dekomprimieren muss.

Mehr möchte ich hier auch gar nicht weiter ins technische Detail gehen. Letztendlich könnt ihr nun aber mit diesem Wissen überprüfen, ob eure Website die angefragten Dateien bereits komprimiert ausliefert oder nicht. Falls dem nicht so ist, dann wird der nächste Abschnitt bestimmt ganz interessant für euch.

Als Alternative zu Firebug könnt ihr mit dem TrafficScanner euch sehr schön einen Überblick über alle angefragten Dateien verschaffen. Hier ist leicht ersichtlich, ob die Dateien komprimiert übertragen werden oder nicht.

Gzip-Komprimierung aktivieren

Im Allgemeinen gibt es mehrere Möglichkeiten die Dateien eurer Website komprimiert zu übertragen:

Per PHP
Hier müsstet ihr prinzipiell in jeder einzelnen PHP Datei den folgenden Code in die erste Zeile einfügen:

ob_start('ob_gzhandler');

Per .htaccess
Für diese Variante fügt ihr einfach folgende Zeilen in eure sich Stammverzeichnis eurer Website befindende .htaccess-Datei:

# BEGIN Gzip-Komprimierung
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</IfModule>
# END Gzip-Komprimierung

Per „Hand“
Per „Hand“ hört sich jetzt vielleicht etwas komisch an, aber es ist auch möglich die Dateien einfach selbst zu komprimieren. Dazu könntet ihr z.B. das Programm 7-Zip nutzen. Hierauf möchte ich aber auch gar nicht weiter eingehen, sondern verweise mal auf die Webmaster-Zentrale, wo diese Variante ein wenig detallierter erklärt ist.

Der Vorteil dieser Variante ist, dass der Server im Gegensatz zu den beiden anderen vorgestellten Varianten, die Dateien nicht „On the fly“ komprimieren muss und der Server so nicht extra belastet wird.

Der große Nachteil, der meiner Meinung nach auch überwiegt, ist der Fakt, dass bei jeder Änderung einer Datei wir diese auch wieder per Hand komprimieren müssen. Bei kleinen Websites mit wenig Dateien mag das gehen, aber bei größeren stehen Aufwand und Nutzen wohl in keinem sinnvollen Verhältnis.

Angemerkt sei vielleicht noch, dass ihr eure Grafiken nicht mittels gip komprimieren müsst, da als PNG, JPEG usw. abgespeicherte Grafiken bereits komprimiert sind.

Proxys unterstützen

Die bereits beschriebene Kommunikation beschreibt den Fall, dass der Browser direkt mit dem Server kommuniziert. Es kann aber sein, dass zwischen Browser und Server noch Proxy-Server zwischengeschaltet sind.

Problemsituation die hierbei auftreten kann: Ein Browser, welcher kein gzip unterstützt fragt eine bestimmte Seite an. Der Server liefert daraufhin dem zwischengeschaltenen Proxy eine unkomprimierte Version der angefragten Seite bzw. der angefragten Dateien und dieser wiederum sendet die Seite dann zum Browser. Gleichzeitig cached der Proxy nun aber auch diese Seite.

Wenn nun also ein Browser mit Gzip-Komprimierung die gleiche Seite anfragt, dann erhält er vom Proxy die gecachte Seite, die aber unkomprimiert ist.

Eine Lösung hierfür ist der Einsatz des Vary: Accept Encoding-Headers. Diesen Header muss der Server mitsenden, so dass Proxys sowohl eine unkomprimierte als auch eine komprimierte Version einer Seite zwischenspeichern und je nach Browser die richtige ausliefern.

Zum Überprüfen, ob der Vary-Header vom Server mitgesendet wird und sich im Antwort-Header einer Ressource befindet, können wir wieder Firebug nutzen:

Firebug: Vary-Header überprüfen

Fazit

Abschließend lässt sich also festhalten, dass ihr die Dateien eurer Website mittels Gzip-Komprimierung immer komprimiert übertragen solltet, da das Einsparpotenzial der zu übertragenden Datenmenge enorm ist.

Hiermit haben wir also wieder einen weiteren sinnvollen sowie effizienten Faktor, der leicht umzusetzen bzw. zu berücksichtigen ist, zum Beschleunigen von Websites kennengelernt.

Über Feedback von euch würde ich mich wie immer sehr freuen.

Kommentare  
2 Kommentare vorhanden
1 Elke Farr schrieb am 25. August 2015 um 16:35 Uhr

Ja, wenn alles so einfach währe… Mein Hoster wollte gzip nicht Aktivieren – Also habe ich die Variante „alles von Hand“ gewählt. Nun Läufts richtig schnell und der Server muss nicht nochmal komprimieren… Also um Umwege zum Ziel gekommen. Danke

2 Svenja schrieb am 7. Oktober 2015 um 08:08 Uhr

Danke, hat mir geholfen.

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!