Der einfachste Weg, deine Webseite zu beschleunigen, ist es, alle unerwünschten Ressourcen zu eliminieren. Der zweitleichteste Weg, sie zu beschleunigen, ist, alle gewünschten Ressourcen zu komprimieren. Die Aktivierung der GZIP-Komprimierung auf dem Webserver ist eine der einfachsten und effizientesten Möglichkeiten, dies zu erreichen.

Alle modernen Browser enthalten standardmäßig Support für die GZIP-Komprimierung. Um deinen Benutzern die komprimierten Ressourcen ohne Probleme zur Verfügung stellen zu können, musst du deinen Server jedoch richtig konfigurieren.

In diesem Beitrag lernst du die Grundlagen der Datenkomprimierung im Web, was GZIP-Komprimierung ist, ihre verschiedenen Vorteile und wie du es nutzen kannst, um deine Webseiten auf verschiedenen Servern schneller zu machen.

Aufgeregt? Lasst uns dekomprimieren!

Willst du lieber die Videoversion sehen?

Die Grundlagen der Datenkompression im Web

Datenkompression im Web ist der Prozess der Verkleinerung der von Webseiten übertragenen Daten. Abhängig vom Datentyp – Text, Bilder, Stylesheets, Skripte, Schriften – gibt es verschiedene Möglichkeiten, Daten zu komprimieren.

Die Hauptkomponenten einer Webseite
Die Hauptkomponenten einer Webseite

Beispielsweise ist die Minimierung von HTML, CSS und JavaScript eine einfache Möglichkeit, die von Browsern gesendete Datenmenge zu reduzieren. Dabei komprimiert der Minifier den Text, indem er unnötige Zeichen wie Kommentare und Whitespaces aus dem Quellcode entfernt.

Im folgenden Beispiel eines einfachen HTML-Dokuments gibt es drei Inhaltstypen: HTML-Auszeichnung, CSS-Stile und JavaScript-Code.

Jeder Inhaltstyp hat eine eindeutige Syntax und Semantik. Insgesamt hat dieses HTML-Dokument insgesamt 357 Zeichen.

<html>
<head>
    <style>
    /* kinsta-banner is used on the homepage only */
    .kinsta-banner { font-size: 150% }
    .kinsta-banner { width: 75% }
</style>
</head>
<body>
    <!-- kinsta banner START -->
    <div>...</div>
    <!-- kinsta banner END -->
    <script>
    kinstaScripts(); // random scripts used on the page
    </script>
</body>
</html>

Der obige Code ist leicht zu lesen und zu befolgen. Er ist ideal für die Entwicklung. Es ist jedoch nicht notwendig, dass der Browser Kommentare liest und perfekt eingerückte Tags hat. Ein intelligenter Kompressor kann dieses Dokument analysieren und alle unnötigen Bits aus ihm entfernen.

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>

Nach der Minifizierung reduziert sich das HTML-Dokument auf nur noch 141 Zeichen. Das entspricht einer Ersparnis von 60,50% bei der Anzahl der Zeichen. Für die Augen ist es nicht so einfach, aber für den Browser spielt das keine Rolle. Es wird dem Benutzer immer noch die gleiche Seite angezeigt.

Um die Vorteile beider Versionen zu nutzen, kannst du das Originaldokument als „Entwicklungsversion“ beibehalten, aber den gesamten Code minifizieren, bevor du es live schaltest.

Die meisten WordPress-Performance-Plugins erledigen das automatisch für dich.

Dateigrößenkompression von unkomprimierter vs minified jQuery
Dateigrößenkompression von unkomprimierter vs minified jQuery

Zum Beispiel ist die unkomprimierte Version der jQuery 3.5.1 Bibliothek mehr als 3 mal größer als die minifizierte Version derselben Datei.

Ebenso können die gleichen Kompressionstechniken, wie oben beschrieben, auch andere Inhalte wie Bilder, Videos, Schriftarten und mehr optimieren. Inhaltsspezifische Reduktionen wie diese sind der erste Schritt zur Optimierung der Größe der textbasierten Assets deiner Webseite.

Diese offensichtlichen Vorteile sind der Grund, warum Kinsta eine Funktion zur Code-Minifizierung in das MyKinsta Dashboard aufgenommen hat. Kunden können wählen, ob sie ihre CSS- und JavaScript-Dateien automatisch verkleinern lassen wollen, um ihre Seiten ohne manuellen Aufwand zu beschleunigen.

Aber Datenkompression ist mehr als nur eine Verkleinerung. Mit Hilfe von fortgeschrittenen mathematischen Techniken können Datenkompressionsalgorithmen die Größe der Daten weiter reduzieren.

Eines der beliebtesten Beispiele für eine solche Datenkompressionsmethode ist GZIP. Es ermöglicht eine effiziente Datenübertragung und hat wesentlich dazu beigetragen, das Internet zu einem brauchbaren globalen Kommunikationsmedium zu machen.

Was ist GZIP-Kompression?

GZIP, kurz für GNU Zip, ist die beliebteste verlustfreie Datenkompressionsmethode im Web. Es erlaubt es dir, die Größe der HTML-Seiten, Stylesheets und Skripte deiner Webseite zu reduzieren.

