Datenkompression – Ein praktischer Leitfaden für den Einstieg

Am Donnerstag war mal wieder WP Meetup in Berlin und ich habe einen Vortrag über Datenkompression gehalten. Da ich kein Freund von Vortragspräsentationen im Internet bin, habe ich mich also nachträglich hingesetzt und alles als Blogbeitrag runter geschrieben.
Bitte sehr…. :-)

Datenkompression ist gut für Web Performance

Datenkompression ist eine Methode für Web Performance. Im Grund geht es bei der Datenkompression darum, die Dateigröße mithilfe von ziemlich cleveren Regeln (Algorithmen) zu verkleinern. Dabei werden z.B. wiederkehrende Zeichen (Muster) im Code zusammengefasst.

Das klingt schon mal ziemlich kompliziert. Ist es auch. Ohne intensives Informatik- bzw. Mathematikstudium geht da gar nichts. Aber die gute Nachricht: Datenkompression müssen wir nicht studieren, um sie erfolgreich benutzen zu können. Es reicht zu wissen, wie Datenkompression angewendet wird. ^^

Kleine Dateien

Mit der Datenkompression auf dem Webserver lassen sich Dateien um ca. 30 – 70% verkleinern. Dadurch können sie im Internet schneller übertragen werden. Das wiederum sorgt für schnellere Ladezeiten.

Ein kleines theoretisches Rechenbeispiel:

UnkomprimiertKomprimiert
Dateigröße:100 MB30 MB
Übertragungsrate:10 Mbit/s (DSL)
Dauer:80s24s

In diesem Beispiel benötigt eine unkomprimierte Datei, die 100 MB groß ist bei einer normalen DSL-Verbindung 80 Sekunden. Die gleiche Datei wäre komprimiert nur noch 30 MB groß und wäre dann schon in 24 Sekunden. Diese Datei wäre also ca. dreimal schneller am Ziel!

(Natürlich ist das obige Beispiel nur eine theoretische Berechnung. In der Praxis spielen noch viele andere Einflussfaktoren eine Rolle bei der Übertragungsgeschwindigkeit.)

Wie kommt Datenkompression zum Einsatz?

Jede Internetseite besteht aus mehreren Dateien. Das ist mindestens ein Dokument (z.B. index.html) und eine oder mehrere CSS-, Javascript- und Bild-Dateien und ein paar Web-font-Dateien und vielleicht noch vieles andere

Immer wenn jemand im Browser eine Internetseite anschauen möchte, werden diese Dateien von einem Webserver zum Browser übertragen. Als Faustregel lässt sich sagen: Je größer die Datei, desto länger dauert die Übertragung. Und je länger die Übertragung dauert. Desto länger müssen die Leute am Browser warten. Aber warten mag niemand. Um die Warterei auf die Internetseite zu verkürzen, können die Dateien komprimiert werden und werden dadurch schneller Übertragen. Aber wie?

Kompression beim Server und Dekompression beim Browser läuft automatisch.

Auf dem Webserver wird ein Kompressionsprogramm installiert. Das sorgt dann automatisch dafür, dass die Dateien bevor sie den Webserver verlassen, komprimiert werden. Wenn die komprimierten Dateien dann beim Browser ankommen, sorgt der – wiederum automatisch – dafür, dass die Dateien ausgepackt (dekomprimiert) werden und dann ganz normal für die Internetseite weiter verarbeitet werden.

Von all dem bekommen wir als normale Anwenderinnen und Anwender nichts mit. Wir laden wir gehabt unsere Daten auf den Server bzw. in ein Content-Management-System und der Server kümmert sich selbstständig. Prima, so einfach kann Web Performance sein! ;-)

Datenkompression mit gzip

Das Kompressionsprogramm der Wahl ist immer noch gzip. Das sorgt für die automatische Komprimierung auf dem Server. Es eignet sich für die Kompression aller Dateien, die Text enthalten. Das wären z.B. Dateien mit den Endungen; .html, .php, .css, .js, . svg, .woff2

gzip ist für alle gängigen Webserver erhältlich. Bei den beiden meist verwendeten Servern Apache und nginx ist gzip normalerweise bereits als Modul in der normalen Installation mit dabei. Es muss allerdings aktiviert werden, weil es in der Normaleinstellung deaktiviert ist.

Um die Installation müsst Ihr Euch also nicht kümmern – lediglich um die Aktivierung, falls gzip noch nicht läuft.

Woher weiß ich, ob meine Internetseite Daten komprimiert?

Erfahrene Entwicklerinnen und Entwickler wissen natürlich wie sie die Kompression mit Hilfe des Developer Tools im Browser auslesen können. Für alle anderen ist es aber auch nicht schwierig. Es gibt jede Menge Websites, wo sich ein „gzip Check“ durchführen lässt. z.B. bei www.gziptest.com

Einfach die URL eingeben und schon wird einem gezeigt, ob die Internetseite gzip unterstützt. Bei meiner Seite sah der Check so aus:

…alles richtig gemacht. :-)

Was tun, wenn gzip noch nicht aktiviert ist?

Falls der obige Test negativ verlaufen sein sollte, keine Panik. Das lässt sich richten. Zunächst lohnt sich erstmal ein Blick in die Accountverwaltung bei Eurem Provider oder eine Suche im Support oder der FAQ. Wenn dort nichts zu finden, am besten Anschreiben und Fragen, wie Ihr gzip auf dem Server aktivieren könnt.

Falls Eure WordPress-Seite auf einem Apache Server läuft, könnt Ihr gzip über ein Plugin aktivieren. z.B. mit dem Plugin Check and Enable GZIP compression

Falls Eure Website auf einem nginx Server läuft, müsst Ihr den Provider/Administrator bitten. Ein Plugin kann da nicht helfen.

Brotli – Ein neuer Stern am Himmel

Zum Abschluss möchte ich noch eine Alternative zu gzip ins Spiel bringen: Brotli

Brotli ist ebenfalls ein Kompressionsprogramm. Und zwar ein relativ neues. Es wurde von Google entwickelt und bietet neben einer noch stärkeren Kompression auch noch weitere Vorteile. Unter anderem, komprimiert Brotli viel schneller. Was positive Auswirkungen auf die Performance hat. Wer sich für Vergleichsmessungen von Brotli vs. gzip interessiert, kann sich das mal anschauen: https://blogs.akamai.com/2016/02/understanding-brotlis-potential.html

Allerdings ist Brotli noch nicht wirklich relevant, denn es wird bisher noch nicht von allen Browsern (Dekompression) unterstützt und leider bieten die Provider meines Wissens nach bisher noch keinen Support dafür.

image-582026

Brotli Browser-Unterstützung. Stand 27.01.2017

Nichtsdesto wird Brotli in absehbarer Zeit gzip verdrängen und zum Standard werden. Dafür ist seine Performance einfach zu gut. Übrigens wird diese Website mit Brotli gepowert. ;-)

Unkomprimiert vs. gzip vs. Brotli

Last not least habe ich alle Möglichkeiten verglichen. Ich habe meine Startseite unkomprimiert, mit gzip und mit Brotli gemessen. Hier der Vergleich:

image-582027

Meine Startseite => unkomprimiert

image-582028

Meine Startseite => gzip

image-582029

Meine Startseite => Brotli

…Noch Fragen? ;-)

This entry was posted on by .

Heiko Mamerow

Buddhist, Vater, Freund, Internetseitenbauer, Sportler, Musikliebhaber & Verkehrsteilnehmer ;-)

4 Gedanken zu „Datenkompression – Ein praktischer Leitfaden für den Einstieg

  1. Caspar Hübinger

    Super erklärt, geht sofort in meine Support-Bookmarks. Danke!
    Besonders schön finde ich das Symbol des Turnschuhs, weil Datenkompression ja letztlich auch Bandbreite schont → geringerer Energieverbrauch → kleinerer CO2-Fussabdruck. ?

  2. Wydra

    Da ich zur Generation X gehöre, sind so manche Lücken im Verständnis der Internetkommunikation vorhanden. Daher Danke für die ergänzende Informationen über die Datenkompression. Werde sie natürlich anwenden, denn auch ich habe mich schon über so manche Ladezeit negativ geäußert!

Kommentare sind geschlossen.