Web Caching Stratejileri: Browser, CDN ve Service Worker Cache

Web Caching Stratejileri: Browser, CDN ve Service Worker Cache

Caching, web performansının en güçlü optimizasyon tekniklerinden biridir. Doğru bir cache stratejisi, tekrarlayan ziyaretlerde sayfa yükleme süresini %80'e kadar azaltabilir, sunucu yükünü düşürür ve bant genişliği maliyetlerini minimize eder. Ancak yanlış bir cache konfigürasyonu, kullanıcıların eski içerik görmesine veya cache invalidation sorunlarına yol açar. Bu rehberde browser cache, CDN cache ve Service Worker cache katmanlarını detaylıca inceleyecek ve her senaryo için en uygun stratejiyi belirleyeceğiz.

Cache Katmanları

Web'de caching birden fazla katmanda gerçekleşir. Her katmanın kendine özgü avantajları ve kullanım alanları vardır:

• Memory Cache: Tarayıcı belleğinde, sayfa yaşam döngüsü boyunca. En hızlı erişim.
• Disk Cache (HTTP Cache): Tarayıcı diskinde, oturumlar arası kalıcı. Cache-Control header'ları ile yönetilir.
• Service Worker Cache: Programatik kontrol, offline destek. Cache API ile yönetilir.
• CDN Cache: Edge sunucularda, coğrafi yakınlık avantajı. Sunucu yükünü azaltır.
• Server Cache: Application-level cache (Redis, Memcached). Veritabanı sorgularını azaltır.

HTTP Cache-Control Header'ları

Cache-Control, browser ve CDN cache davranışını kontrol eden en önemli HTTP header'dır:

# Statik dosyalar: Uzun süreli cache + immutable
# CSS, JS, görseller (fingerprinted/hashed dosya adları ile)
Cache-Control: public, max-age=31536000, immutable

# HTML sayfalar: Kısa cache + revalidation
Cache-Control: public, max-age=0, must-revalidate
# veya
Cache-Control: public, max-age=300, stale-while-revalidate=86400

# API yanıtları: Kullanıcıya özel, cache'lenebilir
Cache-Control: private, max-age=60, stale-while-revalidate=300

# Hassas veriler: Asla cache'leme
Cache-Control: no-store, no-cache, must-revalidate, private

# CDN'de cache'le ama browser'da cache'leme
Cache-Control: public, s-maxage=3600, max-age=0

# Nginx konfigürasyonu
server {
    # Fingerprinted statik dosyalar
    location ~* \.(js|css|png|webp|avif|woff2)$ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # HTML dosyalar
    location ~* \.html$ {
        add_header Cache-Control "public, max-age=0, must-revalidate";
    }

    # API endpoint'leri
    location /api/ {
        add_header Cache-Control "private, max-age=60";
    }
}

Content Hashing ile Cache Busting

Dosya adına content hash ekleyerek, içerik değiştiğinde cache'in otomatik olarak invalidate olmasını sağlarsınız:

// webpack.config.js - Content hashing
module.exports = {
  output: {
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
    assetModuleFilename: 'assets/[name].[contenthash:8][ext]'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css'
    })
  ]
};

// Sonuç: main.a1b2c3d4.js, styles.e5f6g7h8.css
// İçerik değiştiğinde hash değişir → yeni URL → yeni cache
// İçerik değişmediyse hash aynı kalır → cache'ten sunulur

Service Worker Cache Stratejileri

Service Worker, cache üzerinde tam programatik kontrol sağlar. Workbox kütüphanesi ile yaygın stratejileri kolayca uygulayabilirsiniz:

// service-worker.js - Workbox ile cache stratejileri
import { registerRoute } from 'workbox-routing';
import {
  CacheFirst,
  NetworkFirst,
  StaleWhileRevalidate
} from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

// 1. Cache First: Statik dosyalar (font, görsel)
// Önce cache'e bak, yoksa ağdan al
registerRoute(
  ({ request }) =>
    request.destination === 'image' ||
    request.destination === 'font',
  new CacheFirst({
    cacheName: 'static-assets',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 365 * 24 * 60 * 60  // 1 yıl
      })
    ]
  })
);

// 2. Stale While Revalidate: CSS ve JS
// Cache'ten hemen sun, arka planda güncelle
registerRoute(
  ({ request }) =>
    request.destination === 'style' ||
    request.destination === 'script',
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxEntries: 50 })
    ]
  })
);

// 3. Network First: HTML sayfalar ve API
// Ağdan almayı dene, başarısızsa cache'ten sun
registerRoute(
  ({ request }) => request.destination === 'document',
  new NetworkFirst({
    cacheName: 'html-cache',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxEntries: 20 })
    ],
    networkTimeoutSeconds: 3
  })
);

// 4. API istekleri için Network First
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60  // 5 dakika
      })
    ]
  })
);

CDN Cache Konfigürasyonu

CDN'ler coğrafi olarak dağıtılmış edge sunucular ile içeriği kullanıcıya yakın noktadan sunar:

// Vercel edge config (vercel.json)
{
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/(.*).html",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        },
        {
          "key": "CDN-Cache-Control",
          "value": "public, s-maxage=3600, stale-while-revalidate=86400"
        }
      ]
    }
  ]
}

// Cloudflare Page Rules eşdeğeri
// CDN-Cache-Control: CDN seviyesinde ayrı cache süresi
// Surrogate-Control: Varnish/Fastly gibi reverse proxy'ler için

Cache Debugging

Chrome DevTools Network sekmesinde "Size" kolonunda cache durumunu görebilirsiniz: "memory cache", "disk cache" veya gerçek boyut. Ayrıca x-cache: HIT veya cf-cache-status: HIT gibi response header'ları CDN cache durumunu gösterir. Cache sorunlarını teşhis etmek için bu göstergeleri düzenli olarak kontrol edin.

Sonuç

Etkili bir caching stratejisi, web performansının temel taşıdır. Browser cache ile tekrarlayan ziyaretleri hızlandırın, CDN cache ile coğrafi gecikmeyi azaltın ve Service Worker cache ile offline deneyim sunun. Content hashing ile cache invalidation sorunlarını ortadan kaldırın. Her kaynak türü için doğru cache stratejisini belirlemek, hem performans hem de içerik güncelliği arasında optimal dengeyi sağlar.

Kaynaklar

• web.dev - HTTP Cache
• Workbox Documentation
• MDN - HTTP Caching
• Jake Archibald - Caching Best Practices