CDN-Integration und statische Dateioptimierung

Die Geschwindigkeit Ihrer Website ist entscheidend für Benutzererfahrung und SEO-Rankings. CDN (Content Delivery Network) und statische Dateioptimierung können Seitenladezeiten dramatisch reduzieren. Diese Anleitung behandelt CDN-Grundlagen, Cloudflare-Setup, Nginx-Cache-Konfiguration und Kompressionstechniken.

Was ist ein CDN?

Ein CDN (Content Delivery Network) ist eine Netzwerkinfrastruktur, die statische Inhalte (Bilder, CSS, JavaScript, Videos) auf Server weltweit verteilt und Benutzern vom nächstgelegenen Server bereitstellt.

Vorteile eines CDN:

Kann Seitenladezeiten um 50-80% reduzieren
Reduziert die Last auf dem Ursprungsserver
Bietet Schutz gegen DDoS-Angriffe
Bietet geringe Latenz für globale Benutzer
Senkt Bandbreitenkosten

Cloudflare kostenloses CDN-Setup

Cloudflare bietet CDN, DDoS-Schutz und SSL-Zertifikat im kostenlosen Plan.

1. Cloudflare-Konto erstellen

Gehen Sie zu cloudflare.com
Erstellen Sie ein kostenloses Konto
Klicken Sie auf "Add a Site"
Geben Sie Ihren Domainnamen ein
Wählen Sie den Free-Plan

2. DNS-Einträge übertragen

Cloudflare scannt Ihre vorhandenen DNS-Einträge automatisch:

A     @        203.0.113.50    Proxied (orange Wolke)
A     www      203.0.113.50    Proxied (orange Wolke)
CNAME api      api.example.com  DNS only (graue Wolke)

Die Option "Proxied" (orange Wolke) leitet Traffic durch Cloudflare und bietet CDN + DDoS-Schutz. "DNS only" (graue Wolke) führt nur DNS-Auflösung durch.

3. Nameserver-Änderung

Ändern Sie die Nameserver bei Ihrem Domain-Registrar auf die von Cloudflare bereitgestellten Werte:

ns1.cloudflare.com
ns2.cloudflare.com

4. Cloudflare-Einstellungen

SSL/TLS: Full (strict) Modus wählen

Caching:

Browser Cache TTL: 4 Stunden
Cache Level: Standard

Speed:

Auto Minify: JavaScript, CSS, HTML aktivieren
Brotli: Aktivieren

Nginx Cache-Header-Konfiguration

hljs nginx

server {
    listen 80;
    server_name example.com;
    root /var/www/mysite;

    # HTML-Dateien - kein Caching
    location ~* \.html$ {
        add_header Cache-Control "no-cache, must-revalidate";
    }

    # CSS und JavaScript - langer Cache für versionierte Dateien
    location ~* \.(css|js)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Bilder
    location ~* \.(jpg|jpeg|png|gif|ico|webp|avif|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Vary "Accept-Encoding";
    }

    # Schriftdateien
    location ~* \.(woff|woff2|ttf|eot|otf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";
    }

    # API-Endpunkte - kein Caching
    location /api/ {
        add_header Cache-Control "no-store, no-cache";
        proxy_pass http://localhost:3000;
    }
}

Gzip-Komprimierung

Gzip komprimiert textbasierte Dateien (HTML, CSS, JS) und reduziert die Übertragungsgröße um 60-80%.

hljs nginx

http {
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_min_length 256;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml
        image/svg+xml
        font/truetype
        font/opentype;
}

Brotli-Komprimierung

Brotli bietet 15-25% bessere Komprimierung als gzip und wird von modernen Browsern unterstützt.

hljs bash

# Brotli-Modul installieren
sudo apt install libnginx-mod-brotli -y

hljs nginx

http {
    brotli on;
    brotli_comp_level 6;
    brotli_static on;
    brotli_types
        text/plain
        text/css
        application/json
        application/javascript
        image/svg+xml;
}

hljs bash

sudo nginx -t && sudo systemctl reload nginx

# Komprimierung testen
curl -H "Accept-Encoding: br" -I https://example.com
# Sollte zeigen: Content-Encoding: br

Bildoptimierung

WebP-Konvertierung

WebP-Format bietet 25-35% kleinere Dateigrößen im Vergleich zu JPEG und PNG.

hljs bash

# cwebp-Tool installieren
sudo apt install webp -y

# Einzelne Datei konvertieren
cwebp -q 80 image.jpg -o image.webp

# Stapelkonvertierung
for f in /var/www/mysite/images/*.jpg; do
    cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

WebP in Nginx bereitstellen

hljs nginx

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

server {
    location ~* \.(jpg|jpeg|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

Cache-Control-Header-Strategie

Inhaltstyp	Cache-Control	Beschreibung
HTML	no-cache	Immer aktuell
CSS/JS (gehasht)	public, immutable, max-age=31536000	1 Jahr
Bilder	public, max-age=31536000	1 Jahr
API-Antworten	no-store	Nie cachen

Verwenden Sie Chrome DevTools > Network-Tab zum Testen von Cache-Headern. Prüfen Sie Cache-Control, ETag und Age-Werte in den Response-Headern.

Fazit

CDN-Integration und statische Dateioptimierung verbessern die Performance Ihrer Website erheblich. Die Kombination aus Cloudflare Free CDN für globale Verteilung, Nginx-Cache-Headern für Browser-Caching, gzip/brotli für Komprimierung und WebP für Bildoptimierung kann Seitenladezeiten dramatisch reduzieren.

CDN-Integration und statische Dateioptimierung

Inhaltsverzeichnis