Abgesehen davon, dass GZIP ein Datenkompressionsalgorithmus ist, ist GZIP auch eine Dateierweiterung (.gz) und eine Software zum Komprimieren/Dekomprimieren von Dateien.

Es basiert auf dem DEFLATE-Algorithmus, der eine Mischung aus LZ77-Kodierungs– und Huffman-Kodierungsalgorithmen ist.

Die GZIP-Komprimierung basiert auf dem DEFLATE-Algorithmus
Die GZIP-Komprimierung basiert auf dem DEFLATE-Algorithmus

Ein GZIP-Kompressor nimmt einen Satz Rohdaten und komprimiert es verlustfrei. Die Rohdaten können von jedem Dateityp sein, aber GZIP funktioniert am besten mit textbasierten Assets (z.B. HTML, CSS, JS).

Der nächste Abschnitt befasst sich eingehend mit der Funktionsweise der GZIP-Komprimierung.

Wie GZIP Daten komprimiert

Eine grobe Illustration, wie GZIP-Kompression funktioniert
Eine grobe Illustration, wie GZIP-Kompression funktioniert

Zu Beginn lässt der GZIP-Kompressor den LZ77-Kompressionsalgorithmus auf den Rohdaten laufen, um Redundanzen zu entfernen. Dieser Algorithmus funktioniert, indem er wiederholte Muster in einem vordefinierten Schiebefenster (einem kleinen Ausschnitt der Rohdaten) findet.

Es ersetzt dann alle wiederholten Strings durch Tupel, um die Rohdaten zu komprimieren.

Eine Illustration des LZ77-Kodierungsalgorithmus
Eine Illustration des LZ77-Kodierungsalgorithmus

In dem obigen Beispiel ist das Schiebefenster nur 13 Zeichen lang (13 Bytes). Die GZIP-Komprimierung kann jedoch eine maximale Sliding-Window-Größe von 32 KB (32.768 Bytes) verwenden. Die Größe des Schiebefensters spielt eine Schlüsselrolle für die Leistung der LZ77-Komprimierung.

Nachdem die Rohdaten mit dem LZ77-Algorithmus komprimiert wurden, verwendet der GZIP-Komprimierer dann den Huffman-Kodierungsalgorithmus, um es weiter zu komprimieren. Er tut dies, indem er häufiger vorkommenden Zeichen die geringste Anzahl Bits zuweist, während er seltenen Zeichen die höchste Anzahl Bits zuweist.

Diese Technik ähnelt der im Morsealphabet verwendeten, bei der Buchstaben, die in der englischen Sprache häufiger vorkommen, die kürzeste Sequenz erhalten.

Um zu verstehen, wie der Huffman-Kodieralgorithmus funktioniert, betrachte das Wort BOOKKEEPER. Es ist 10 Zeichen lang, aber es hat nur 6 eindeutige Zeichen. Dieses Wort hat einen guten Mix aus einfachen, doppelten und dreifachen Buchstaben.

Fast alle Webseiten benutzen UTF-8 Zeichenkodierung, um Buchstaben und Symbole darzustellen. Jedes ASCII-Zeichen in UTF-8, zu dem auch das englische Alphabet gehört, verwendet 1 Byte (8 Bits).

Das Wort "BOOKKEEPER"
Das Wort „BOOKKEEPER“ hat viele sich wiederholende Buchstaben

Ein 10-Zeichen-String wie BOOKKEEPER benötigt 10 Bytes (80 Bit) Speicherplatz. Du kannst sehen, dass es 1 Instanz der Buchstaben B, P, R, 2 Instanzen der Buchstaben O und K und 3 Instanzen des Buchstabens E enthält.

Der Huffman-Kodieralgorithmus nutzt dieses Wissen, um den String verlustfrei zu komprimieren. Er tut dies, indem er einen binären Baum mit jedem einzelnen Buchstaben als Blatt erzeugt.

Die Buchstaben mit der niedrigsten Häufigkeit (z.B. B, P, R) befinden sich am unteren Ende des Baumes, während diejenigen, die häufig vorkommen (z.B. E, O, K), sich idealerweise an der Spitze des Baumes befinden.

Der oberste Knoten im Baum ist die Wurzel, und sein Wert ist gleich der Gesamtzahl der Zeichen in der Zeichenkette.

Huffman Tree für das Wort "BOOKKEEPER".
Huffman Tree für das Wort „BOOKKEEPER“.

Nachdem der Huffman-Baum generiert wurde, erhalten alle links- und rechtsverzweigten Pfeile die Zahlen 0 bzw. 1. Du kannst dann den Huffman-Code für jedes beliebige Zeichen generieren, indem du den Pfad von Wurzel zu Blatt zurückverfolgst und alle 0 und 1 miteinander verbindest.

Huffman-Codes sind einzigartige Binärcodes für jeden Charakter
Huffman-Codes sind einzigartige Binärcodes für jeden Charakter

Du kannst feststellen, dass die Buchstaben mit der höchsten Häufigkeit Huffman-Codes mit den kleinsten Bitgrößen haben.

Hinweis: Der Huffman-Kodieralgorithmus kann alternative Binärcodes erzeugen, indem er eine andere Ordnungsstrategie für Zeichen mit den gleichen Häufigkeiten verwendet. Die Gesamtgröße der kodierten Zeichenfolge bleibt jedoch gleich.

Ein 80-Bit-Wort, kodiert als 25-Bit-Zeichenkette
Ein 80-Bit-Wort, kodiert als 25-Bit-Zeichenkette

Das ist eine 68,75%ige Reduzierung des Speicherplatzes, der benötigt wird, um das Originalwort zu speichern.

Die Verwendung des Huffman-Baums mit der 0/1-Konvention erzeugt Binärcodes, die die Präfix-Eigenschaft erfüllen. Es stellt sicher, dass der Huffman-Code eines bestimmten Zeichens kein Präfix des Codes eines anderen Zeichens ist, was es einfach macht, die kodierte Zeichenkette mit Hilfe des Huffman-Baums zu dekodieren. Dies spielt eine primäre Rolle für die Dekompressionsgeschwindigkeit von GZIP.

Genau wie bei dem Wort oben verwendet der GZIP-Kompressor den Huffman-Kodieralgorithmus, um die vom LZ77-Algorithmus erzeugten Tupel weiter zu optimieren. Das Ergebnis sind hochkomprimierte Dateien mit der Endung .gz.

Wenn du mehr darüber erfahren möchtest, wie GZIP funktioniert, schau dir dieses Video für einen schnellen Überblick an.

Wie gut ist die GZIP-Komprimierung?

Normalerweise erreicht GZIP eine Kompressionsrate von etwa 70% für kleine Dateien, aber es kann bis zu 90% für größere textbasierte Assets erreichen.

GZIP-Kompressionsraten für einige beliebte CSS- und JS-Bibliotheken
GZIP-Kompressionsraten für einige beliebte CSS- und JS-Bibliotheken

In der obigen Tabelle kannst du sehen, dass das Komprimieren von Minidateien mit GZIP ihre Größe weiter verringern kann.

Hinweis: Du kannst jeden Dateityp mit GZIP komprimieren, aber für Assets, die bereits mit anderen Methoden komprimiert wurden (z.B. Bilder, Videos), wird es keine Ersparnis bringen. Manchmal kann es sogar die Dateigröße erhöhen.

Die Stärke eines Kompressionsalgorithmus hängt nicht nur von seiner Kompressionsrate ab, sondern auch davon, wie schnell und effizient er Daten komprimieren und dekomprimieren kann. Das ist der Punkt, an dem sich GZIP für die meisten Anwendungsfälle auszeichnet.

Da GZIP mit Hilfe eines Streaming-Algorithmus schnell dekomprimiert wird, eignet es sich hervorragend für Webprotokolle, bei denen es auf Geschwindigkeit ankommt. Außerdem benötigt GZIP nur minimale Ressourcen, um Daten zu komprimieren und zu dekomprimieren, was es ideal für Server und Clients gleichermaßen macht.

Kompressionsleistung von brotli vs. bzip2 vs. GZIP vs. xz
Kompressionsleistung von brotli vs. bzip2 vs. GZIP vs. xz (Quelle: OpenCPU)

Die Diagramme oben vergleichen die Kompressionsleistung der Kompressionsalgorithmen brotli, bzip2, gzip und xz. GZIP verliert beim Test der Kompressionsrate leicht, aber bei den Kompressions- und Dekompressionsgeschwindigkeiten schlägt es die Konkurrenz um Längen.

Wenn wir uns den Kompressionsgeschwindigkeits-Graphen ansehen, können wir schließen, dass GZIP ideal für Echtzeit-Kompression in HTTP-Servern und anderen Datenströmen im Web ist. In Anbetracht all seiner positiven Auswirkungen auf den Fortschritt des Webs hat die IETF GZIP als eines der drei Standardformate für die Komprimierung in HTTP/1.1 ratifiziert.

Hinweis: Eine Abstraktion der Komprimierungsbibliothek von GZIP namens zlib wird in vielen gängigen Betriebssystemen (Linux, macOS, iOS) und modernen Spielkonsolen (PlayStation 4, Wii U, Xbox One) verwendet. Es wird auch im verlustfreien PNG-Dateiformat zum Komprimieren von Bildern verwendet.

6 Vorteile der GZIP-Komprimierung

Schauen wir uns die wichtigsten Vorteile der GZIP-Komprimierung genauer an.

Liefert ein anständiges Kompressionsverhältnis

Wie bereits besprochen, hat GZIP im Vergleich zur Konkurrenz nicht die beste Kompressionsrate. Aber es ist auch nicht so weit davon entfernt. Normalerweise kann es dir helfen, die Größe der textbasierten Ressourcen um 70-90% zu reduzieren.

Superschnelle Komprimierung und Dekomprimierung

Bei der Geschwindigkeit der Datenkompression und -dekompression ist GZIP der klare Sieger. Es ist sehr wünschenswert für die on-the-fly Kompression in HTTP-Servern und anderen Datenströmen.

Benötigt sehr wenig Speicher

GZIP hinterlässt einen minimalen Speicherbedarf, wodurch es für Server und Systeme mit begrenzter Speicherkapazität geeignet ist. Daher wird es selbst von den billigsten Webhosting-Providern unterstützt.

Erweitert sich selbst im schlimmsten Fall nicht stark.

Verlustfreie Datenkompressionsalgorithmen wie GZIP haben eine strenge Grenze, über die hinaus sie keine Daten komprimieren können.

Typischerweise passiert dies, wenn die Ressource bereits gut komprimiert ist, oder wenn sie winzig ist und der Overhead beim Hinzufügen des GZIP-Wörterbuchs höher ist als die Kompressionsersparnis. Wir können dieses Phänomen auf ein Konzept namens Entropie-Kodierung zurückführen. GZIP ist sehr widerstandsfähig gegen diesen Effekt.

Frei verwendbar und Open Source

GZIP wurde in erster Linie als freier Open-Source-Ersatz für das patentierte Komprimierungsprogramm erstellt, das in den frühen Unixsystemen verwendet wurde. Daher ist es nicht mit irgendwelchen Patenten belastet und kann von jedem frei verwendet werden.

Genießt universellen Support

Laut W3Techs wird die GZIP-Komprimierung von 82% aller Webseiten, die sie verfolgen, verwendet. Damit ist es der am weitesten verbreitete Kompressionsalgorithmus im Web.

GZIP wird von fast allen Servern und Clients unterstützt. Egal, auf welchem Server du deine Webseite hostet, du kannst sie beschleunigen, indem du GZIP auf ihr aktivierst.

GZIP-Warnungen in den Website Speed Testing Tools

Neben der Minifizierung ist die Aktivierung von GZIP eine der einfachsten und effektivsten Geschwindigkeitsoptimierungen, die du auf deiner Webseite implementieren kannst.

Es ist auch eine der einfachsten Möglichkeiten, WordPress zu optimieren. Trotzdem benutzen viele WordPress Seiten es immer noch nicht.

Wenn du eine Webseite besuchst, überprüft dein Browser, ob der Webserver GZIP aktiviert hat, indem er den content-encoding: gzip response header überprüft. Wenn der Header existiert, ruft es die komprimierten Dateien ab, dekomprimiert sie und serviert dir dann automatisch die kleineren Dateien.

Der "content-encoding: gzip"-Antwort-Header in den Chrome DevTools
Der „content-encoding: gzip“-Antwort-Header in den Chrome DevTools

Wenn der Browser den GZIP-Response-Header nicht erkennt, lädt es die unkomprimierten Dateien herunter. In den meisten Fällen kann der Unterschied in der Ladegeschwindigkeit der Seite mehrere Sekunden betragen. Wenn du also GZIP nicht aktiviert hast, wirst du in den Geschwindigkeitstesttools der Webseiten Warnungen sehen.

GZIP-Warnung in Google PageSpeed Insights / Lighthouse / Leuchtturm

Google PageSpeed Insights gibt eine Warnung aus, wenn du auf deiner Webseite keine Textkompression aktiviert hast.

Hinweis: Google PageSpeed Insights und Google Lighthouse waren zwei verschiedene Tools zum Testen der Leistung von Webseiten. Sie arbeiteten unabhängig voneinander bis 2018, als Google PageSpeed Insights aktualisiert hat, um Lighthouse als Analyse-Engine zu verwenden. Daher sind PageSpeed Insights und Lighthouse jetzt ein und dasselbe.

Warnung "Textkompression aktivieren" in Google PageSpeed Insights
Warnung „Textkompression aktivieren“ in Google PageSpeed Insights

Auf der obigen Beispielseite kann die Komprimierung textbasierter Ressourcen das Seitengewicht um über 78% reduzieren und die Ladezeit der Seite um 2,1 Sekunden verkürzen.

Hinweis: PageSpeed Insights verlässt sich auf die Response-Header, die der Server an deinen Browser zurückgibt. Manchmal kann es vorkommen, dass es eine falsche Warnung anzeigt, selbst wenn du GZIP-Komprimierung aktiviert hast. Es kann daran liegen, dass der Geschwindigkeitstest auf einem Rechner läuft, der einen zwischengeschalteten Proxy-Server oder eine Sicherheitssoftware verwendet. Es kann sein, dass sie das Herunterladen komprimierter Dateien von externen Servern stören.

GZIP-Warnung in GTmetrix

GTmetrix zeigt eine Warnung an, wenn deine Webseite keine komprimierten textbasierten Ressourcen anbietet. Wie Google PageSpeed Insights zeigt es dir auch die möglichen Einsparungen, die du erzielen kannst.

"Kompression aktivieren"-Warnung in GTmetrix
„Kompression aktivieren“-Warnung in GTmetrix

Hinweis: GTmetrix aktualisiert gerade seinen Geschwindigkeitstest-Algorithmus, um die alten PageSpeed Insights- und YSlow-Bibliotheken durch die neuesten Google-Lighthouse-Metriken zu ersetzen. Du kannst davon ausgehen, dass seine GZIP-Komprimierungswarnung ähnlich der von Lighthouse sein wird.

