CDN Performans Optimizasyonu: Daha Hızlı Küresel Teslimat İçin Tam Kılavuz

Gecikme süresindeki her 100 ms'lik iyileşme, e-Ticaret dönüşüm oranlarını %1,1 artırır. Ayda 1 milyon dolar kazanan bir mağaza için bu 100 ms'lik iyileşme, yılda 132.000 dolar ek gelir anlamına gelir. CDN optimizasyonu teknik olarak sahip olunması güzel bir şey değildir; doğrudan bir gelir aracıdır.

Bu kılavuz, web uygulamaları, e-ticaret mağazaları ve ERP sistemleri için CDN mimarisini, önbelleğe alma stratejilerini, uç bilişimi ve performans ayarlamayı kapsar.

Önemli Çıkarımlar

• Uygun önbellek başlıkları tek başına kaynak sunucu yükünü %60-80 oranında azaltabilir
• CDN dönüşümleri aracılığıyla görüntü optimizasyonu, sıfır kod değişikliğiyle sayfa ağırlığını %40-60 oranında azaltır
• Edge bilişim, API mantığını kullanıcılara yaklaştırarak önbelleğe alınan yanıtlar için gecikmeyi 200 ms'den 20 ms'ye düşürür
• Çoklu CDN stratejileri, küresel hedef kitleler için yük devretme ve coğrafi optimizasyon sağlar

---

CDN Mimarisinin Temelleri

CDN'ler Nasıl Çalışır?

CDN, kullanıcıya en yakın konumlardaki içeriği önbelleğe alan ve sunan, küresel olarak dağıtılan bir sunucu ağıdır.

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)

Neler Önbelleğe Alınır?

---

Önbellek Kontrol Başlıkları

Next.js Önbellek Yapılandırması

// 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 Önbellek Başlıkları

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;
}

---

Görüntü Optimizasyonu

Görseller çoğu web sitesinde sayfa ağırlığının %50-70'ini oluşturur. CDN tabanlı görüntü optimizasyonu, oluşturma sırasında görüntü işleme ihtiyacını ortadan kaldırır.

Cloudflare Görüntü Dönüşümleri

<!-- 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"
/>

CDN'li Next.js Görüntü Bileşeni

// 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}`;
}

Görüntü Optimizasyon Etkisi

---

Uç Bilgi İşlem

API Önbelleğe Alma için Cloudflare Çalışanları

// 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;
}

E-Ticaret için Edge Kullanım Örnekleri

---

CDN Sağlayıcı Karşılaştırması

Öneri: Çoğu işletme için Cloudflare. Ücretsiz katman cömerttir, uç ağ en büyüğüdür ve Çalışanlar ek altyapı olmadan güçlü uç bilgi işlem sağlar.

---

Çoklu CDN Stratejileri

Neden Çoklu CDN

Hiçbir CDN her bölgede en iyi performansa sahip değildir. Çoklu CDN stratejisi, kullanıcıları konumlarına göre en iyi performans gösteren CDN'ye yönlendirir:

Uygulama

Kullanıcıları en uygun CDN'ye yönlendirmek için DNS düzeyinde yönlendirmeyi kullanın:

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)

Çoğu işletme için, DNS düzeyinde yapılandırılmış yük devretme CDN'sine sahip tek bir CDN (Cloudflare), tam çoklu CDN yönlendirmenin karmaşıklığı olmadan yeterli yedeklilik sağlar.

---

Yaygın CDN Tuzakları

Tuzak 1: Kimliği Doğrulanmış İçeriği Önbelleğe Alma

Kullanıcıya özel veriler içeren yanıtları asla önbelleğe almayın. A Kullanıcısının B Kullanıcısına sunduğu önbelleğe alınmış yanıt bir güvenlik ihlalidir. Kimliği doğrulanmış tüm API yanıtları için Cache-Control: private, no-store kullanın.

Tuzak 2: Dağıtımlar için Önbellek Bozmanın Göz ardı Edilmesi

