Browser Cache Nasıl Yapılandırılır? Chrome/Firefox Adım Adım

Browser cache (tarayıcı önbelleği), aynı sayfayı tekrar açarken web sitenizin dosyalarını tekrar indirmek yerine daha hızlı yüklemesini sağlar. Ancak yanlış ayar; güncellemelerde eski içeriğin görünmesine (stale content), geliştirirken “neden değişmiyor?” hissine ve beklenmedik performans dalgalanmalarına yol açar. Bu rehberde, tarayıcı tarafında cache davranışını nasıl yapılandıracağını ve bunu HTTP düzeyindeki doğru başlıklarla (Cache-Control, ETag) nasıl dengeleyeceğini net şekilde öğreneceksin.

Cache türleri: Tarayıcı neyi saklar, neyi saklamaz?

Cache’i doğru kurmak için önce “hangi katmanda” saklama yapıldığını ayıralım.

1) HTTP cache

Tarayıcı; CSS, JavaScript, görsel, font ve bazı dokümanları HTTP yanıtlarından gelen kurallara göre önbelleğe alır. Burada belirleyici olan şey yanıt başlıklarıdır: - Cache-Control: Önbelleğin zamanını ve davranışını belirler (ör. max-age, no-cache, no-store). - ETag: Sunucu tarafında kaynak değişince değişen bir işaret (entity tag) üretir. Tarayıcı, yeniden istek yaptığında ETag ile “değişti mi?” kontrolü yapar. - Last-Modified: Bazı durumlarda ETag yerine veya yanında kullanılır. - Vary: İçerik varyasyonlarını (ör. dil) doğru cache etmeyi sağlar.

2) Service Worker cache (PWA)

PWA (Progressive Web App) kullanıyorsan service worker; dosyaları ve hatta API yanıtlarını “uygulama mantığıyla” cache’leyebilir. HTTP cache ile tamamen aynı mantık değildir.

3) DNS cache

Bu rehber “browser cache” odağı olduğu için DNS’i kısa tutalım: Alan adını çözümlerken (DNS resolve) yerel önbellek devreye girer. DNS cache hataları sayfa açılışını etkileyebilir ama içerik cache’inden farklıdır.

Dosyaları ayır: Statik kaynaklar ile dinamik içerik için hedef ayarlar

Yanlış cache ayarı genellikle “tüm dosyaları aynı politikayla ele almak” yüzünden olur. Net kural şudur: - Statik dosyalar (ör. app.9f3a2c.js, logo.2b1a.png) uzun süre cachelenir. - HTML gibi sık değişen sayfalar kısa süre cachelenir veya doğrulama (revalidation) ister.

Aşağıdaki tablo, pratik bir politika çerçevesi sunar:

Önemli nokta: Statik dosyalarda dosya adında sürüm (hash) kullanırsan immutable güvenle uygulanır. Böylece “dosya değişti ama URL aynıydı” problemini ortadan kaldırırsın.

Sunucu tarafı: Cache-Control ve ETag ile doğru davranışı garanti et

Tarayıcı ayarları tek başına yetmez. Çünkü tarayıcı, HTTP yanıtındaki kurallara uyar. Bu bölümde farklı senaryolar için net başlıklar veriyorum.

Hız odaklı statik kaynaklar

Nginx örneği (mantık): - assets/ altındaki statik dosyalara uzun cache - Dosya adları sürümlüyse immutable

Örnek header: - Cache-Control: public, max-age=31536000, immutable

Güncel kalması gereken HTML ve şablonlar

HTML için genelde şu politika uygulanır: - Tarayıcı her yeniden ziyaretinde doğrulama yapar. - Güncellenmişse yeni sürümü indirir.

Örnek header: - Cache-Control: no-cache, max-age=0 - (Yanıt gövdesine) ETag: "..."

No-store: Hassas ya da kritik içerikler

Kimlik bilgileri, kişisel veri, kısa süreli hata sayfaları gibi içeriklerde: - Cache-Control: no-store

Böylece tarayıcı, diskte/ram’de saklamaz.

Chrome’da browser cache davranışını yapılandırma (ve test)

Chrome’da “tek bir anahtar” yoktur; en doğru yaklaşım cache’i test edip ölçmektir. Aşağıdaki adımlar; geliştirici, QA ve performans çalışmaları için nettir.

1) Geliştirici araçlarında cache devre dışı bırakma

1. Chrome’da sayfayı aç.
2. F12 ile DevTools’u aç.
3. “Network” sekmesine gel.
4. Network panelinde “Disable cache” benzeri seçeneği aktif et.

Bu modda tarayıcı, resimleri ve scriptleri önbellekten getirmemeye çalışır; değişikliklerin anında göründüğünü doğrular.

2) Cache hit/miss’i Network panelinden oku

DevTools → Network → istek listesinde: - “From ServiceWorker” veya benzeri etiketler görünebilir (PWA varsa). - “(from disk cache)” gibi ibareler cache kullanımına işaret eder. - “Size” ve “Time” değerleri hız farkını gösterir.

3) Tarayıcı ayarlarında önbelleği temizleme (gerekli olduğunda)

Yeni header’ları test ederken eski önbellek karışabilir. Bu durumda: - Chrome ayarlarından “Browsing data temizle” ile cache’i temizle. - Ardından sayfayı hard refresh ile tekrar aç.

