CDN-Leistungsoptimierung: Der vollständige Leitfaden für eine schnellere globale Bereitstellung

Jede Verbesserung der Latenzzeit um 100 ms erhöht die Konversionsraten im E-Commerce um 1,1 %. Für ein Geschäft, das 1 Million US-Dollar pro Monat erwirtschaftet, bedeutet diese Verbesserung um 100 ms einen zusätzlichen Umsatz von 132.000 US-Dollar pro Jahr. CDN-Optimierung ist kein technisches „Nice-to-have“, sondern ein direkter Umsatzhebel.

Dieser Leitfaden behandelt die CDN-Architektur, Caching-Strategien, Edge Computing und Leistungsoptimierung für Webanwendungen, E-Commerce-Shops und ERP-Systeme.

Wichtige Erkenntnisse

– Allein die richtigen Cache-Header können die Belastung des Ursprungsservers um 60–80 % reduzieren. – Bildoptimierung durch CDN-Transformationen reduziert das Seitengewicht um 40–60 % ohne Codeänderungen – Edge Computing rückt die API-Logik näher an die Benutzer heran und reduziert die Latenz für zwischengespeicherte Antworten von 200 ms auf 20 ms – Multi-CDN-Strategien bieten Failover und geografische Optimierung für globale Zielgruppen

---

Grundlagen der CDN-Architektur

Wie CDNs funktionieren

Ein CDN ist ein weltweit verteiltes Netzwerk von Servern, die Inhalte von Standorten in der Nähe des Benutzers zwischenspeichern und bereitstellen.

User in Tokyo --> CDN Edge (Tokyo, 5ms) --> [Cache HIT] --> Response
User in London --> CDN Edge (London, 5ms) --> [Cache MISS] --> Origin (US-East, +120ms) --> Cache + Response
User in London --> CDN Edge (London, 5ms) --> [Cache HIT] --> Response (subsequent requests)

Was zwischengespeichert werden soll

---

Cache-Kontrollheader

Next.js-Cache-Konfiguration

// next.config.ts
const nextConfig = {
  async headers() {
    return [
      {
        source: '/_next/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=2592000',
          },
        ],
      },
    ];
  },
};

Nginx-Cache-Header

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
    add_header Vary "Accept-Encoding";
}

location ~* \.html$ {
    expires 5m;
    add_header Cache-Control "public, must-revalidate";
}

# API responses - let the application control caching
location /api/ {
    proxy_pass http://backend;
    proxy_cache_bypass $http_authorization;
}

---

Bildoptimierung

Bilder machen auf den meisten Websites 50–70 % des Seitengewichts aus. Die CDN-basierte Bildoptimierung macht eine Bildverarbeitung zur Erstellungszeit überflüssig.

Cloudflare-Bildtransformationen

<!-- Original: 2.4 MB JPEG -->
<!-- Optimized: 180 KB WebP, properly sized -->
<img
  src="/cdn-cgi/image/width=800,quality=80,format=auto/images/product-hero.jpg"
  alt="Product"
  width="800"
  height="600"
  loading="lazy"
/>

Next.js-Bildkomponente mit CDN

// next.config.ts
const nextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './lib/image-loader.ts',
  },
};

// lib/image-loader.ts
export default function cloudflareLoader({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality?: number;
}) {
  const params = [`width=${width}`, `quality=${quality || 80}`, 'format=auto'];
  return `/cdn-cgi/image/${params.join(',')}${src}`;
}

Auswirkungen der Bildoptimierung

---

Edge Computing

Cloudflare-Worker für API-Caching

// worker.js - Cache API responses at the edge
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);

  // Only cache GET requests to public API endpoints
  if (request.method !== 'GET' || !url.pathname.startsWith('/api/public/')) {
    return fetch(request);
  }

  const cache = caches.default;
  const cacheKey = new Request(url.toString(), request);

  // Check cache
  let response = await cache.match(cacheKey);
  if (response) {
    return response;
  }

  // Fetch from origin
  response = await fetch(request);

  // Clone and cache successful responses
  if (response.ok) {
    const cachedResponse = new Response(response.body, response);
    cachedResponse.headers.set('Cache-Control', 'public, max-age=300');
    cachedResponse.headers.set('X-Cache-Status', 'MISS');
    event.waitUntil(cache.put(cacheKey, cachedResponse.clone()));
    return cachedResponse;
  }

  return response;
}

Edge-Anwendungsfälle für E-Commerce

---

Vergleich der CDN-Anbieter

Empfehlung: Cloudflare für die meisten Unternehmen. Das kostenlose Kontingent ist großzügig, das Edge-Netzwerk ist das größte und Workers bieten leistungsstarkes Edge-Computing ohne zusätzliche Infrastruktur.

---

Multi-CDN-Strategien

Warum Multi-CDN

Kein einzelnes CDN bietet in jeder Region die beste Leistung. Eine Multi-CDN-Strategie leitet Benutzer zum leistungsstärksten CDN für ihren Standort weiter:

Implementierung

Verwenden Sie Routing auf DNS-Ebene, um Benutzer zum optimalen CDN zu leiten:

User request -> DNS (Cloudflare/Route53)
    |
    +--> US/EU traffic -> Cloudflare (best PoP coverage)
    |
    +--> APAC traffic -> AWS CloudFront (strong APAC presence)
    |
    +--> China traffic -> Alibaba CDN (required for China performance)

