Web-Kompression mit Gzip und Brotli: Alles richtig gemacht?

In der grundlegendsten Form handelt es sich um die Verarbeitung von Computerdaten, um deren Volumen zu reduzieren, während die enthaltenen Informationen erhalten bleiben. Hier konzentrieren wir uns auf verlustfreie Kompression, die den Datenverbrauch beim Herunterladen von Textdateien wie CSS oder JS vom Server auf den Browser reduziert.

Wir kennen zwei Hauptkompressionsmethoden:

• GZIP ist älter, weiter verbreitet und weniger effektiv.
• Mit Brotli erzielen Sie im Allgemeinen größere Einsparungen. Es ist nicht so weit verbreitet, wird aber von allen Browsern vollständig unterstützt.

Warum ist die Kompression wichtig?#

Texte auf dem Web komprimieren ist grundlegend. Wir verwenden Kompression auf HTML-, JS- und CSS-Dateien, da diese Ressourcen die Zeit bis zur ersten Darstellung der Seite beeinflussen. Logischerweise wollen wir diese Ressourcen möglichst klein halten.

Weiterhin nutzen wir sie für Favicon, SVG-Dateien und Schriftarten. Schriftarten sind jedoch eine spezielle Kategorie – die modernen Formate WOFF und WOFF2 sind bereits beim Generieren der Datei komprimiert. Wenn Sie für diese Formate weitere Kompression aktivieren, wird die Datei datenintensiver als das Original. Also Vorsicht. :)

Die Art der Kompression kann einfach im Browser überprüft werden. Öffnen Sie die DevTools und den Reiter Netzwerk. Suchen Sie in der Tabelle die Spalte content-encoding.

Content-Encoding in DevTools: Wenn da nichts steht, ist das nicht gut.

Enthüllung der Kompressionsstufen#

Mit der Einstellung von Brotli und GZIP endet unsere Arbeit jedoch nicht, das wäre zu einfach. Beide Kompressionsmethoden bieten die Möglichkeit, das Kompressionsniveau einzustellen. GZIP hat insgesamt 9 Stufen, Brotli sogar 11.

Wie wirkt sich die Reduktion durch verschiedene Kompressionsstufen auf eine 55 kB HTML-Datei oder 261 kB jQuery-Daten aus? Deutlich.

Langweilige Kompression? Aber was, wenn sie zwei Drittel des Datenvolumens einsparen könnte?

Der größte Unterschied ist natürlich beim Vergleich zwischen unkomprimierter und komprimierter Datei der Stufe 1 zu sehen. Weitere Stufen sparen prozentual nur einige Datenvolumen ein. Die Frage ist also: Welche Kompressionsstufe ist die beste?

Die Jagd nach dem idealen Kompressionsniveau#

Beim Einstellen des Kompressionsniveaus müssen Sie auch Ihre Infrastruktur und Server berücksichtigen. Die Wahrheit ist, dass je höher die Kompressionsstufe, desto höher die Anforderungen an die Rechenleistung. Höhere Kompression erfordert mehr Zeit.

Ab der sechsten Stufe lohnt es sich kaum noch.

Generell empfehlen wir bei PageSpeed.ONE das ideale Niveau 6. Wenn Sie eine detailliertere Erklärung bevorzugen, werfen Sie einen Blick auf das Video What is the GZIP compression level sweet spot?

Der schnellste Weg, das Kompressionsniveau zu testen#

Vielleicht haben Sie sich gefragt, wie Sie das Kompressionsniveau Ihrer eigenen Website überprüfen können. Ein Online-Tool kann für eine schnelle Überprüfung nützlich sein, indem Sie die URL eingeben. Die Auswertung zeigt das wahrscheinliche Kompressionsniveau an.

Mit diesem Tool sehen Sie, welche Kompressionsstufe Sie eingestellt haben.

Gut eingestellte Kompression ist keine Selbstverständlichkeit#

Bei PageSpeed.ONE haben wir eine Untersuchung der Websites einiger unserer Kunden durchgeführt. Das Ergebnis war, dass 6 von 24 Websites nicht optimal komprimiert waren.

Die Lösung dieses Problems ist jedoch nicht allzu schwierig. Bei GZIP sollte sich jemand um die Kompression kümmern, der für die Infrastruktur verantwortlich ist, jemand vom Webhosting oder ein fähiger Backend-Entwickler. Das Kompressionsniveau wird auf Apache-Ebene eingestellt und erfordert nur eine Zeile Code:

DeflateCompressionLevel 9

Einfach, nicht wahr? Diese Anpassung haben wir mit einem unserer Kunden durchgeführt. Ursprünglich war für HTML GZIP LEVEL 1 eingestellt, das wir nach Rücksprache auf LEVEL 6 umgestellt haben.

Das Ergebnis? Wir erzielten dadurch eine Einsparung von etwa 22 % bei der HTML-Größe (von 81 kB auf 63 kB).

Was passiert mit dem Datenvolumen von HTML, wenn Sie ein höheres Gzip-Level einstellen.

Wir haben auch die Aktivierung von Brotli-Kompression in Betracht gezogen, aber das war nicht möglich. Der neuere Algorithmus spart zwar mehr Daten, aber die Seite würde für den Benutzer später geladen. Brotli-Kompression dauert nämlich länger, besonders in der „Runtime“-Version, die erst bei einer Anfrage an den Server ausgeführt wird.

Es kann auch passieren, dass die Datenkompression aus irgendeinem Grund beim Kunden ausfällt.

Im Diagramm werden diese großen „Hügel“ dargestellt. Ob 600 kB oder 100 kB CSS heruntergeladen werden, macht einen erheblichen Unterschied aus und ist ein Argument dafür, technische Daten auf Websites zu messen und deren Größen. Diese Probleme können dann relativ einfach aufgedeckt werden.

Das möchten Sie im Diagramm nicht sehen. Wenn die Kompression gelegentlich ausfällt.

Rettung für Faule: Cloudflare#

Eine weitere Möglichkeit, das Kompressionsniveau zu lösen, ist die Aktivierung des Dienstes Cloudflare für Ihre Domain. Dieser speichert Ihre Textdateien und wendet die bestmögliche Kompression an. Konkret schaltet Cloudflare für CSS, JS, SVG usw. direkt Brotli ein.

Wenn Sie diesen Dienst nutzen, können Sie Ihre Einstellungen überprüfen. Bei einigen Tarifen muss Brotli aktiviert werden.

Cloudflare wird für Sie nützlich sein, auch wenn Ihre Website auf beliebten CMS wie WordPress, Shoptet oder Drupal läuft.

Wenn Sie Cloudflare hauptsächlich wegen des Ansturms von Bots in Betracht ziehen, werfen Sie einen Blick auf unseren Service Strategie für AI-Bots.

Zusammenfassung#

• Überprüfen Sie Ihre Kompressionseinstellungen in den DevTools (Netzwerk-Tab) oder im Lighthouse-Tool.
• Generell wird empfohlen, die Kompressionsstufe auf 6 einzustellen.
• Höhere Stufen als 6 bringen keine wesentlichen Unterschiede bei der Dateigröße.
• Schriftarten (WOFF und WOFF2) sind bereits komprimiert.
• Je höher das Kompressionsniveau, desto höher die Anforderungen an die Serverleistung und Zeit.
• Wenn Sie ein Problem feststellen, ändern Sie das Kompressionsniveau.
• Cloudflare kann dies automatisch für Sie erledigen.

Werfen Sie auch einen Blick darauf, wie Sie durch Optimierung im Backend weiterhelfen können.