Viele haben schon oft Begriffe wie „gzip“ und „Brotli“ gehört. Noch mehr Leute wissen, dass diese Komprimierungen gut für die Seitenladezeit sind. Doch was steckt bei den Themen wirklich dahinter? Was sind die Kompressionsstufen oder was bedeutet dynamische und statische Komprimierung? All diese Deep Dive Insights erfahren Sie heute in diesem Artikel.
Als das Internet das Licht der Welt erblickte, kam gleichzeitig das Thema Seitenladezeit mit auf. Wer möchte denn schon lange vor dem Bildschirm warten, bis was passiert – keiner. Zu Beginn des WWW gab es überwiegend nur textuelle Assets (HTML, JS & CSS), da die Infrastruktur für das Internet noch nicht ausgebaut war und Bilder sehr lange laden mussten. Ein großer Meilenstein hinsichtlich der [AW1] Seitenladezeit wurde anschließend im Jahr 1992 erreicht, als die textuelle Komprimierung gzip publiziert wurde; Brotli ist ein weiteres Format zur Datenkomprimierung, das von Google entwickelt und 2015 erstmals im Google Open Source Blog annonciert wurde.
gzip ist ein Programm zur Dateikomprimierung und -dekomprimierung, das den DEFLATE-Algorithmus verwendet. Der DEFLATE-Algorithmus ist eine Kombination aus LZ77 (einer Methode, die redundante Daten identifiziert und durch kürzere Referenzen ersetzt) und Huffman-Codierung (eine Methode, die häufig vorkommende Datenmuster durch kürzere Codes ersetzt).
Hier sind die grundlegenden Schritte, wie gzip funktioniert:
Bei der Dekompression wird dieser Prozess im Wesentlichen in umgekehrter Reihenfolge durchgeführt. Das gzip-Programm liest den Header, um zu erfahren, wie die Daten dekomprimiert werden sollen. Dann wendet es die Huffman-Decodierung und die LZ77-Decodierung an, um die ursprüngliche Datei wiederherzustellen.
Kennung einer gzip-Datei: .gz
Brotli ist ein Kompressionsalgorithmus, ähnlich wie DEFLATE (der von gzip verwendet wird). Dieser Algorithmus wurde von Google entwickelt und hat einige Unterschiede zu gzip, die ihn in vielen Fällen effizienter machen. Ursprünglich wurde Brotli entwickelt, um Webfonts schneller laden zu können.
Im Gegensatz zu gzip verwendet Brotli keinen festen Satz von Huffman-Tabellen. Brotli erstellt mehrere Tabellen und verwendet die, die in einem bestimmten Kontext am besten passt. Das bedeutet, dass Brotli die Art und Weise, wie es Daten komprimiert, an die spezifische Natur der Daten anpasst, was zu einer besseren Kompression führt.
Kennung einer Brotli-Datei: .br
Bei der dynamischen Komprimierung werden die Antworten vom Server automatisch komprimiert, sobald diese angefragt werden. Das heißt, bevor die Daten an den Browser rausgehen, wird ein Prozess angestoßen, sodass die zu sendenden Daten „zusammengepackt“ und dann erst verschickt werden.
Klassische Use-Cases hierfür sind zum Beispiel API-Abfragen, da diese oft unterschiedliche bzw. dynamische Inhalte erzeugen. Zudem können API-Abfragen wie zum Beispiel ein JSON-Format oder ein XML-Format sehr gut komprimiert werden. Ursachen sind wiederkehrende Schlüssel, Leerzeichen und geschweifte Klammern.
Verwendet man eine statische Komprimierung, so wird beim s. g. build („die Erstellung“) der CSS- und JavaScript-Dateien ein weiteres komprimiertes Format auf dem Server abgelegt (zum Beispiel style.css.gz). Da die komprimierten Dateien schon im Vorfeld auf dem Server liegen, verkürzt sich die Antwortzeit des Servers.
Hier ein Beispiel von einem Module-Bundler namens Laravel Mix (aufbauend auf dem Framework webpack):
Tipp: Hier können Sie alle Brotli-Einstellungen für einen nginx- und einen Apache-Server sehen:
Die Kompressionsstufe bestimmt, wie stark ein Datensatz komprimiert wird. Bei Formaten wie gzip oder Brotli gibt diese Stufe an, welches Gleichgewicht zwischen Kompressionszeit und Kompressionsrate gewählt wird. Höhere Stufen führen in der Regel zu stärkerer Komprimierung, benötigen aber mehr Zeit und Ressourcen (CPU-Leistung).
gzip bietet neun Komprimierungsstufen, die mit den Zahlen 1 bis 9 angegeben werden:
Die Zahlen dazwischen ermöglichen unterschiedliche Kompromisse zwischen Geschwindigkeit und Kompressionsrate. In vielen Anwendungen wird oft der Standardwert (Stufe 6) verwendet, da er eine ausgewogene Kombination aus Geschwindigkeit und Kompression bietet.
Brotli hat ebenfalls verschiedene Komprimierungsstufen, wobei es insgesamt elf Stufen gibt:
Wiederum ermöglichen die Zahlen dazwischen verschiedene Kompromisse zwischen Geschwindigkeit und Kompressionsrate.
Bei einem Komprimierungs-Check der größten JavaScript-Datei von www.websiteboosting.com ist ersichtlich, dass bei einer stärkeren Komprimierung viele Kilobit eingespart werden könnten.
Mit maximaler Brotli-Kompression könnten zum Beispiel weitere 15 % Daten eingespart werden.
Möchten Sie selbst Ihre Komprimierung testen, so können Sie dies hier tun: einfach.st/seopl5.
Es ist generell möglich, alle Datentypen, wie zum Beispiel Bilder und Videos, zu komprimieren. Jedoch führen diese selten zu einer Datenersparnis (die Daten können zum Teil danach auch noch größer sein und es dauert noch länger, diese wieder zu entpacken). Textuelle Daten gehören zu den gängigen Inhaltstypen einer Website, und diese sollten komprimiert werden:
Bei diesen Daten ergibt das Sinn:
Wenn ein Webbrowser eine Ressource anfragt, dann gibt dieser gleich die Information mit, welche Komprimierungsformate er versteht.
Webbrowser – Accept-Encoding Header: Dieser Header wird vom Webbrowser (Client) in der Anfrage an den Server gesendet. Er informiert den Server darüber, welche Kompressionsverfahren der Browser versteht und akzeptiert. Wenn der Header zum Beispiel den Wert „Accept-Encoding: gzip, br“ hat, signalisiert dies dem Server, dass sowohl gzip- als auch Brotli-Kompressionen unterstützt werden.
Wenn eine Anfrage keinen Accept-Encoding Header enthält, wird keine komprimierte Datei versendet. Enthält diese eine Wildcard (*),darf jede Art einer Komprimierung zurückgesendet werden.
Server – Content-Encoding Header: Dieser HTTP-Header gibt an, welche Kodierungstransformationen auf den Dateninhalt zur Anwendung kamen, bevor sie an den Client gesendet wurden.
Tipp: Mit diesem SEO-Plug-in (für Chrome Browser) können Sie die aktuelle Komprimierung sehen und die geschätzte Komprimierungsstufe überprüfen: einfach.st/plugin532.
Wichtig zu wissen ist auch, welche Browser überhaupt mit welchem Komprimierungsformat umgehen können. Dadurch, dass gzip schon 1992 veröffentlicht wurde, gibt es heute keinen modernen Browser, der nicht mit diesem Dateiformat umgehen kann. Bei Brotli gibt es noch vereinzelt einige Browser, die noch nicht mit dem Format umgehen können.
Das Besondere an Content-Encryption ist, dass es eine Optimierung ist, die Auswirkungen auf jede einzelne Seite hat. Das heißt, dass bei jeder Anfrage an den Server nach einer Optimierung Unmengen an Daten gespart werden können.
Direkte Vorteile von einer optimierten Kompression:
Indirekte Vorteile einer optimierten Kompression: