Was Kompression macht

So funktioniert es

Der Browser sagt bei jeder Anfrage, welche Verfahren er versteht, zum Beispiel Accept-Encoding: br, zstd, gzip. Der Server sucht eines aus, komprimiert die Antwort damit und nennt es im Header Content-Encoding.

• gzip versteht jeder Browser.
• Brotli (br) macht Text meist noch etwas kleiner als gzip und wird von allen aktuellen Browsern unterstützt.
• Zstandard (zstd) ist das jüngste Verfahren und noch nicht überall angekommen.

Kompression lohnt sich für Text: HTML, CSS, JavaScript, JSON und SVG-Grafiken. Bilder in JPEG, PNG, WebP oder AVIF und Schriften im Format WOFF2 sind schon komprimiert; ein zweites Mal bringt nichts.

bytereport prüft zwei Dinge. Kommt das HTML unkomprimiert (und ist größer als 1 KB), ist das ein Fehler. Kommen CSS-, JavaScript- oder SVG-Dateien über 2 KB unkomprimiert, gibt es eine Warnung. Reines gzip ist in Ordnung; Brotli wäre etwas kleiner, ist aber kein Muss.

Worauf es ankommt

• Alle Text-Typen. Oft ist die Kompression nur für HTML eingeschaltet. Nimm text/css, application/javascript und image/svg+xml in die Liste auf.
• Auch Dateien von anderen Servern. Liegen CSS und JavaScript auf einem eigenen Server für statische Dateien oder einem CDN, muss die Kompression auch dort an sein.
• Brotli zusätzlich zu gzip. Der Server wählt dann je nach Browser. Dateien, die sich nicht ändern, lassen sich schon beim Bauen der Seite vorkomprimieren.
• Keine Bilder komprimieren. Das kostet nur Rechenzeit.

So richtest du es ein

Bei Shared Hosting schaltet der Hoster die Kompression ein, manchmal per .htaccess. CDNs komprimieren meist von selbst. Auf eigenen Servern stellst du sie im Webserver ein. In nginx ist HTML mit gzip on; immer dabei, Apache braucht mod_deflate:

gzip on;
gzip_types text/css application/javascript text/javascript image/svg+xml application/json;

AddOutputFilterByType DEFLATE text/html text/css application/javascript image/svg+xml

Für Brotli braucht nginx das zusätzliche Modul ngx_brotli, Apache mod_brotli mit dem Filter BROTLI_COMPRESS statt DEFLATE.

Prüfen kannst du es in den Entwicklertools deines Browsers: Im Tab „Netzwerk“ steht bei jeder Datei der Header Content-Encoding.