CDN ile Statik İçerik Optimizasyonu

CDN ile Statik İçerik Optimizasyonu

Statik içerik (JavaScript, CSS, görseller, fontlar, video) tipik bir web sayfasının ağırlığının büyük kısmını oluşturur. Bu içeriği her seferinde origin sunucudan sunmak, hem gecikmeyi artırır hem de sunucu yükünü gereksiz yere şişirir. CDN (Content Delivery Network), bu içeriği kullanıcıya en yakın edge sunucudan sunarak sorunu çözer. Ancak CDN, doğru yapılandırılmadığında faydadan çok zarar getirebilir.

1. CDN Nasıl Çalışır?

CDN, dünya genelinde dağıtılmış POP (Point of Presence) noktalarından oluşur. Bir kullanıcı statik içerik talep ettiğinde, istek en yakın POP'a yönlendirilir. İçerik o POP'ta önbellekte varsa (cache hit), doğrudan oradan sunulur; yoksa (cache miss), origin sunucudan çekilir, önbelleğe alınır ve kullanıcıya iletilir.

Sağladığı Faydalar:

Düşük Gecikme: İçerik kullanıcıya coğrafi olarak yakın olduğu için yanıt süresi kısalır.
Origin Yükünün Azalması: Tekrarlanan istekler edge'den karşılanır; origin sunucu rahatlar.
Bant Genişliği Tasarrufu: Origin'e giden trafik azalır.
Ölçeklenebilirlik: Ani trafik artışları (kampanya, viral içerik) edge ağı tarafından karşılanır.

2. Doğru Önbellekleme Başlıkları: CDN'in Temeli

CDN'in etkinliği, origin'in gönderdiği önbellekleme başlıklarına bağlıdır. Yanlış başlıklar, ya gereksiz cache miss'lere ya da güncel olmayan içerik sunulmasına yol açar.

Temel Başlıklar:

Başlık	Anlamı	Öneri
`Cache-Control: public, max-age=31536000, immutable`	İçerik 1 yıl boyunca önbelleklenebilir ve asla değişmez	Sürümlenmiş (hash'li) dosyalar için
`Cache-Control: no-cache`	Önbelleğe alınabilir, ancak her kullanımda doğrulanmalı	Sık değişen ama doğrulanabilir içerik
`Cache-Control: no-store`	Asla önbelleğe alınmamalı	Hassas/kullanıcıya özel veriler
`ETag`	İçeriğin sürüm kimliği	Koşullu isteklerde (304 Not Modified) kullanılır

Altın Kural: Statik ve sürümlenmiş varlıklar (ör. app.a1b2c3.js) uzun TTL ile önbelleklenmeli; HTML gibi sık değişen içerikler ise kısa TTL veya no-cache ile yönetilmelidir.

3. Cache Busting: Güncellemeleri Anında Yayınlama

Uzun TTL kullanmanın riski, dosya güncellendiğinde kullanıcıların eski sürümü görmeye devam etmesidir. Cache busting, dosya adına içerik hash'i ekleyerek bu sorunu çözer:

text

Önce:  /static/app.js
Sonra: /static/app.a1b2c3d4.js

Dosya içeriği değiştiğinde hash de değişir; yeni URL, CDN'de cache miss yaratır ve taze içerik çekilir. Eski URL ise önbellekte kalır ama artık kimse onu talep etmez.

Otomatikleştirme: Modern build araçları (Webpack, Vite, esbuild) dosya adlarına hash eklemeyi otomatik yapar. .NET'te asp-append-version="true" özniteliği, statik dosyalara otomatik sürüm parametresi ekler.

4. Sıkıştırma: Bant Genişliğini Küçültme

Metin tabanlı varlıklar (JS, CSS, HTML, SVG, JSON) sıkıştırıldığında boyutları %60-80 oranında azalabilir.

Algoritma	Sıkıştırma Oranı	Hız	Öneri
Gzip	İyi	Hızlı	Geniş destek; fallback olarak kullanın
Brotli	Daha iyi (%15-25 daha küçük)	Biraz daha yavaş	Modern tarayıcılar için tercih edin

CDN'de Sıkıştırma: Çoğu CDN, Accept-Encoding başlığına göre otomatik olarak Brotli veya Gzip sıkıştırma uygular. Origin'de sıkıştırma yapmak yerine CDN'e bırakmak, origin CPU yükünü azaltır.

5. Görsel Optimizasyonu

Görseller, tipik bir sayfanın en ağır bileşenidir. CDN, görsel optimizasyonunda da kritik rol oynar:

Modern Formatlar: WebP ve AVIF, JPEG/PNG'ye göre %25-50 daha küçüktür. CDN, Accept başlığına göre otomatik format dönüşümü yapabilir (ör. Cloudflare Polish, Azure Front Door'da görsel optimizasyonu).
Boyutlandırma: Kullanıcının cihazına ve ekran boyutuna göre uygun boyutta görsel sunmak (responsive images). CDN, URL parametreleriyle dinamik boyutlandırma yapabilir (/image.jpg?w=800).
Lazy Loading: Görünür alan dışındaki görsellerin yüklenmesini erteleme (loading="lazy").

6. Önbellek Temizleme (Purge) Stratejisi

Acil bir güncelleme gerektiğinde (ör. güvenlik açığı yaması, yanlış içerik), TTL'in dolmasını beklemek kabul edilemez. CDN'ler purge API'si sunar:

URL bazlı purge: Belirli bir dosyayı temizler (/static/app.js).
Tag/prefix bazlı purge: Belirli bir grubu temizler (/static/*).
Full purge: Tüm önbelleği temizler (dikkatli kullanın; origin'e ani yük bindirir).

En İyi Pratik: Purge'u bir otomasyon haline getirin; CI/CD pipeline'ında deploy sonrası ilgili varlıkları otomatik temizleyin.

7. En İyi Pratikler

Pratik	Açıklama
Sürümlenmiş varlıklara uzun TTL verin	`immutable` + 1 yıl; cache busting ile güncelleyin
HTML'i kısa TTL ile yönetin	Sık değişir; `no-cache` veya 5 dakika
Brotli sıkıştırma kullanın	Gzip'e göre %15-25 daha küçük
Modern görsel formatları sunun	WebP/AVIF + responsive boyutlandırma
Purge'u otomatikleştirin	Deploy sonrası ilgili varlıkları temizleyin
`Vary` başlığını doğru kullanın	`Vary: Accept-Encoding` ile sıkıştırma varyantlarını ayırın
CDN'i izleyin	Hit/miss oranı, origin trafiği ve gecikme metriklerini takip edin

Sonuç

CDN, statik içerik optimizasyonunun temel taşıdır; ancak tek başına bir "sihirli değnek" değildir. Doğru önbellekleme başlıkları, cache busting ile güncelleme yönetimi, sıkıştırma, görsel optimizasyonu ve otomatik purge stratejileriyle birlikte kullanıldığında gerçek faydayı sağlar. Unutmayın: CDN, doğru yapılandırılmış bir önbellekleme stratejisinin hızlandırıcısıdır; yanlış yapılandırıldığında ise güncel olmayan içerik ve güvenlik riski kaynağıdır.