GZIP-Warnung in Pingdom Tools

Pingdom Tools warnt eindringlich davor, die Bestandteile deiner Webseiten mit GZIP zu komprimieren.

"Komponenten mit GZIP komprimieren" Warnung in Pingdom Tools
„Komponenten mit GZIP komprimieren“ Warnung in Pingdom Tools

In der Beschreibungssektion gibt dir Pingdom Tools auch ein paar Statistiken über die Wichtigkeit von GZIP. Coole Sache!

GZIP-Warnung im WebPageTest

WebPageTest zeigt eine Warnung im Reiter „Leistungsüberprüfung“ an, wenn es feststellt, dass komprimierbare Responses nicht in der optimalsten Weise bedient werden.

"Benutze GZIP-Kompression" Warnung in WebPageTest
„Benutze GZIP-Kompression“ Warnung in WebPageTest

WebPageTest vergibt auch eine benotete Punktzahl, um zu zeigen, wie streng eine Warnung ist. Zum Beispiel bewertet es die obige Warnung mit 23 von 100 Punkten, was bedeutet, dass du es als Priorität beheben solltest.

Wie prüfe ich, ob die GZIP-Komprimierung aktiviert ist?

Der HTTP-Header Accept-Encoding: gzip, deflate wird von praktisch allen modernen Browsern unterstützt. Die meisten Hosts aktivieren die GZIP-Komprimierung (oder Brotli-Komprimierung) standardmäßig auf allen ihren Servern.

Wenn Webserver diesen von einem Browser gesendeten Header sehen, erkennen sie den Support des Browsers für GZIP und antworten mit einer komprimierten HTTP-Antwort unter Verwendung der content-encoding: gzip-Header.

Aber wenn du einen anderen Hosting-Provider benutzt, oder wenn du einfach nur überprüfen möchtest, ob deine Webseite GZIP-komprimierte Inhalte korrekt ausliefert, überprüfe immer, ob es aktiviert ist.

Unten findest du ein paar einfache Möglichkeiten, wie du die GZIP-Komprimierung überprüfen kannst.

1. Online GZIP-Kompressionstest Tools

Die Verwendung eines Online-Tools ist der einfachste Weg, um zu überprüfen, ob die GZIP-Komprimierung auf deiner Webseite aktiviert ist. Ich empfehle die Verwendung der kostenlosen Tools Check GZIP Compression oder HTTP Compression Test. Gib einfach die URL deiner Webseite ein und klicke auf den Check– oder Test-Button.

Diese beiden Online-Tools zeigen dir einen kurzen Bericht darüber an, ob GZIP aktiviert ist oder nicht und die Menge an Datentransfer, die du gespeichert hast (oder speichern kannst), indem du die Test-URL mit aktivierter GZIP-Komprimierung anbietest.

Das erste Tool zeigt dir auch andere relevante Informationen, wie den Servertyp deiner Webseite, den Inhaltstyp und die Kompressionszeit.

Testen von Kinsta's Homepage mit dem Check GZIP Compression Tool
Testen von Kinsta’s Homepage mit dem Check GZIP Compression Tool

Hinweis: Seit dem 5. November 2021 hat Kinsta für alle HTTPS-Anfragen auf Brotli-Kompression über Cloudflare umgestellt. Du kannst die Brotli-Komprimierung testen, indem du in den Response-Headern einer Anfrage nach content-encoding: br suchst.

Testen von Kinsta.com mit dem HTTP-Kompressionstest Tool
Testen von Kinsta.com mit dem HTTP-Kompressionstest Tool

Du solltest beachten, dass die GZIP-Optimierung nicht nur auf deiner Webseite aufhört, sondern auch ihre statischen textbasierten Assets wie Stylesheets, Skripte und Schriftarten mit einbezieht. Wenn du ein CDN verwendest, um diese Assets bereitzustellen, dann musst du sicherstellen, dass das CDN diese Assets auch mit aktivierter GZIP-Komprimierung bereitstellt.

Die meisten modernen CDNs wie Cloudflare, Kinsta CDN, KeyCDN und CloudFront unterstützen GZIP-Kompression. Du kannst die Assets, die vom CDN für die GZIP-Komprimierung bereitgestellt werden, testen, indem du direkt auf die Assets linkst.

GZIP-Kompressionstest für Assets, die von einem CDN gehostet werden
GZIP-Kompressionstest für Assets, die von einem CDN gehostet werden

Im obigen Bericht kannst du sehen, dass Kinsta’s CDN die KeyCDN-Engine verwendet, ein traditionelles Pull-CDN.

Hinweis: Kinsta ist zu Cloudflare als CDN-Partner gewechselt, um die Seiten unserer Kunden schneller und sicherer zu machen. Mehr dazu kannst du hier lesen.

Wenn du deine Seite bei Kinsta hostest, brauchst du dich um die GZIP-Komprimierung nicht zu kümmern, denn wir aktivieren standardmäßig die Brotli-Komprimierung – eine schnellere Alternative zur GZIP-Komprimierung.

2. Der „content-encoding: gzip“ HTTP Response Header

