HTTP Önbellekleme ve CDN: Web Performansı İçin Önbellek Stratejileri

HTTP Önbellekleme Nedir?

HTTP önbellekleme, tarayıcı ve ara sunucular (proxy, CDN) tarafından kaynakların (HTML, CSS, JS, görseller) geçici olarak saklanmasıdır.

Önbellekleme, tekrarlanan isteklerde ağ trafiğini azaltır ve sayfa yükleme süresini hızlandırır. Doğru yapılandırılmış önbellek, sunucu yükünü %80'e kadar azaltabilir.

İki tür önbellek: Tarayıcı önbelleği (client-side) ve paylaşılan önbellek (CDN, proxy). Her ikisi de farklı amaçlar için kullanılır.

Cache-Control header'ı, önbellekleme davranışını kontrol eden temel mekanizmadır. max-age, s-maxage, no-cache, no-store gibi direktifler içerir.

Cache-Control Header'ları

max-age=3600: Kaynağın 3600 saniye (1 saat) boyunca fresh (taze) olduğunu belirtir. Bu süre boyunca tarayıcı ağ isteği yapmaz.

s-maxage=3600: Paylaşılan önbellekler (CDN) için max-age. Tarayıcı max-age'ı, CDN s-maxage'ı kullanır.

no-cache: Kaynak her kullanımda sunucudan doğrulanmalıdır. Cache'de saklanır ama kullanmadan önce revalidation yapılır.

no-store: Kaynak hiçbir önbellekte saklanmaz. Hassas veriler (kişisel bilgiler, bankacılık) için kullanılır.

public/private: public, herhangi bir önbellekte saklanabilir. private, sadece tarayıcı önbelleğinde saklanır (kullanıcıya özel içerik).

immutable: Kaynak asla değişmez (versioned assets). Tarayıcı revalidation yapmaz, performansı artırır.

ETag ve Last-Modified

ETag (Entity Tag): Kaynağın benzersiz bir tanımlayıcısıdır. Sunucu, kaynağın değişip değişmediğini kontrol etmek için kullanır.

Last-Modified: Kaynağın son değiştirilme tarihini belirtir. Tarayıcı, If-Modified-Since header'ı ile koşullu istek yapar.

Koşullu istek (Conditional Request): Tarayıcı, If-None-Match (ETag) veya If-Modified-Since (Last-Modified) header'ı ile istek yapar. Kaynak değişmemişse sunucu 304 Not Modified döner.

304 Not Modified: Kaynak değişmemişse sunucu sadece header'ları döner, body göndermez. Bu, bandwidth tasarrufu sağlar.

CDN (Content Delivery Network)

CDN, statik varlıkları (görseller, CSS, JS, fontlar) dünyanın farklı konumlarındaki sunuculardan sunan bir ağdır.

CDN, kullanıcıya en yakın sunucudan içerik sunar. Bu, latency (gecikme) süresini %50-80 oranında azaltır.

Popüler CDN'ler: Cloudflare, AWS CloudFront, Fastly, Akamai, Google Cloud CDN. Her birinin farklı fiyatlandırma ve özellikler vardır.

CDN yapılandırması: Origin sunucu (kaynak), edge sunucular (uç noktalar), cache TTL (yaşam süresi), purge (önbellek temizleme).

CDN ile dinamik içerik: Bazı CDN'ler (Cloudflare Workers, Fastly Compute) edge'de dinamik içerik oluşturabilir.

Önbellek Stratejileri

Cache First: Önce önbellekten sun, yoksa ağdan al. Statik varlıklar (CSS, JS, görseller) için ideal.

Network First: Önce ağdan al, başarısız olursa önbellekten sun. Dinamik içerik (API yanıtları) için ideal.

Stale While Revalidate: Önbellekten sun, arka planda ağdan güncelle. Kullanıcıya hızlı yanıt verirken içeriği güncel tutar.

Cache Only: Sadece önbellekten sun. Çevrimdışı uygulamalar için kullanılır.

Network Only: Sadece ağdan al. Gerçek zamanlı veriler (stok fiyatları, chat) için kullanılır.

Önbellek Geçersiz Kılma (Cache Busting)

Versioned filenames: style.css?v=1.2.3 veya style.abc123.css ile dosya adını değiştirin. Tarayıcı yeni dosyayı yükler.

Query string: style.css?v=20261025 ile cache busting. Bazı CDN'ler query string'i önbellek anahtarı olarak kullanmaz.

Content hash: Webpack/Vite, dosya içeriğine göre hash oluşturur (main.a1b2c3.js). İçerik değiştiğinde hash değişir.

Service Worker: self.skipWaiting() ve clients.claim() ile yeni Service Worker hemen aktif olur. Önbellek güncellenir.