Tarayıcı Önbellekleme (Cache) ve Görseller
Tarayıcı önbelleği (cache), daha önce indirilmiş kaynakların yerel olarak saklanması ve tekrar ziyarette sunucudan tekrar çekilmemesidir. Bu sayede sayfa yükleme süresi kısalır, bant genişliği tasarruf edilir ve SEO performansı iyileşir. Bu rehberde Cache-Control, ETag, CDN ve cache busting konularını görseller özelinde inceliyoruz.
Cache-Control Başlığı
Cache-Control HTTP başlığı, tarayıcıya kaynağın ne kadar süre önbellekte tutulacağını söyler. Görseller için yaygın örnek: Cache-Control: max-age=31536000, public (1 yıl). public CDN ve ara sunucuların da önbelleğe almasına izin verir. immutable eklenerek tarayıcının tekrar doğrulama (revalidation) yapması azaltılabilir. Statik görseller genellikle uzun süre (1 yıl) önbelleğe alınır; sık güncellenen içeriklerde daha kısa süre tercih edilir.
ETag ve Last-Modified
ETag, dosyanın benzersiz bir kimliğidir; içerik değiştiğinde değişir. Tarayıcı If-None-Match ile ETag gönderir; sunucu 304 Not Modified dönerse mevcut önbellek kullanılır. Last-Modified ise dosyanın son değişiklik tarihini içerir. Her iki mekanizma da gereksiz veri transferini azaltır. Görseller için ETag genellikle etkindir; CDN kullanıyorsanız ETag'lerin tutarlı şekilde üretildiğinden emin olun.
CDN ve Görsel Önbellekleme
CDN (Content Delivery Network), görselleri kullanıcıya coğrafi olarak yakın sunuculardan sunar. Cloudflare, imgix, Cloudinary gibi servisler otomatik önbellekleme, format dönüşümü (WebP, AVIF) ve boyutlandırma sunar. CDN kullanıyorsanız Cache-Control'ü CDN'ın önerdiği değerlere göre ayarlayın. Edge önbelleği sayesinde orijinal sunucu yükü azalır ve yanıt süreleri kısalır.
Cache Busting
Görsel güncellendiğinde tarayıcı eski sürümü önbellekten sunabilir. Cache busting ile URL değiştirilerek yeni istek zorlanır. Yaygın yöntemler: (1) Query string: gorsel.jpg?v=2, (2) Dosya adına hash: gorsel.abc123.jpg, (3) Build araçlarında content hash. Query string bazı ara sunucular tarafından yok sayılabildiği için dosya adındaki hash daha güvenilirdir. Web için görsel hazırlama sürecinde versiyonlama stratejinizi belirleyin.
.htaccess ve Sunucu Ayarları
Apache kullanan sunucularda .htaccess ile görsellere Cache-Control eklenebilir. Örnek: <IfModule mod_headers.c><FilesMatch "\.(jpg|jpeg|png|gif|webp|avif)$">Header set Cache-Control "max-age=31536000, public"</FilesMatch></IfModule>. Nginx'te expires 1y; ile benzer sonuç alınır. Görsel klasörünüze özel kurallar tanımlayarak diğer kaynaklardan farklı strateji uygulayabilirsiniz.
Görsellerinizi hemen optimize edin.
Sıkıştırma Aracına Git →