CDN: Content Delivery Networks verstehen

Ein CDN bringt Ihre Inhalte näher zum Nutzer. Lernen Sie, wie CDNs funktionieren und welche Vorteile sie bieten.

Wie funktioniert ein CDN?

Ohne CDN:
┌─────────────┐                    ┌─────────────┐
│ User (DE)   │─── 200ms ─────────>│ Server (US) │
└─────────────┘                    └─────────────┘

Mit CDN:
┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│ User (DE)   │─20ms─│ CDN Edge DE │      │ Server (US) │
└─────────────┘      └──────┬──────┘      └──────┬──────┘
                            │                     │
                            └─────── Cache ───────┘

Vorteile

Beliebte CDN-Anbieter

Cloudflare einrichten

1. Account erstellen auf cloudflare.com

2. Domain hinzufügen
   → DNS-Records werden automatisch erkannt

3. Nameserver ändern (bei Ihrem Registrar)
   ns1.cloudflare.com
   ns2.cloudflare.com

4. Einstellungen anpassen:
   - SSL/TLS: "Full (strict)"
   - Always Use HTTPS: An
   - Auto Minify: CSS, JavaScript, HTML
   - Brotli: An

Cache-Control Header

# Nginx - Statische Dateien cachen
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# Kein Cache für dynamische Inhalte
location ~ \.php$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

# Apache .htaccess
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
</IfModule>

Cache-Busting

# Problem: Browser cached alte Version

# Lösung 1: Query String (nicht ideal)
<link href="/style.css?v=1.2.3" rel="stylesheet">

# Lösung 2: Hash im Dateinamen (empfohlen)
<link href="/style.a1b2c3d4.css" rel="stylesheet">

# Webpack/Vite generieren automatisch:
output: {
    filename: '[name].[contenthash].js'
}

Purge/Invalidation

# Cloudflare API - Cache leeren
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}'

# Einzelne Dateien
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 '{"files":["https://example.com/style.css"]}'

CDN für WordPress

# 1. Plugin installieren: WP Super Cache oder W3 Total Cache

# 2. CDN-URL konfigurieren
# Original: https://example.com/wp-content/uploads/image.jpg
# CDN: https://cdn.example.com/wp-content/uploads/image.jpg

# 3. wp-config.php (optional)
define('WP_CONTENT_URL', 'https://cdn.example.com/wp-content');

Eigenes CDN mit Nginx

# Einfacher Caching-Proxy
upstream origin {
    server origin.example.com;
}

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=cdn:100m inactive=7d;

server {
    listen 80;
    server_name cdn.example.com;

    location / {
        proxy_pass http://origin;
        proxy_cache cdn;
        proxy_cache_valid 200 7d;
        proxy_cache_use_stale error timeout updating;
        add_header X-Cache-Status $upstream_cache_status;
    }
}

CDN Debug

# Cache-Status prüfen
curl -I https://example.com/image.jpg

# Cloudflare Header
cf-cache-status: HIT    # Aus Cache
cf-cache-status: MISS   # Vom Origin
cf-cache-status: BYPASS # Kein Cache

# Allgemein
X-Cache: HIT
Age: 3600  # Sekunden im Cache

Weitere Informationen

• ⚡ HTTP/2 und HTTP/3
• 🖼️ Bildoptimierung
• 📊 Enjyn Analytics