Ein Content Delivery Network (CDN) verteilt Ihre Inhalte auf Server weltweit. Besucher erhalten Daten vom nächstgelegenen Server – das beschleunigt die Ladezeit erheblich.

Was ist ein CDN?

Ohne CDN:
Besucher (USA) ─────────────────────> Origin-Server (Deutschland)
                   200ms Latenz

Mit CDN:
Besucher (USA) ───> Edge-Server (USA) ───> Origin-Server (nur bei Cache-Miss)
                   20ms Latenz

Das Prinzip

1. Sie laden Ihre Website auf Ihren Server (Origin) 2. Das CDN kopiert Inhalte auf weltweit verteilte Edge-Server 3. Besucher erhalten Daten vom nächsten Edge-Server 4. Bei Cache-Miss wird vom Origin-Server nachgeladen

Vorteile eines CDN

Schnellere Ladezeiten

Latenz ohne CDN:
- Europa nach USA: 80-150ms
- Europa nach Asien: 200-300ms
- Europa nach Australien: 250-350ms

Mit CDN:
- Immer zum nächsten Edge: 10-50ms

Weniger Server-Last

Ohne CDN:
Origin-Server: 100% aller Anfragen

Mit CDN:
Origin-Server: ~10% (nur Cache-Misses und dynamischer Content)
Edge-Server: ~90% (statische Inhalte)

DDoS-Schutz

  • Anycast-Routing verteilt Angriffe
  • Große Bandbreite absorbiert Traffic
  • Intelligente Filterung

Höhere Verfügbarkeit

  • Edge-Server übernehmen bei Origin-Ausfall
  • Redundante Infrastruktur

Was kann ein CDN cachen?

Gut cachebar

✓ Bilder (JPEG, PNG, WebP, GIF)
✓ CSS-Dateien
✓ JavaScript-Dateien
✓ Fonts (WOFF, WOFF2)
✓ Videos (MP4, WebM)
✓ PDFs und Downloads
✓ Statisches HTML

Nicht/schwer cachebar

✗ Dynamischer Inhalt (API-Antworten mit Nutzerdaten)
✗ Personalisierte Seiten
✗ Echtzeit-Daten
✗ POST-Requests
✗ Authentifizierte Bereiche

Funktionsweise im Detail

Cache-Hit

1. Besucher fragt example.com/image.jpg
2. DNS zeigt auf CDN-Edge
3. Edge-Server hat Datei im Cache
4. Auslieferung direkt vom Edge (schnell!)

Cache-Miss

1. Besucher fragt example.com/new-image.jpg
2. DNS zeigt auf CDN-Edge
3. Edge-Server hat Datei NICHT im Cache
4. Edge lädt von Origin-Server
5. Edge speichert für zukünftige Anfragen
6. Auslieferung an Besucher

TTL (Time-to-Live)

Cache-Control: max-age=86400 (1 Tag)

Edge-Server cached Datei für 1 Tag
Nach Ablauf: Neue Version vom Origin holen

CDN einrichten

Option 1: DNS-Änderung (CNAME)

Vorher:
static.example.com → A → 123.45.67.89 (Ihr Server)

Nachher:
static.example.com → CNAME → xxx.cdnprovider.net

Option 2: Proxy-Modus (z.B. Cloudflare)

Vorher:
example.com → A → 123.45.67.89 (Ihr Server)

Nachher:
example.com → A → CDN-IP (Cloudflare)
CDN leitet zu Ihrem Server weiter

Option 3: Separate CDN-Domain

Website: example.com (Ihr Server)
Statische Inhalte: cdn.example.com (CDN)

<img src="https://cdn.example.com/images/logo.png">

Cache-Control Header

Origin-Server Konfiguration

# Nginx
location ~* \.(jpg|jpeg|png|gif|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
}

CDN-spezifische Header

Cache-Control: public, max-age=86400, s-maxage=604800
                │      │              │
                │      │              └─ CDN cacht 7 Tage
                │      └─ Browser cacht 1 Tag
                └─ Darf überall gecacht werden

Beliebte CDN-Anbieter

Cloudflare

