CDN einrichten: Content Delivery Network für deine Website

1. Was ist ein CDN? Grundlagen und Funktionsweise

CDN steht für Content Delivery Network – ein verteiltes Netzwerk von Servern, die auf der ganzen Welt verteilt sind. Statt dass alle Besucher deine Inhalte vom Ursprungsserver (Origin Server) laden, liefert ein CDN deine Inhalte vom nächstgelegenen Server aus – das senkt die Latenz dramatisch und beschleunigt deine Website für Besucher weltweit.

Stelle dir vor: Dein Webserver steht in Frankfurt. Ein Besucher aus Australien würde normalerweise Daten über Tausende von Kilometern laden. Mit CDN lädt derselbe Besucher von einem lokalen Server in Australien oder der Nähe – die Daten kommen in Millisekunden statt Sekunden an.

Die wichtigsten Komponenten eines CDN

• Edge-Server (PoPs) – Points of Presence verteilt über die ganze Welt. Cloudflare hat über 300 PoPs, BunnyCDN über 200.
• Origin Server – Dein eigentlicher Webserver, von dem das CDN die Inhalte initial abholt
• Caching – Statische Inhalte (CSS, JS, Bilder) werden auf Edge-Servern zwischengespeichert
• Routing – Das CDN erkennt automatisch, wo der Besucher ist und leitet zur nächsten PoP weiter

2. Wie funktioniert ein CDN? Die technische Seite

Wenn ein Besucher deine Website aufruft, passiert folgendes:

1. Der Browser fragt bei der nächstgelegenen Edge-Server PoP an (automatisch über Geo-IP-Erkennung)
2. Falls der Inhalt im Cache ist und noch gültig (TTL nicht abgelaufen), wird er sofort geliefert
3. Falls nicht im Cache, lädt die Edge-PoP vom Origin-Server, speichert es zwischen und gibt es an den Besucher weiter
4. Zukünftige Anfragen vom selben oder anderen Besuchern in der Region bekommen den gecachten Inhalt

TTL, Cache-Control und Invalidation

Die TTL (Time to Live) bestimmt, wie lange ein Inhalt im CDN gültig bleibt. Ein CSS-Dateien könnte 30 Tage TTL haben, Blogbeiträge nur 1 Stunde. Du stellst das über HTTP-Header ein:

Cache-Control: public, max-age=2592000

Das bedeutet: Der Inhalt ist öffentlich cachbar und 30 Tage (2592000 Sekunden) gültig. Mit Cache-Busting (Versionierung von Dateien) erzwingst du sofort ein Update, auch wenn der Cache noch gültig ist – z.B. style.v2.css statt style.css.

3. Vorteile eines CDN: Warum du ein CDN brauchst

Ein CDN bringt viele Vorteile jenseits von purer Geschwindigkeit. Hier ein Überblick:

4. Die besten CDN-Anbieter im Vergleich 2026

Es gibt duzende CDN-Anbieter. Für kleine und mittlere Websites in Deutschland sind diese am relevantesten:

Welcher CDN-Anbieter passt zu dir?

• Anfänger/kleine Blogs: Cloudflare Free Tier. Einfach, kostenlos, super für Anfänger.
• Kleine Agenturen: BunnyCDN. Sehr günstig (0,01 USD/GB), gutes Cash-Back Programm, hervorragender Support.
• Enterprise: Fastly oder AWS CloudFront. Teuer, aber unbegrenzte Kontrolle und SLA-Garantien.
• WordPress: Cloudflare mit dem kostenlosen Cloudflare Plugin oder Bunny WordPress Plugin.

5. CDN einrichten: Schritt-für-Schritt Anleitung

Die Grundschritte sind bei fast allen CDN-Anbietern ähnlich. Hier ist der allgemeine Ablauf:

1. 1
   CDN-Anbieter wählen und Account erstellen Gehe zur Website deines gewählten CDN-Anbieters (Cloudflare, BunnyCDN, etc.) und registriere dich mit E-Mail und Passwort.
2. 2
   Zone/Website hinzufügen Gebe deine Domain ein (z.B. example.com). Der CDN-Anbieter prüft, ob du Eigentümer der Domain bist.
3. 3
   Nameserver ändern ODER CNAME-Record setzen Option A: Nameserver bei deinem Domain-Registrar auf die CDN-Nameserver ändern. Option B: CNAME-Record bei deinem Registrar auf die CDN-URL setzen (z.B. example.com.cdn.cloudflare.net). Option B ist weniger invasiv.