Yeni JavaScript veya CSS dağıttığınızda kullanıcılar önbelleğe alınmış eski sürümleri alabilir. Çözümler:

• İçerik karması: Dosya adına bir karma ekleyin (app.a1b2c3d4.js). Next.js bunu otomatik olarak yapar.
• Dağıtım sırasında önbellek temizleme: Dağıtım hattınızın bir parçası olarak CDN önbelleğini temizleyin.
• Sürümlendirilmiş URL'ler: /styles.css yerine /v2/styles.css.

Tuzak 3: Dinamik İçerik için CDN'nin Yanlış Yapılandırması

CDN'niz önbelleğe alınmaması gereken dinamik içeriği (API yanıtları, kullanıcı durumu içeren HTML sayfaları) önbelleğe alıyorsa, eski veya yanlış veriler sunacaksınız. CDN önbellek kurallarınızı düzenli olarak denetleyin ve önbelleğe alma çakışmalarını önlemek için Vary üstbilgilerini kullanın.

---

Performans Ölçümü

Önemli Web Verileri Hedefleri

Önbellek Performansını İzleme

# 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

Zaman içindeki önbellek isabet oranını izleyin. Hedef: Statik varlıklar için %85'in üzerinde, dinamik içerik için %50'nin üzerinde.

---

Sıkça Sorulan Sorular

Kullanıcılarımız tek bir ülkedeyse CDN'ye ihtiyacımız var mı?

Evet ama faydalar değişiyor. Coğrafi gecikme süresinde azalma yerine şunları elde edersiniz: DDoS koruması, SSL sonlandırma yükünün aktarımı, görüntü optimizasyonu ve kaynak sunucu yükünün azaltılması. Tek ülke hedef kitleleri için bile CDN, sunucu maliyetlerini azaltır ve güvenilirliği artırır. Cloudflare ücretsiz katmanı bunu sıfır maliyetli bir iyileştirme haline getiriyor.

Dinamik içerik için önbelleğin geçersiz kılınmasını nasıl ele alırız?

Üç strateji: (1) sık sık değişen içerik için kısa TTL'ler (1-5 dakika), (2) içerik güncellemeleri için etiket bazında temizleme özelliğine sahip önbellek etiketleri, (3) arka planda yeni içerik getirirken önbelleğe alınmış içerik sunan eski, yeniden doğrulama başlıkları. Bağımsız olarak CDN önbelleği için s-maxage ve tarayıcı önbelleği için max-age kullanın.

ERP sistemimiz için CDN kullanmalı mıyız?

CDN, ERP statik varlıkları (JavaScript, CSS, resimler) ve halka açık portallar için faydalıdır. Kimliği doğrulanmış API yanıtlarını veya oturuma bağlı içeriği önbelleğe almayın. ECOSIRE, güvenlik riskleri olmadan en iyi önbelleğe almayı sağlamak için Odoo uygulama hizmetlerimizin bir parçası olarak CDN önbelleğe almayı yapılandırır.

CDN, sunucu tarafı oluşturmayla nasıl etkileşime giriyor?

Next.js SSR sayfaları için CDN'yi, kısa TTL'lerle (1-5 dakika) tam URL'yi (sorgu parametreleri dahil) temel alarak önbelleğe alacak şekilde yapılandırın. Next.js arka planda yenilenirken biraz eskimiş içerik sunmak için stale-while-revalidate kullanın. ISR (Artımlı Statik Yenileme), CDN önbelleğe almayla doğal olarak çalışır.

---

Sırada Ne Var?

CDN optimizasyonu, yük altında performansı doğrulamak için yük testi ve önbellek isabet oranlarını ve gecikmeyi izlemek için izleme ile doğal olarak eşleşir. Altyapı optimizasyonu yol haritasının tamamı için Küçük işletmeler için DevOps kılavuzumuza bakın.

CDN kurulumu ve performans optimizasyonu danışmanlığı için ECOSIRE ile iletişime geçin.

---

ECOSIRE tarafından yayınlandı - işletmelerin dünya çapında daha hızlı içerik sunmasına yardımcı oluyor.