Preis: Kostenlos (Basis) / ab 20$/Monat (Pro)
Besonderheiten:
- DNS-Proxy
- DDoS-Schutz inkl.
- WAF inkl.
- SSL inkl.
- Sehr einfache Einrichtung

Bunny CDN

Preis: Ab 0,01$/GB (sehr günstig)
Besonderheiten:
- Pay-as-you-go
- Europäischer Anbieter
- Gute Performance
- Bunny Optimizer

AWS CloudFront

Preis: Ab 0,085$/GB
Besonderheiten:
- AWS-Integration
- Lambda@Edge
- Sehr viele PoPs
- Komplexere Einrichtung

KeyCDN

Preis: Ab 0,04$/GB
Besonderheiten:
- Pay-as-you-go
- Schweizer Anbieter
- Einfache Oberfläche
- WordPress-Plugin

Vergleich

| CDN | Kostenlos | Preis/GB | PoPs | Setup | |-----|-----------|----------|------|-------| | Cloudflare | Ja | - | 275+ | Sehr einfach | | Bunny CDN | Nein | 0,01$ | 100+ | Einfach | | CloudFront | Nein | 0,085$ | 400+ | Komplex | | KeyCDN | Nein | 0,04$ | 50+ | Einfach |

Cloudflare einrichten

Schritt 1: Account erstellen

Bei cloudflare.com registrieren.

Schritt 2: Domain hinzufügen

1. "Add Site" klicken
2. Domain eingeben
3. Cloudflare scannt DNS-Einträge
4. Plan auswählen (Free reicht oft)

Schritt 3: Nameserver ändern

Bei Ihrem Domain-Registrar:
Nameserver 1: xxx.ns.cloudflare.com
Nameserver 2: yyy.ns.cloudflare.com

Schritt 4: Konfigurieren

Wichtige Einstellungen:
- SSL/TLS: Full (strict)
- Always HTTPS: On
- Auto Minify: JS, CSS, HTML
- Brotli: On
- Caching Level: Standard

Cache-Invalidierung

Manuell (Cloudflare)

Dashboard → Caching → Purge Cache → Purge Everything
Oder einzelne URLs purgen

API (Cloudflare)

curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/purge_cache" \
     -H "Authorization: Bearer API_TOKEN" \
     -H "Content-Type: application/json" \
     --data '{"purge_everything":true}'

Cache-Busting mit Versioning

<!-- Dateiname ändert sich bei Updates -->
<link rel="stylesheet" href="/css/style.v1234.css">

CDN-Performance messen

Tools

- GTmetrix.com
- WebPageTest.org
- Pingdom
- Google PageSpeed Insights

Was messen?

TTFB (Time to First Byte): < 200ms mit CDN
LCP (Largest Contentful Paint): < 2.5s
FID (First Input Delay): < 100ms
CLS (Cumulative Layout Shift): < 0.1

Wann kein CDN?

Nicht sinnvoll bei

  • Rein lokale Besucher (z.B. lokales Business)
  • Minimaler Traffic
  • Nur dynamische Inhalte
  • Hohe Anforderungen an Datenschutz (Drittanbieter)

Alternative: Eigener Caching-Proxy

# Nginx als Caching-Proxy
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m;

location / {
    proxy_cache my_cache;
    proxy_pass http://backend;
}

Troubleshooting

Cache wird nicht genutzt

# Header prüfen
curl -I https://example.com/style.css

# Cloudflare-Header prüfen
CF-Cache-Status: HIT (gut)
CF-Cache-Status: MISS (Cache-Miss)
CF-Cache-Status: BYPASS (nicht cachebar)

Alte Inhalte werden ausgeliefert

1. Cache purgen 2. Cache-Busting mit Versioning 3. TTL reduzieren

Origin nicht erreichbar

CF-Error: 521 = Webserver down
CF-Error: 522 = Connection timed out
CF-Error: 523 = Origin unreachable
CF-Error: 524 = Timeout

Fazit

Ein CDN ist für internationale Websites fast unverzichtbar. Cloudflare bietet einen kostenlosen Einstieg mit vielen Features. Für Traffic-intensive Projekte sind Pay-as-you-go Anbieter wie Bunny CDN sehr kosteneffizient. Die Einrichtung ist meist einfach, und die Performance-Gewinne sind sofort messbar.