Die zweite Möglichkeit zu überprüfen, ob eine Webseite GZIP-komprimierte Inhalte liefert, ist die Überprüfung der content-encoding: gzip HTTP Response Header.

Du kannst Chrome DevTools oder Firefox Developer Tools öffnen und nach diesem Response-Header unter der Netzwerk-Sektion suchen.

Ich habe schon früher gezeigt, wie es in den Chrome DevTools aussieht. Hier siehst du, wie es in den Firefox Developer Tools aussieht.

Der "content-encoding: gzip"-Header in den Firefox Developer Tools
Der „content-encoding: gzip“-Header in den Firefox Developer Tools

Du kannst auch die Option „Große Anfragezeilen verwenden“ in den Chrome DevTools-Einstellungen aktivieren, um sowohl die Originalgröße als auch die komprimierte Größe der Seite zu sehen. Wie du unten sehen kannst, hat sich die Größe der Originalseite von 118 KB auf nur 22,9 KB reduziert, nachdem sie mit GZIP komprimiert wurde.

Betrachte die komprimierten vs. unkomprimierten Seitengrößen in Chrome Devtools
Betrachte die komprimierten vs. unkomprimierten Seitengrößen in Chrome Devtools

3. Webpage Geschwindigkeitstest Tools

Die meisten Website Speed Testing Tools warnen dich davor, Kompression wie GZIP für deine Webseiten zu verwenden. Viele Leser, die zu diesem Artikel kommen, kommen wahrscheinlich wegen genau dieser GZIP-Warnungen, von denen ich viele oben bereits ausführlich besprochen habe.

GZIP-Warnungen in verschiedenen Webpage Speed Testing Tools
GZIP-Warnungen in verschiedenen Webpage Speed Testing Tools

Du kannst Tools wie PageSPeed Insights, GTmetrix, Pingdom Tools und WebPageTest benutzen, um zu überprüfen, ob du GZIP-Kompression auf deiner WordPress Webseite aktiviert hast.

Wie aktiviere ich die GZIP-Komprimierung?

Wenn du keine GZIP-Komprimierung auf deinem Webserver aktiviert hast, gibt es viele Möglichkeiten, es zu aktivieren. Die genaue Methode hängt davon ab, welchen Webserver du für das Hosting deiner Webseite verwendest.

Wichtig: Wie immer solltest du ein Backup deiner Webseite und der Server-Konfigurationsdateien machen, bevor du sie bearbeitest.

1. Aktiviere GZIP mit einem WordPress-Plugin

Der einfachste Weg, die GZIP-Kompression auf deiner Webseite zu aktivieren, ist die Verwendung eines Caching- oder Leistungsoptimierungs-Plugins.

Wenn du zum Beispiel deine WordPress Seite auf einem Apache Webserver hostet, enthält W3 Total Cache eine Option, um die GZIP Kompression in den Browser Cache Einstellungen zu aktivieren.

Genauso kannst du mit WP Rocket automatisch GZIP-Kompressionsregeln hinzufügen. Diese Plugins aktivieren die GZIP-Kompression, indem sie das Apache-Modul mod_deflate zur .htaccess-Datei hinzufügen.

Aktivieren der GZIP-Komprimierung im W3 Total Cache
Aktivieren der GZIP-Komprimierung im W3 Total Cache

WordPress Plugins benötigen die Erlaubnis, Dateien auf deinem Webserver zu verändern. Wenn sie nicht die richtigen Berechtigungen haben, dann werden sie fehlschlagen oder dir einen Fehler anzeigen.

In solchen Fällen musst du dich mit deinem Hosting-Provider in Verbindung setzen oder die Konfigurationsdateien deines Webservers manuell ändern, indem du die untenstehenden Code-Schnipsel verwendest.

Hinweis: Kinsta hat seine Plattform für hohe Leistung, Zuverlässigkeit und Sicherheit optimiert. Dazu gehört auch, dass es die GZIP-Komprimierung standardmäßig für alle seine Hosting-Angebote aktiviert hat.

Da Caching-Plugins von Drittanbietern zu Konflikten mit den internen Leistungsoptimierungen von Kinsta führen können, lässt Kinsta die meisten davon auf seinen Servern nicht zu. Für weitere Informationen kannst du die komplette Liste der von Kinsta verbotenen Plugins einsehen.

2. Aktiviere GZIP auf dem Apache Webserver

Laut Netcraft bedient Apache mehr aktive Webseiten als jeder andere Webserver, der heute im Einsatz ist. Es ist auch einer der beiden von WordPress empfohlenen Webserver.

Um die GZIP-Kompression auf Apache-Servern zu aktivieren, musst du seine Module mod_filter und mod_deflate verwenden und sie mit den richtigen Direktiven richtig konfigurieren. Sie weisen Apache an, die Ausgabe des Servers zu komprimieren, bevor er es über das Netzwerk an die Clients sendet.

