Gzip-Komprimierung aktivieren - Webseiten schneller ausliefern | Blog

Gzip-Komprimierung reduziert die Größe von Textdateien drastisch und beschleunigt die Websiteauslieferung. Die Aktivierung ist einfach und bringt sofortige Vorteile.

Was ist Gzip-Komprimierung?

Gzip ist ein Komprimierungsalgorithmus für Textinhalte:

Ohne Komprimierung:
Browser ← 100 KB ─── Server

Mit Komprimierung:
Browser ← 25 KB (gzip) ─── Server
   └── Dekomprimierung (schnell)

Typische Einsparungen

| Dateityp | Ohne Gzip | Mit Gzip | Ersparnis | |----------|-----------|----------|-----------| | HTML | 100 KB | 15-25 KB | 75-85% | | CSS | 50 KB | 8-12 KB | 75-85% | | JavaScript | 200 KB | 40-60 KB | 70-80% | | JSON | 80 KB | 10-15 KB | 80-90% | | SVG | 30 KB | 5-10 KB | 70-85% |

Gzip vs. Brotli

| Eigenschaft | Gzip | Brotli | |-------------|------|--------| | Komprimierung | Gut | Besser (15-20% kleiner) | | Geschwindigkeit | Schnell | Langsamer | | Browser-Support | Alle | Modern (96%+) | | Overhead | Gering | Höher |

Empfehlung: Gzip als Basis, Brotli zusätzlich für moderne Browser.

Gzip mit Nginx aktivieren

Grundkonfiguration

# /etc/nginx/nginx.conf (im http-Block)

# Gzip aktivieren
gzip on;

# Komprimierungslevel (1-9, 6 ist guter Kompromiss)
gzip_comp_level 6;

# Mindestgröße für Komprimierung
gzip_min_length 256;

# Proxy-Antworten komprimieren
gzip_proxied any;

# Vary-Header für Caching
gzip_vary on;

# MIME-Types für Komprimierung
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/xml+rss
    application/vnd.ms-fontobject
    application/x-font-ttf
    font/opentype
    image/svg+xml;

Vollständige Nginx-Konfiguration

http {
    # Gzip-Einstellungen
    gzip on;
    gzip_comp_level 6;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_buffers 16 8k;

    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/json
        application/xml
        application/xml+rss
        image/svg+xml
        font/woff
        font/woff2;

    # Für vorher komprimierte Dateien
    gzip_static on;

    # Rest der Konfiguration...
}

Gzip_static für vorkomprimierte Dateien

# Dateien vorkomprimieren
gzip -k -9 style.css
# Erstellt style.css.gz

# Nginx sucht automatisch nach .gz-Version
# wenn gzip_static on

Nginx neu laden

nginx -t
systemctl reload nginx

Gzip mit Apache aktivieren

mod_deflate aktivieren

a2enmod deflate
a2enmod filter
a2enmod headers

VirtualHost-Konfiguration

# /etc/apache2/sites-available/example.com.conf

<VirtualHost *:80>
    ServerName example.com

    # Komprimierung aktivieren
    <IfModule mod_deflate.c>
        # Alles außer Bilder komprimieren
        SetOutputFilter DEFLATE

        # MIME-Types
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE text/xml
        AddOutputFilterByType DEFLATE text/javascript
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE application/json
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE image/svg+xml
        AddOutputFilterByType DEFLATE font/woff
        AddOutputFilterByType DEFLATE font/woff2
        AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
        AddOutputFilterByType DEFLATE application/x-font-ttf

        # Bereits komprimierte Dateien ausschließen
        SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|webp|ico|gz|zip|rar|7z|mp3|mp4|avi)$ no-gzip

        # Browser-Kompatibilität
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

        # Vary-Header
        Header append Vary Accept-Encoding
    </IfModule>
</VirtualHost>

Über .htaccess

# .htaccess

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE image/svg+xml

    # Ausnahmen
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
</IfModule>

Apache neu laden

apachectl configtest
systemctl reload apache2

Brotli zusätzlich aktivieren

Nginx mit Brotli

# Modul installieren (Ubuntu)
apt install libnginx-mod-http-brotli-filter libnginx-mod-http-brotli-static

# /etc/nginx/nginx.conf

# Brotli aktivieren
brotli on;
brotli_comp_level 6;
brotli_static on;

brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/javascript
    application/json
    application/xml
    image/svg+xml;

Apache mit Brotli

# Modul installieren
apt install libapache2-mod-brotli
a2enmod brotli