4. 4
   Origin Server konfigurieren Teile dem CDN mit, wo dein ursprünglicher Server ist (IP oder Hostname). Das CDN speichert Inhalte von dort ab.
5. 5
   SSL/TLS aktivieren Das CDN bietet meist kostenloses Let's Encrypt SSL. Aktiviere HTTPS everywhere und erzwinge HTTP→HTTPS Redirect.
6. 6
   Cache-Regeln konfigurieren Stelle TTL für verschiedene Inhalte ein: HTML=1h, CSS/JS=30d, Bilder=90d. Definiere, was nicht gecacht wird (API, Dynamic Pages).
7. 7
   Tests durchführen Nutze WebPageTest, GTmetrix oder Chrome DevTools, um zu überprüfen, dass der Traffic über das CDN läuft. Headers sollten zeigen, dass es aus Edge-Server kommt.

6. Cloudflare CDN einrichten (Kostenlose Variante)

Cloudflare ist die beste Wahl für Anfänger – kostenlos, einfach und sehr mächtig. Hier die genaue Anleitung:

Schritt 1: Cloudflare-Account erstellen

Gehe zu dash.cloudflare.com/sign-up und registriere dich mit deiner E-Mail. Wähle beim Plan-Selection den kostenlosen Plan.

Schritt 2: Domain hinzufügen

Im Cloudflare Dashboard: Add Site → Gebe deine Domain ein (z.B. example.com) → Cloudflare scannt automatisch deine bestehenden DNS-Einträge.

Schritt 3: Nameserver ändern

Cloudflare zeigt dir zwei Nameserver (z.B. iris.ns.cloudflare.com und nash.ns.cloudflare.com). Gehe zu deinem Domain-Registrar (z.B. Hetzner, IONOS, Strato) und ändere die Nameserver zu den Cloudflare-Nameservern. Das kann 5 Minuten bis 24 Stunden dauern.

Schritt 4: SSL aktivieren

Im Cloudflare Dashboard: SSL/TLS → Stelle Always use HTTPS auf ON. Wähle Flexible SSL (einfach), Full (wenn dein Server HTTPS hat) oder Strict (empfohlen).

Cloudflare Page Rule Beispiel:
Cache Level: Cache Everything
Browser Cache TTL: 30 Tage
Automatic HTTPS Rewrites: ON
Security Level: Medium

Schritt 5: Caching optimieren

Im Dashboard: Caching → Stelle Caching Level auf "Cache Everything" oder "Standard" (je nach deinen Anforderungen). Setze Browser Cache TTL auf 30 Tage für statische Assets.

7. CDN-Dateien richtig konfigurieren: Cache-Control Headers

Die beste CDN-Konfiguration nützt nichts, wenn deine Website keine korrekten Cache-Control-Header sendet. So stellst du sie richtig ein:

Apache: .htaccess Cache-Control

Erstelle oder bearbeite die Datei .htaccess im Root-Verzeichnis deiner Website:

  # HTML: 1 Stunde cachen
  
    Header set Cache-Control "public, max-age=3600"
  

  # CSS, JS: 30 Tage cachen
  
    Header set Cache-Control "public, max-age=2592000"
  

  # Bilder: 90 Tage cachen
  
    Header set Cache-Control "public, max-age=7776000"
  

  # API/Dynamic: Nicht cachen
  
    Header set Cache-Control "no-cache, no-store, must-revalidate"
  

Nginx: Cache-Control in nginx.conf

location ~* \.(css|js)$ {
  expires 30d;
  add_header Cache-Control "public, immutable";
}

location ~* \.(jpg|jpeg|png|gif|svg)$ {
  expires 90d;
  add_header Cache-Control "public, immutable";
}

location / {
  expires 1h;
  add_header Cache-Control "public, must-revalidate";
}

Cache-Busting mit Versionierung

Wenn du eine Datei aktualisierst, musst du den Browser-Cache invalidieren. Cache-Busting funktioniert so:

Du bindest die Datei mit Versionsnummer ein. Der CDN-Cache wird automatisch invalidiert, weil das eine neue URL ist.

Kompression: gzip und Brotli

Die meisten CDNs komprimieren Inhalte automatisch mit gzip. Brotli (moderner, bessere Kompression) musst du oft explizit aktivieren. Das spart 30-40% Bandwidth.

8. WordPress CDN Integration: Plugins und Setup

WordPress braucht spezielle Plugins, um das CDN richtig zu nutzen. Hier sind die besten:

WP Super Cache + CDN

WP Super Cache ist ein beliebtes Caching-Plugin. In den Einstellungen kannst du eine CDN URL setzen:

Plugin: WP Super Cache
Einstellung: CDN
CDN URL: https://cdn-example.com/ (oder deine Cloudflare URL)

WP Super Cache ersetzt dann alle statischen Assets (Bilder, CSS, JS) mit URLs vom CDN.

Cloudflare WordPress Plugin

Cloudflare bietet ein offizielles Plugin für WordPress. Install über Plugin → Plugins → Neu hinzufügen, suche nach "Cloudflare" und aktiviere. Das Plugin kümmert sich um Cache-Invalidation, Firewall-Regeln und mehr.

Autoptimize + externe CDN

Autoptimize ist ein sehr gutes Optimierungs-Plugin. In den Settings kannst du eine externe CDN-Basis URL eingeben. Autoptimize minified dann deine Assets und liefert sie vom CDN.

WordPress wp-config.php: CDN-URL definieren

Mit dieser Config ladet WordPress alle Inhalte vom CDN statt vom Origin.

9. CDN Performance messen: Tools und Kontrolle

Wie weißt du, ob dein CDN funktioniert? Mit diesen Tools kannst du die Performance überprüfen:

GTmetrix

GTmetrix.com zeigt Ladezeit, Page Speed Score und wo Zeit verbraucht wird. Über HTTP-Header erkennst du, ob Assets vom CDN kommen (im Response-Header sollte "CDN" oder "Server: CloudFlare" stehen).

WebPageTest

WebPageTest.org ist noch detaillierter. Du kannst aus verschiedenen Standorten testen und siehst exakt, wo jede Ressource herkommt.

Chrome DevTools

F12 → Network Tab zeigt dir für jede Ressource den HTTP-Header CF-Cache-Status (Cloudflare) oder X-Cache (BunnyCDN). Werte: HIT = aus Cache, MISS = neu vom Origin.

Cloudflare Analytics

Im Cloudflare Dashboard: Analytics zeigt Requests, Cache Hit Ratio, Bandwidth saved und DDoS-Attacken. Ein guter Cache Hit Ratio liegt über 80%.

10. Häufige CDN-Probleme und Lösungen

Problem 1: Stale Content (alte Inhalte im Cache)

Symptom: Du aktualisierst deine Website, aber Besucher sehen die alte Version.
Lösung: Cache Purge im CDN-Dashboard. Bei Cloudflare: Caching → Purge. Oder nutze Cache-Busting mit Datei-Versionierung.

Problem 2: Mixed Content (HTTP + HTTPS)

Symptom: Browser zeigt Warnung "Diese Seite enthält unsicheren Inhalt".
Lösung: Alle Inhalte via HTTPS liefern. Bei Cloudflare: SSL → Automatic HTTPS Rewrites aktivieren.

Problem 3: CORS-Fehler mit CDN

Symptom: JavaScript-Fehler "Cross-Origin Request Blocked".
Lösung: Im CDN oder auf dem Origin Server CORS-Header setzen:

Access-Control-Allow-Origin: *

Problem 4: SSL-Fehler zwischen CDN und Origin

Symptom: CDN kann nicht vom Origin laden; Fehler 525 oder 526.
Lösung: Stelle sicher, dass Origin HTTPS mit gültigem Zertifikat hat. Bei Cloudflare: SSL → Strict Mode aktivieren.

Problem 5: Cache Hit Ratio zu niedrig (<50%)

Symptom: Zu viele MISS-Hits, CDN spart kaum Bandwidth.
Lösung: Cache-Control-Header prüfen. HTML mit zu kurzer TTL? Erhöhe auf mindestens 1 Stunde. Cookie-Header? Die verhindern Caching – entfernen wenn möglich.

11. Fazit: CDN ist einfach und lohnt sich

Ein CDN ist eine der einfachsten und wirkungsvollsten Optimierungen für deine Website:

• Einfach einzurichten: Cloudflare in 15 Minuten, BunnyCDN in 30 Minuten
• Kostenlos oder sehr günstig: Cloudflare Free, BunnyCDN 0,01 USD/GB
• Massive Geschwindigkeitsgewinne: 30-50% schneller für internationale Besucher
• SEO-Vorteile: Bessere Core Web Vitals = höhere Rankings
• Kostenlos Sicherheit: DDoS-Schutz, WAF, SSL – alles inklusive

Besonders Anfänger sollten mit Cloudflare Free starten. Es gibt keinen Grund, nicht CDN zu nutzen – die Vorteile wiegen jeden Aufwand um ein Vielfaches auf.