Not: Üretimde sürekli cache temizlemek yerine, doğru header’lar ve dosya sürümleme yaklaşımıyla kalıcılığı yönetmelisin.

Firefox’ta browser cache davranışını yapılandırma (ve test)

Firefox’ta da temel yöntem DevTools ile denetim ve önbelleği doğru şekilde gözlemektir.

1) Network üzerinden cache kontrolü

1. Sayfayı aç.
2. F12 ile Developer Tools’u aç.
3. “Network” sekmesine gir.
4. Cache kapatma/disable seçeneğini etkinleştir.

Bu, özellikle CSS/JS değişiklikleri test edilirken eski içerik görünmesini engeller.

2) Yeniden yükleme testini doğru yap

Firefox’ta hard reload (çoğu sürümde Ctrl+F5 benzeri) kullanarak: - HTML güncellemelerinin yeni geldiğini, - statik dosyaların doğru şekilde cachelendiğini, - ETag doğrulamasının (304 Not Modified) beklenen şekilde çalıştığını kontrol edebilirsin.

“Eski içerik” problemini çözmek için pratik kontrol listesi

Cache doğru kurulmazsa en sık görülen üç hata şunlardır: 1) Site güncellendikten sonra bazı kullanıcılar eski JS/CSS görür. 2) Geliştirici değişiklikleri yaptı ama tarayıcı “hiç değişmemiş gibi” davranır. 3) API yanıtları gereksiz cachelenir ve kullanıcı verisi beklenmedik şekilde güncellenmez.

Aşağıdaki liste bu sorunları hızlı izole eder:

• Statik dosya adlarında sürüm var mı? (hash veya build numarası)
• Statik kaynaklar için max-age uzun mu, immutable var mı?
• HTML için no-cache veya kısa TTL + ETag doğrulama var mı?
• Yanlışlıkla no-store statik varlıklara uygulanıyor mu?
• HTTP yanıtlarında ETag tutarlı mı? (sürekli değişiyorsa cache verimi düşer)
• Vary header doğru mu? (dil, cookie tabanlı varyasyonlar)
• PWA kullanıyorsan service worker cache güncelleniyor mu? (ör. new worker geldiğinde eski cache temizleniyor mu)

Hız ölçümü: Sadece “cache var” yetmez, doğru cache verimini hedefle

Cache’in işe yaradığını anlamanın yolu “tek seferlik test” değil, aynı sayfada tekrarlı ölçümdür. Net ölçüm yaklaşımı şöyledir:

1) İlk yükleme (first load) vs ikinci yükleme (repeat)

• İlk yüklemede beklenen: daha fazla veri indirme.
• İkinci yüklemede beklenen: statik kaynakların büyük kısmının cache hit alması.

DevTools’ta tekrar dene ve şunlara bak: - Statik JS/CSS için indirme boyutları düşüyor mu? - Zaman: “TTFB” (ilk byte) ve toplam süre belirgin iyileşiyor mu?

2) 304 döngüsü: Doğru doğrulama mı, sürekli indirme mi?

• HTML yeniden doğrulamada 304 Not Modified alıyorsan yaklaşım doğru çalışır.
• Sürekli 200 ile tam içerik iniyorsa Cache-Control/ETag ayarları yeniden gözden geçirilmelidir.

Sık yapılan hatalar ve net düzeltmeler

Hata 1: Tüm içeriklere aynı Cache-Control uygulamak

Düzeltme: - Statik dosyalara uzun cache + sürümleme, - HTML ve hassas içeriklere kısa/ doğrulamalı politika uygula.

Hata 2: Sürümleme yokken immutable kullanmak

Düzeltme: - Dosya adında hash yoksa immutable kaldır. - Ya da URL değişmeden içerik değişiyorsa en azından HTML/HTML benzeri için doğrulama kullan.

Hata 3: ETag sürekli değişiyor

Düzeltme: - ETag üretimini deterministik yap (yanıt body’e göre değilse bile tutarlı üret). - CDN katmanı varsa ETag/Cache başlıklarını birlikte uyumlu yönet.

Hata 4: PWA’da service worker güncellemesi atlanıyor

Düzeltme: - Yeni worker geldiğinde cache stratejin güncelleniyor olmalı. - Kullanıcıyı gereksiz yere eski sürüme kilitlememelisin.

Sonuç: Cache’i yapılandır ve kontrolünü ölçümle kalıcı hale getir

Browser cache’i doğru ayarlamak; hem kullanıcı hızını hem de güncelleme güvenliğini doğrudan etkiler. En sağlam yöntem: statik dosyalarda sürümleme + uzun max-age politikası, HTML’de no-cache/ETag ile doğrulama ve gerektiğinde tarayıcı DevTools ile cache hit/miss ölçümüdür. Eğer bugün bir sayfada “eski JS/CSS” görüyorsan önce statik dosya adlarında sürüm varlığını, ardından HTML yanıtındaki Cache-Control ve ETag tutarlılığını kontrol et; sonra Chrome/Firefox DevTools ile tekrarlı yükleme ölçümü yap. Böylece cache davranışını tahminle değil, gözlemle yönetmeye başlarsın.