HTTP-Caching und CDN: Cache-Strategien für Web-Performance

Was ist HTTP-Caching?

HTTP-Caching ist die temporäre Speicherung von Ressourcen (HTML, CSS, JS, Bilder) durch Browser und Zwischenserver (Proxy, CDN).

Caching reduziert den Netzwerkverkehr bei wiederholten Anfragen und beschleunigt die Seitengeschwindigkeit. Ein richtig konfigurierter Cache kann die Serverlast um bis zu 80% reduzieren.

Zwei Arten von Cache: Browser-Cache (client-seitig) und Shared Cache (CDN, Proxy). Beide dienen unterschiedlichen Zwecken.

Der Cache-Control-Header ist der primäre Mechanismus zur Steuerung des Caching-Verhaltens. Enthält Direktiven wie max-age, s-maxage, no-cache, no-store.

Cache-Control-Header

max-age=3600: Gibt an, dass die Ressource 3600 Sekunden (1 Stunde) fresh ist. Während dieser Zeit macht der Browser keine Netzwerkanfrage.

s-maxage=3600: max-age für Shared Caches (CDN). Browser verwendet max-age, CDN verwendet s-maxage.

no-cache: Ressource muss bei jeder Verwendung mit dem Server validiert werden. Wird im Cache gespeichert, aber vor Verwendung revalidiert.

no-store: Ressource wird in keinem Cache gespeichert. Für sensible Daten (persönliche Informationen, Banking) verwendet.

public/private: public bedeutet, dass es in jedem Cache gespeichert werden kann. private bedeutet, dass es nur im Browser-Cache gespeichert wird (nutzerspezifischer Inhalt).

immutable: Ressource ändert sich nie (versionierte Assets). Browser führt keine Revalidierung durch, verbessert die Leistung.

ETag und Last-Modified

ETag (Entity Tag): Ein eindeutiger Bezeichner für die Ressource. Server verwendet ihn, um zu prüfen, ob sich die Ressource geändert hat.

Last-Modified: Gibt das letzte Änderungsdatum der Ressource an. Browser macht bedingte Anfrage mit If-Modified-Since Header.

Bedingte Anfrage (Conditional Request): Browser macht Anfrage mit If-None-Match (ETag) oder If-Modified-Since (Last-Modified) Header. Wenn sich die Ressource nicht geändert hat, gibt der Server 304 Not Modified zurück.

304 Not Modified: Wenn sich die Ressource nicht geändert hat, gibt der Server nur Header, nicht Body zurück. Dies spart Bandbreite.

CDN (Content Delivery Network)

CDN ist ein Netzwerk, das statische Assets (Bilder, CSS, JS, Schriftarten) von Servern an verschiedenen Standorten weltweit ausliefert.

CDN liefert Inhalt vom Server, der dem Nutzer am nächsten ist. Dies reduziert die Latenz um 50-80%.

Populäre CDNs: Cloudflare, AWS CloudFront, Fastly, Akamai, Google Cloud CDN. Jeder hat unterschiedliche Preisgestaltung und Funktionen.

CDN-Konfiguration: Origin-Server (Quelle), Edge-Server (Endpunkte), Cache TTL (Lebensdauer), Purge (Cache-Leerung).

Dynamischer Inhalt mit CDN: Einige CDNs (Cloudflare Workers, Fastly Compute) können dynamischen Inhalt am Edge generieren.

Caching-Strategien

Cache First: Zuerst aus dem Cache liefern, bei Fehlen aus dem Netzwerk holen. Ideal für statische Assets (CSS, JS, Bilder).

Network First: Zuerst aus dem Netzwerk holen, bei Fehler aus dem Cache. Ideal für dynamischen Inhalt (API-Antworten).

Stale While Revalidate: Aus dem Cache liefern, im Hintergrund aus dem Netzwerk aktualisieren. Bietet schnelle Antwort, während Inhalt aktuell gehalten wird.

Cache Only: Nur aus dem Cache liefern. Für Offline-Anwendungen verwendet.

Network Only: Nur aus dem Netzwerk holen. Für Echtzeitdaten (Aktienkurse, Chat) verwendet.

Cache Busting

Versionierte Dateinamen: Dateinamen mit style.css?v=1.2.3 oder style.abc123.css ändern. Browser lädt neue Datei.

Query String: Cache Busting mit style.css?v=20261025. Einige CDNs verwenden Query String nicht als Cache-Schlüssel.

Content Hash: Webpack/Vite erstellt Hash basierend auf Dateiinhalt (main.a1b2c3.js). Hash ändert sich, wenn sich Inhalt ändert.

Service Worker: Neuer Service Worker wird sofort mit self.skipWaiting() und clients.claim() aktiv. Cache wird aktualisiert.