İletişim

Tarayıcı Önbelleği Nedir?

Kısa tanım

Tarayıcı önbelleği, web tarayıcısının daha önce indirdiği HTTP yanıtlarını (CSS, JavaScript, görsel, font ve bazen HTML) kullanıcının cihazında saklayıp sonraki isteklerde yeniden kullandığı özel (private) HTTP önbelleğidir. Bir yanıtın ne kadar süre taze sayılacağını ve ne zaman sunucuya doğrulatılacağını Cache-Control, ETag ve Last-Modified gibi başlıklar belirler. Doğru yapılandırıldığında tekrar ziyaretlerde ağ trafiğini ve yükleme süresini belirgin biçimde azaltır.

Diğer adları: Browser Cache, HTTP önbelleği, tarayıcı cache, memory cache, disk cache

İlk istekte sunucudan gelen dosyanın tarayıcı önbelleğine kaydedildiği, ikinci istekte ağa çıkmadan önbellekten sunulduğu akış

Taze, bayat ve doğrulanmış yanıtlar

Tarayıcı bir dosyayı indirdiğinde yanıt başlıklarına bakarak onu saklayıp saklamayacağına ve ne kadar süre güveneceğine karar verir. Bundan sonra aynı URL istendiğinde üç durumdan biri yaşanır:

  1. Taze kopya: max-age süresi dolmamışsa dosya ağa hiç çıkmadan önbellekten kullanılır. En hızlı senaryo budur.
  2. Bayat kopya, değişmemiş içerik: Süre dolmuşsa tarayıcı koşullu bir istek gönderir (If-None-Match ile ETag değeri veya If-Modified-Since ile tarih). İçerik aynıysa sunucu gövdesiz bir 304 Not Modified döner ve kopya yeniden taze sayılır.
  3. Bayat kopya, değişmiş içerik: Sunucu yeni dosyayı 200 ile gönderir ve önbellekteki kopya güncellenir.

Hiç Cache-Control başlığı yoksa tarayıcı yine de saklayabilir. Bu “sezgisel önbellekleme” durumunda HTTP spesifikasyonu, dosyanın Last-Modified tarihinden bu yana geçen sürenin yaklaşık %10'u kadar bir tazelik süresi öngörür: bir yıl önce değişmiş bir dosya, yaklaşık beş hafta boyunca sunucuya sorulmadan kullanılabilir. Başlıkları açıkça tanımlamak bu tahmini ortadan kaldırır.

Bellek önbelleği ve disk önbelleği

Chrome geliştirici araçlarının Network panelindeki Size sütununda önbellekten gelen istekler için “memory cache” veya “disk cache” ifadesi görülür. Bellek önbelleği RAM'de tutulur, çok hızlıdır ama sekme veya tarayıcı kapanınca silinir; aynı sayfa içinde tekrar kullanılan görseller ve scriptler genellikle buradan gelir. Disk önbelleği ise tarayıcı kapansa da kalır ve günler sonraki ziyarette işe yarar. Bir dosyanın hangisine yazılacağına tarayıcı kendi sezgileriyle karar verir; site sahibi bunu başlıklarla seçemez, yalnızca saklanıp saklanmayacağını ve ne kadar süre taze sayılacağını belirler.

Bu iki katmanın, geri-ileri önbelleği (bfcache) ile karıştırılmaması gerekir; bfcache tek tek dosyaları değil, sayfanın çalışır durumdaki anlık görüntüsünü saklar. Service worker'ların kullandığı Cache Storage da HTTP önbelleğinden ayrı, kodla yönetilen bir depodur.

Yenile tuşu önbelleğe ne yapar?

  • Normal yenileme: Tarayıcı ana belgeyi, süresi dolmamış olsa bile sunucuya yeniden doğrulatır; alt kaynakların da doğrulanıp doğrulanmayacağı tarayıcıdan tarayıcıya değişir. Bu yüzden “yenileyince düzeldi” gözlemi gerçek kullanıcı deneyimini yansıtmaz.
  • Zorla yenileme (Ctrl+Shift+R): İstekler Cache-Control: no-cache ile gönderilir; önbellek atlanır ve her şey baştan indirilir.
  • Geliştirici araçlarındaki “Disable cache”: Araçlar açıkken önbelleği tamamen devre dışı bırakarak ilk ziyareti taklit eder.

Gerçek tekrar ziyaret davranışını görmek için adres çubuğuna URL'yi yeniden yazıp gitmek veya sayfaya bir bağlantıdan dönmek daha doğru bir testtir.

Önbellek bölümlendirmesi: ortak CDN dosyası artık paylaşılmıyor

Eskiden popüler bir kütüphaneyi ortak bir CDN adresinden yüklemek, kullanıcının o dosyayı başka bir sitede zaten indirmiş olabileceği gerekçesiyle önerilirdi. Bu avantaj artık yok. Chrome 86'dan beri HTTP önbelleği, dosyanın URL'sinin yanında üst düzey sitenin ve çerçevenin sitesine göre de anahtarlanıyor; Firefox 85'ten beri ağ bölümlendirmesi varsayılan, Safari de önbelleği üst düzey siteye göre ayırıyor. Amaç, önbellekteki bir dosyanın yüklenme süresinden kullanıcının hangi siteleri ziyaret ettiğinin çıkarılmasını önlemektir. Sonuç olarak üçüncü taraf bir adresten yüklenen dosya, her site için ayrıca indirilir.

Dosya türüne göre başlık stratejisi

KaynakÖnerilen yaklaşımGerekçe
Adında içerik özeti olan CSS/JS (app.3f9a1c.js)max-age=31536000, immutableİçerik değişirse dosya adı da değişir
HTML belgelerino-cache ve ETagHer ziyarette hızlıca doğrulanır, yeni yayın hemen görülür
Sürümlenmemiş görsellerBirkaç gün ile birkaç hafta arası max-ageDeğişiklik nadir, ama anında yayılma gerekmez
Kişisel veri içeren yanıtlarprivate, no-storeOrtak bilgisayarda bile diske yazılmaz

Önbelleğin sunucu, CDN ve uygulama katmanlarıyla birlikte genel resmi ve geçersiz kılma stratejileri önbellek maddesinde anlatılıyor. Statik dosyaların hangi başlıklarla döndüğü tarayıcının Network panelinden görülebilir; sayfanın kendi yanıtındaki Cache-Control değerini ise SEO Analiz Aracı yanıt başlıkları arasında gösterir.

İlgili terimler

← Sözlüğe dön