Du hast zwei Möglichkeiten, die Serverkonfigurationen des Apache zu bearbeiten, je nachdem, welche Zugriffsstufe du hast:

  1. Wenn du auf die Hauptkonfigurationsdatei des Servers (normalerweise httpd.conf genannt) zugreifen kannst, solltest du es benutzen, um Apache zu konfigurieren, da .htaccess-Dateien den Apache verlangsamen können.
  2. Wenn du nicht auf die Hauptkonfigurationsdatei des Servers zugreifen kannst, was bei den meisten WordPress-Shared Hosting-Providern der Fall ist, musst du Apache mit der .htaccess-Datei konfigurieren.

Die erste Option ist nur für Sysadmins, da die Host-Provider es selten erlauben, die Konfigurationsdatei des Hauptservers zu bearbeiten. Zu erklären, wie man es auf diese Weise macht, liegt außerhalb des Rahmens dieses Artikels. Du kannst die Beispiel-Apache-Server-Konfigurationen, die vom HTML5 Boilerplate-Projekt zur Verfügung gestellt werden, und die Apache-Dokumentation zu Rate ziehen, um anzufangen.

Die zweite Option ist ideal für die meisten Besitzer von WordPress Seiten, da viele Shared Hosting Provider das Editieren von .htaccess Dateien erlauben.

Um anzufangen, benutze SFTP oder den Online-Datei-Manager deines Hosts, um die .htaccess-Datei im Hauptverzeichnis deiner WordPress-Seite zu finden. Füge dann den untenstehenden Code-Schnipsel dazu.

Wichtig: Stelle sicher, dass das mod_filter-Modul auf deinem Server aktiv ist. Die meisten Webhosts haben es standardmäßig aktiviert, aber wenn es das nicht ist, wird die AddOutputFilterByType-Direktive nicht funktionieren und einen HTTP 500-Fehler auslösen. Du kannst die Fehlerprotokolle deines Servers überprüfen, wenn du irgendwelche Probleme hast, nachdem du den Codeschnipsel unten hinzugefügt hast.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml  

  # Remove browser bugs (only needed for ancient browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Füge den obigen Code erst nach den bestehenden Direktiven deiner .htaccess-Datei hinzu. Speichere die Datei und prüfe dann, ob es auf deinem Server GZIP-Kompression aktiviert.

Beispiel einer Apache .htaccess-Datei nach Aktivierung der GZIP-Komprimierung
Beispiel einer Apache .htaccess-Datei nach Aktivierung der GZIP-Komprimierung

Dein Webserver sollte nun komprimierte Dateien für alle oben aufgeführten Dateierweiterungen bereitstellen. Du kannst dies bestätigen, indem du eine der oben genannten Methoden verwendest.

Wenn du sicherstellen möchtest, dass Proxies und Sicherheitssoftware auf der Client-Seite die GZIP-Komprimierung nicht stören, kannst du den obigen Codeschnipsel durch den folgenden ersetzen.

<IfModule mod_deflate.c>
  # force compression for clients that mangle 'Accept-Encoding' request headers
  <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
  </IfModule>

  # compress all output with one of the following file extensions
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/atom+xml" \
                                  "application/javascript" \
                                  "application/json" \
                                  "application/ld+json" \
                                  "application/manifest+json" \
                                  "application/rdf+xml" \
                                  "application/rss+xml" \
                                  "application/schema+json" \
                                  "application/geo+json" \
                                  "application/vnd.ms-fontobject" \
                                  "application/wasm" \
                                  "application/x-font-ttf" \
                                  "application/x-javascript" \
                                  "application/x-web-app-manifest+json" \
                                  "application/xhtml+xml" \
                                  "application/xml" \
                                  "font/eot" \
                                  "font/opentype" \
                                  "font/otf" \
                                  "font/ttf" \
                                  "image/bmp" \
                                  "image/svg+xml" \
                                  "image/vnd.microsoft.icon" \
                                  "text/cache-manifest" \
                                  "text/calendar" \
                                  "text/css" \
                                  "text/html" \
                                  "text/javascript" \
                                  "text/plain" \
                                  "text/markdown" \
                                  "text/vcard" \
                                  "text/vnd.rim.location.xloc" \
                                  "text/vtt" \
                                  "text/x-component" \
                                  "text/x-cross-domain-policy" \
                                  "text/xml"
  </IfModule>

  # define and map media types to their appropriate encoding type    
  # Using SVG format (Scalable Vector Graphics) is highly recommended to    
  # load logos, icons, text, and simple images. You can compress .SVG files
  # further using GZIP to create .SVGZ files. However, most browsers don’t
  # know that they need to decompress them first if they’re not served
  # without an appropriate ‘content-encoding’ HTTP response header. Thus,
  # these images wouldn’t show up in the browser. Hence, this module.

  <IfModule mod_mime.c>
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
  </IfModule>

</IfModule>

Du kannst mehr über alle Direktiven, die hier verwendet werden, erfahren, indem du in das Code-Repository gehst und allen Ressourcen folgst, die dort verlinkt sind.

3. Aktiviere GZIP auf dem Nginx-Webserver

Wie bei Netcraft ist Nginx der am meisten genutzte Webserver für Computer mit Internetanschluss. Wenn der aktuelle Trend anhält, wird er bald  Apache überholen und zum meistgenutzten Webserver von aktiven Webseiten werden. Sogar Kinsta nutzt Nginx, um seine leistungsoptimierten Hosting-Lösungen zu betreiben.