<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css
    AddOutputFilterByType BROTLI_COMPRESS text/javascript application/javascript
    AddOutputFilterByType BROTLI_COMPRESS application/json application/xml
    AddOutputFilterByType BROTLI_COMPRESS image/svg+xml

    BrotliCompressionQuality 6
</IfModule>

Komprimierung testen

Mit curl

# Ohne Komprimierung
curl -s -o /dev/null -w "Size: %{size_download}\n" https://example.com

# Mit Gzip
curl -s -o /dev/null -w "Size: %{size_download}\n" -H "Accept-Encoding: gzip" https://example.com

# Header prüfen
curl -I -H "Accept-Encoding: gzip" https://example.com | grep -i encoding
# Content-Encoding: gzip

Browser DevTools

1. DevTools öffnen (F12) 2. Network-Tab 3. Spalte "Content-Encoding" einblenden 4. Seite neu laden 5. "gzip" oder "br" (Brotli) sollte angezeigt werden

Online-Tools

GTmetrix: https://gtmetrix.com
Google PageSpeed Insights
WebPageTest

Was komprimieren?

Immer komprimieren

✓ HTML
✓ CSS
✓ JavaScript
✓ JSON
✓ XML
✓ SVG
✓ Textdateien
✓ Web-Fonts (woff, woff2 teilweise)

Nicht komprimieren

✗ JPEG, PNG, WebP (bereits komprimiert)
✗ GIF
✗ Videos (MP4, WebM)
✗ ZIP, RAR, GZ (bereits komprimiert)
✗ PDF (teilweise komprimiert)

Komprimierungslevel

Nginx gzip_comp_level

| Level | Komprimierung | CPU-Last | Empfehlung | |-------|---------------|----------|------------| | 1 | Minimal | Sehr gering | Nie | | 2-3 | Gering | Gering | Hochlast-Server | | 4-6 | Gut | Mittel | Standard | | 7-9 | Maximal | Hoch | Statische Vorkomprimierung |

Empfehlung: Level 6 ist ein guter Kompromiss.

Vorkomprimierung für statische Dateien

# Build-Skript für statische Assets
#!/bin/bash
find /var/www/html -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" \) | while read file; do
    gzip -k -f -9 "$file"
    brotli -k -f "$file"
done

Mit gzip_static on; liefert Nginx die .gz-Version aus.

Performance-Messung

Vorher/Nachher vergleichen

# Seitengröße ohne Komprimierung
curl -s -o /dev/null -w "%{size_download}" https://example.com

# Seitengröße mit Komprimierung
curl -s -o /dev/null -w "%{size_download}" -H "Accept-Encoding: gzip" https://example.com

# Ladezeit
curl -s -o /dev/null -w "Total: %{time_total}s\n" https://example.com

Typische Ergebnisse

Ohne Gzip:
- index.html: 45 KB
- styles.css: 120 KB
- app.js: 350 KB
- Total: 515 KB

Mit Gzip (Level 6):
- index.html: 12 KB (73% kleiner)
- styles.css: 22 KB (82% kleiner)
- app.js: 85 KB (76% kleiner)
- Total: 119 KB (77% kleiner)

Troubleshooting

Komprimierung funktioniert nicht

# Nginx: Modul geladen?
nginx -V 2>&1 | grep gzip

# Apache: Modul aktiv?
apachectl -M | grep deflate

# Header prüfen
curl -I -H "Accept-Encoding: gzip" https://example.com

Doppelte Komprimierung vermeiden

# Nginx: Bereits komprimierte Dateien ausschließen
location ~* \.(gz|zip|rar)$ {
    gzip off;
}

CDN-Kompatibilität

Bei CDN-Nutzung Vary: Accept-Encoding Header setzen:

gzip_vary on;

Header append Vary Accept-Encoding

Zusammenfassung

| Webserver | Modul | Aktivierung | |-----------|-------|-------------| | Nginx | gzip (integriert) | gzip on; | | Nginx | brotli | Zusatzmodul | | Apache | mod_deflate | a2enmod deflate | | Apache | mod_brotli | Zusatzmodul |

Fazit

Gzip-Komprimierung ist eine der einfachsten und effektivsten Optimierungen für Webseiten. Mit wenigen Zeilen Konfiguration sparen Sie 70-85% Bandbreite bei Textdateien. Setzen Sie Komprimierungslevel 6, aktivieren Sie den Vary-Header für CDN-Kompatibilität und nutzen Sie zusätzlich Brotli für moderne Browser. Die CPU-Last ist minimal, der Gewinn erheblich.