Für die meisten Unternehmen bietet ein einzelnes CDN (Cloudflare) mit einem auf DNS-Ebene konfigurierten Failover-CDN ausreichende Redundanz ohne die Komplexität eines vollständigen Multi-CDN-Routings.

---

Häufige CDN-Fallstricke

Fallstrick 1: Authentifizierte Inhalte zwischenspeichern

Speichern Sie niemals Antworten im Cache, die benutzerspezifische Daten enthalten. Eine zwischengespeicherte Antwort für Benutzer A, die an Benutzer B gesendet wird, stellt eine Sicherheitsverletzung dar. Verwenden Sie Cache-Control: private, no-store für alle authentifizierten API-Antworten.

Fallstrick 2: Cache-Busting für Bereitstellungen ignorieren

Wenn Sie neues JavaScript oder CSS bereitstellen, erhalten Benutzer möglicherweise zwischengespeicherte alte Versionen. Lösungen:

• Inhalts-Hashing: Fügen Sie einen Hash in den Dateinamen ein (app.a1b2c3d4.js). Next.js erledigt dies automatisch.
• Cache-Bereinigung bei Bereitstellung: Bereinigen Sie den CDN-Cache als Teil Ihrer Bereitstellungspipeline.
• Versionierte URLs: /v2/styles.css statt /styles.css.

Fallstrick 3: CDN-Fehlkonfiguration für dynamische Inhalte

Wenn Ihr CDN dynamische Inhalte zwischenspeichert, die nicht zwischengespeichert werden sollten (API-Antworten, HTML-Seiten mit Benutzerstatus), werden veraltete oder falsche Daten bereitgestellt. Überprüfen Sie Ihre CDN-Cache-Regeln regelmäßig und verwenden Sie Vary-Header, um Caching-Konflikte zu vermeiden.

---

Leistungsmessung

Kernziele von Web Vitals

Cache-Leistung überwachen

# Check CDN cache hit ratio
curl -sI https://example.com/page | grep -i "cf-cache-status\|x-cache\|age"

# Expected output for a cached response:
# cf-cache-status: HIT
# age: 3600

Verfolgen Sie die Cache-Trefferquote im Zeitverlauf. Ziel: über 85 % für statische Assets, über 50 % für dynamische Inhalte.

---

Häufig gestellte Fragen

Benötigen wir ein CDN, wenn sich unsere Benutzer in einem Land befinden?

Ja, aber die Vorteile verschieben sich. Anstelle einer Reduzierung der geografischen Latenz erhalten Sie: DDoS-Schutz, SSL-Beendigungs-Offload, Bildoptimierung und Reduzierung der Ursprungsserverlast. Selbst für Zielgruppen in einem einzigen Land senkt ein CDN die Serverkosten und verbessert die Zuverlässigkeit. Mit dem kostenlosen Kontingent von Cloudflare ist dies eine Verbesserung ohne Kosten.

Wie gehen wir mit der Cache-Ungültigmachung für dynamische Inhalte um?

Drei Strategien: (1) kurze TTLs (1–5 Minuten) für Inhalte, die sich häufig ändern, (2) Cache-Tags mit Purge-by-Tag für Inhaltsaktualisierungen, (3) Stale-While-Revalidate-Header, die zwischengespeicherte Inhalte bereitstellen und gleichzeitig neue Inhalte im Hintergrund abrufen. Verwenden Sie s-maxage für den CDN-Cache und max-age für den Browser-Cache unabhängig voneinander.

Sollten wir ein CDN für unser ERP-System verwenden?

CDN ist für statische ERP-Assets (JavaScript, CSS, Bilder) und öffentlich zugängliche Portale von Vorteil. Speichern Sie keine authentifizierten API-Antworten oder sitzungsabhängigen Inhalte im Cache. ECOSIRE konfiguriert CDN-Caching als Teil unserer Odoo-Implementierungsdienste, um optimales Caching ohne Sicherheitsrisiken zu gewährleisten.

Wie interagiert CDN mit serverseitigem Rendering?

Konfigurieren Sie für Next.js SSR-Seiten das CDN so, dass es basierend auf der vollständigen URL (einschließlich Abfrageparametern) mit kurzen TTLs (1–5 Minuten) zwischenspeichert. Verwenden Sie stale-while-revalidate, um leicht veraltete Inhalte bereitzustellen, während Next.js im Hintergrund neu generiert wird. ISR (Inkrementelle statische Regeneration) funktioniert auf natürliche Weise mit CDN-Caching.

---

Was als nächstes kommt

Die CDN-Optimierung lässt sich natürlich mit Lasttests kombinieren, um die Leistung unter Last zu validieren, und mit Überwachung, um Cache-Trefferquoten und Latenz zu verfolgen. Die vollständige Roadmap zur Infrastrukturoptimierung finden Sie in unserem DevOps-Leitfaden für kleine Unternehmen.

Kontaktieren Sie ECOSIRE für Beratung zur CDN-Einrichtung und Leistungsoptimierung.

---

Herausgegeben von ECOSIRE – hilft Unternehmen dabei, Inhalte weltweit schneller bereitzustellen.