Du kannst die GZIP-Kompression auf deinem Nginx-Webserver aktivieren, indem du die im ngx_http_gzip_module definierten Direktiven verwendest.

Um zu beginnen, füge die unten angegebenen Direktiven in deine nginx.conf-Datei ein. Normalerweise kannst du diese Datei in /etc/nginx/nginx.conf auf deinem Server finden.

# enables GZIP compression
gzip on; 

# compression level (1-9)
# 6 is a good compromise between CPU usage and file size
gzip_comp_level 6;

# minimum file size limit in bytes to avoid negative compression outcomes
gzip_min_length 256;

# compress data for clients connecting via proxies
gzip_proxied any;

# directs proxies to cache both the regular and GZIP versions of an asset
gzip_vary on;

# disables GZIP compression for ancient browsers that don't support it
gzip_disable "msie6";

# compress outputs labeled with the following file extensions or MIME-types
# text/html MIME-type is enabled by default and need not be included
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

Wenn deine Webseite große JS- und CSS-Dateien enthält, dann kannst du die für die Komprimierung verwendete Puffergröße erhöhen, indem du die folgende Direktive zu deiner nginx.conf-Datei hinzufügst:

# sets the 'number' and 'size' of buffers for GZIP compression
# default buffer size is 4K or 8K depending on the platform
gzip_buffers 16 8k;

Vergiss nicht, Nginx neu zu laden, nachdem du deine nginx.conf-Datei gespeichert hast.

sudo service nginx reload

Abschließend solltest du testen, ob dein Server GZIP-Kompression aktiviert hat. Du kannst in der Nginx-Dokumentation nachschlagen, um eine aktuelle Liste aller ngx_http_gzip_module Direktiven zu erhalten.

4. Aktiviere GZIP auf dem IIS-Webserver

Microsofts Internet Information Services (IIS) ist der drittbeliebteste Webserver, der heute verwendet wird. IIS wird hauptsächlich in Unternehmensumgebungen unter Windows eingesetzt, insbesondere für die Einrichtung von firmenspezifischen Intranet- und Extranet-Servern.

Aufgrund verschiedener Kompatibilitätsprobleme wird es selten als Host für WordPress Seiten verwendet.

Wenn du dich jedoch in einer dieser seltenen Situationen befindest, in denen du die GZIP-Komprimierung auf IIS aktivieren musst, kannst du in der Dokumentation von Microsoft nachschlagen, um anzufangen. Vielleicht findest du auch diesen Stack Overflow Thread hilfreich.

Alternativen zur GZIP-Komprimierung

Die Welt der Datenkompression im Web schreitet immer weiter voran. Da die durchschnittliche Größe der Seitengewichte ständig zunimmt, versucht auch die Webtechnologie es einzuholen, um den Datentransfer über das Web effizienter zu gestalten.

Die Größe der Seitengewichte nimmt mit der Zeit zu
Die Größe der Seitengewichte nimmt mit der Zeit zu (Quelle: HTTPArchiv)

Ein neuer Kompressionsalgorithmus hat in den letzten Jahren an Popularität gewonnen: Brotli. Ursprünglich war das Komprimieren von WOFF2-Webfonts der Schwerpunkt von Brotli, aber inzwischen hat es sich erweitert und unterstützt nun auch die Komprimierung für jede Art von Daten.

Brotli komprimiert Daten besser als GZIP, aber es benötigt wesentlich mehr Zeit und Ressourcen, um die Daten zu komprimieren. Allerdings ist seine Dekompressionszeit vergleichbar mit der von GZIP, obwohl es immer noch einen Tick langsamer ist.

Brotli Support in verschiedenen Browsern
Brotli Support in verschiedenen Browsern

Die meisten Browser unterstützen heute Brotli, aber es ist immer noch etwas kompliziert, es auf WordPress Seiten zu benutzen. Du musst deine Webseite bei einem Hosting-Provider hosten, der Brotli unterstützt oder dir erlaubt, die Brotli-Bibliothek zu installieren. Die meisten verwalteten WordPress Hosts unterstützen es noch nicht direkt, aber wenn du ein CDN wie Cloudflare oder KeyCDN verwendest, kannst du es einfach aktivieren.

Zusammenfassung

Ein gut optimiertes Web ist großartig für alle. Benutzer lieben schickere Webseiten, Betreiber von Webseiten lieben die reduzierten Hosting-Gebühren und Web-Hosts lieben die Optimierung, die auf ihren Servern erreicht wird. Komprimierungstechniken wie GZIP sind eine der besten Methoden, um die Ladezeiten der Seiten für deine Besucher zu beschleunigen.

Betreiber von WordPress-Seiten können ihre Webseiten sofort beschleunigen, indem sie die GZIP-Komprimierung aktivieren. Kinsta aktiviert es standardmäßig auf all seinen Servern, aber für andere deckt dieser Artikel mehrere Möglichkeiten ab, die GZIP-Kompression auf verschiedenen Webservern zu aktivieren.

Geschwindigkeit ist für jede Webseite entscheidend. Einfach komprimieren!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.