HTTP Önbelleği ile gereksiz ağ isteklerini önleme

Ilya Grigorik
Ilya Grigorik
X Ana sayfa
Jeff Posnick

Kaynakları ağ üzerinden getirmek hem yavaş hem de pahalıdır:

  • Büyük yanıtlar, tarayıcı ile sunucu arasında birçok gidiş dönüş gerektirir.
  • Sayfanız, tüm kritik kaynakları tamamen indirilene kadar yüklenmez.
  • Sitenize sınırlı bir mobil veri tarifesiyle erişen kullanıcılar için her gereksiz ağ isteği, para kaybı anlamına gelir.

Gereksiz ağ isteklerini nasıl önleyebilirsiniz? Tarayıcının HTTP önbelleği, ilk savunma hattınızdır. Bu, en güçlü veya esnek yaklaşım olmayabilir ve önbelleğe alınmış yanıtların kullanım ömrü üzerinde sınırlı kontrolünüz vardır ancak etkilidir, tüm tarayıcılarda desteklenir ve fazla çalışma gerektirmez.

Bu kılavuzda, etkili bir HTTP önbelleğe alma uygulamasının temel bilgileri gösterilmektedir.

Tarayıcı uyumluluğu

Aslında HTTP Önbelleği adında tek bir API yoktur. Bu, web platformu API'leri koleksiyonunun genel adıdır. Bu API'ler tüm tarayıcılarda desteklenir:

Cache-Control

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

ETag

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Last-Modified

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

HTTP önbelleğinin işleyiş şekli

Tarayıcının yaptığı tüm HTTP istekleri, isteği yerine getirmek için kullanılabilecek geçerli bir önbelleğe alınmış yanıt olup olmadığını kontrol etmek üzere önce tarayıcı önbelleğine yönlendirilir. Eşleşme varsa yanıt önbellekten okunur. Bu sayede hem ağ gecikmesi hem de aktarımın neden olduğu veri maliyetleri ortadan kalkar.

HTTP önbelleğinin davranışı, istek başlıkları ve yanıt başlıklarının bir kombinasyonu tarafından kontrol edilir. İdeal bir senaryoda, hem web uygulamanızın kodu (istek başlıklarını belirler) hem de web sunucunuzun yapılandırması (yanıt başlıklarını belirler) üzerinde kontrol sahibi olursunuz.

Daha ayrıntılı bir kavramsal genel bakış için MDN'nin HTTP Önbelleğe Alma makalesini inceleyin.

İstek başlıkları: Varsayılanları kullanın (genellikle)

Web uygulamanızın giden isteklerine eklenmesi gereken birkaç önemli başlık vardır ancak tarayıcı, istekte bulunurken bunları neredeyse her zaman sizin adınıza ayarlar. If-None-Match ve If-Modified-Since gibi güncelliği kontrol etmeyi etkileyen istek başlıkları, tarayıcının HTTP önbelleğindeki mevcut değerleri nasıl anladığına bağlı olarak görünür.

Bu iyi bir haber. HTML'nize <img src="my-image.png"> gibi etiketler eklemeye devam edebileceğiniz ve tarayıcının, ekstra çaba harcamadan HTTP önbelleğe alma işlemini sizin için otomatik olarak yapacağı anlamına gelir.

Yanıt başlıkları: Web sunucunuzu yapılandırma

HTTP önbelleğe alma kurulumunun en önemli kısmı, web sunucunuzun her giden yanıta eklediği başlıklardır. Aşağıdaki başlıkların tümü etkili önbelleğe alma davranışını etkiler:

  • Cache-Control. Sunucu, tarayıcının ve diğer ara önbelleklerin her bir yanıtı nasıl ve ne kadar süreyle önbelleğe alması gerektiğini belirtmek için bir Cache-Control yönergesi döndürebilir.
  • ETag. Tarayıcı, süresi dolmuş bir önbelleğe alınmış yanıt bulduğunda, dosyanın değişip değişmediğini kontrol etmek için sunucuya küçük bir jeton (genellikle dosya içeriğinin karması) gönderebilir. Sunucu aynı jetonu döndürürse dosya aynıdır ve yeniden indirilmesi gerekmez.
  • Last-Modified: Bu üstbilgi, ETag ile aynı amaca hizmet eder ancak bir kaynağın değişip değişmediğini belirlemek için ETag'ün içerik tabanlı stratejisinin aksine zamana dayalı bir strateji kullanır.

Bazı web sunucuları, bu üstbilgileri varsayılan olarak ayarlamak için yerleşik desteğe sahipken diğerleri, siz açıkça yapılandırmadığınız sürece üstbilgileri tamamen dışarıda bırakır. Üstbilgilerin nasıl yapılandırılacağıyla ilgili ayrıntılar, kullandığınız web sunucusuna göre büyük farklılıklar gösterir. En doğru bilgileri edinmek için sunucunuzun belgelerini incelemeniz gerekir.

Arama yapmanıza gerek kalmaması için, birkaç popüler web sunucusunu yapılandırma talimatlarını aşağıda bulabilirsiniz:

Cache-Control yanıt başlığını eklememek, HTTP önbelleğe almayı devre dışı bırakmaz. Bunun yerine tarayıcılar, belirli bir içerik türü için en mantıklı önbelleğe alma davranışının ne olduğunu etkili bir şekilde tahmin eder. Muhtemelen bunun sunduğundan daha fazla kontrol istersiniz. Bu nedenle, yanıt başlıklarınızı yapılandırmak için zaman ayırın.

Hangi yanıt başlığı değerlerini kullanmalısınız?

Web sunucunuzun yanıt başlıklarını yapılandırırken ele almanız gereken iki önemli senaryo vardır.

Sürüm bilgisi içeren URL'ler için uzun ömürlü önbelleğe alma

Sürümlü URL'ler önbelleğe alma stratejinize nasıl yardımcı olabilir?
Sürümlü URL'ler, önbelleğe alınmış yanıtları geçersiz kılmayı kolaylaştırdığı için iyi bir uygulamadır.

Sunucunuzun, tarayıcılara bir CSS dosyasını 1 yıl boyunca (Cache-Control: max-age=31536000) önbelleğe alma talimatı verdiğini ancak tasarımcınızın hemen dağıtmanız gereken acil bir güncelleme yaptığını varsayalım. Tarayıcıları, dosyanın "eski" önbelleğe alınmış kopyasını güncellemeleri için nasıl bilgilendirirsiniz? Bunu yapamazsınız. En azından kaynağın URL'sini değiştirmeden yapamazsınız.

Tarayıcı yanıtı önbelleğe aldıktan sonra, önbelleğe alınan sürüm max-age veya expires tarafından belirlendiği şekilde artık yeni olmayana kadar ya da başka bir nedenle önbellekten çıkarılana kadar (ör. kullanıcının tarayıcı önbelleğini temizlemesi) kullanılır. Sonuç olarak, sayfa oluşturulurken farklı kullanıcılar dosyanın farklı sürümlerini kullanabilir: Kaynağı yeni alan kullanıcılar yeni sürümü kullanırken, önceki (ancak hâlâ geçerli) bir kopyayı önbelleğe alan kullanıcılar yanıtın eski bir sürümünü kullanır.

İstemci tarafı önbelleğe alma ve hızlı güncellemelerden en iyi şekilde nasıl yararlanabilirsiniz? Kaynağın URL'sini değiştirir ve içeriği her değiştiğinde kullanıcıyı yeni yanıtı indirmeye zorlarsınız. Genellikle bunu, dosyanın parmak izini veya sürüm numarasını dosya adına yerleştirerek yaparsınız (ör. style.x234dff.css).

"Parmak izi" veya sürüm bilgileri içeren ve içerikleri hiçbir zaman değişmeyecek URL'lerle ilgili isteklere yanıt verirken yanıtlarınıza Cache-Control: max-age=31536000 ekleyin.

Bu değerin ayarlanması, tarayıcıya önümüzdeki bir yıl (31.536.000 saniye; desteklenen maksimum değer) içinde aynı URL'yi yüklemesi gerektiğinde, web sunucunuza ağ isteği göndermesine gerek kalmadan HTTP önbelleğindeki değeri hemen kullanabileceğini bildirir. Bu harika bir şey. Ağı kullanmamanın getirdiği güvenilirlik ve hızı hemen elde ettiniz.

Webpack gibi derleme araçları, öğe URL'lerinize karma parmak izleri atama işlemini otomatikleştirebilir.

Sürümü olmayan URL'ler için sunucu yeniden doğrulaması

Maalesef yüklediğiniz URL'lerin tümü sürümlendirilmemiştir. Web uygulamanızı dağıtmadan önce bir derleme adımı ekleyemediğiniz için öğe URL'lerinize karma oluşturma işlemi ekleyemeyebilirsiniz. Ayrıca her web uygulamasının HTML dosyalarına ihtiyacı vardır. Bu dosyalar (neredeyse!) hiçbir zaman sürüm bilgisi içermez. Çünkü ziyaret edilecek URL'nin https://example.com/index.34def12.html olduğunu hatırlamaları gerekiyorsa kimse web uygulamanızı kullanmak istemez. Peki bu URL'ler için ne yapabilirsiniz?

Bu, yenilgiyi kabul etmeniz gereken bir senaryodur. HTTP önbelleğe alma, ağı tamamen önlemek için tek başına yeterince güçlü değildir. (Endişelenmeyin, yakında hizmet çalışanları hakkında bilgi edineceksiniz. Bu sayede, savaşı lehinize çevirmek için ihtiyacınız olan desteği alacaksınız.) Ancak ağ isteklerinin mümkün olduğunca hızlı ve verimli olmasını sağlamak için uygulayabileceğiniz birkaç adım vardır.

Aşağıdaki Cache-Control değerleri, sürümsüz URL'lerin nerede ve nasıl önbelleğe alınacağını hassas bir şekilde ayarlamanıza yardımcı olabilir:

  • no-cache. Bu, tarayıcıya URL'nin önbelleğe alınmış bir sürümünü kullanmadan önce her seferinde sunucuyla yeniden doğrulama yapması talimatını verir.
  • no-store. Bu, tarayıcıya ve diğer ara önbelleklere (ör. CDN'ler) dosyanın hiçbir sürümünü depolamama talimatı verir.
  • private. Tarayıcılar dosyayı önbelleğe alabilir ancak ara önbellekler alamaz.
  • public. Yanıt, herhangi bir önbellek tarafından depolanabilir.

Hangi Cache-Control değerlerinin kullanılacağına karar verme sürecini görselleştirmek için Ek: Cache-Control akış şeması bölümüne bakın. Cache-Control, virgülle ayrılmış bir yönerge listesini de kabul edebilir. Ek: Cache-Control örnekleri bölümüne bakın.

ETag veya Last-Modified ayarını yapmak da yardımcı olabilir. Yanıt başlıkları bölümünde belirtildiği gibi, ETag ve Last-Modified aynı amaca hizmet eder: Tarayıcının, süresi dolmuş önbelleğe alınmış bir dosyayı yeniden indirmesi gerekip gerekmediğini belirlemek. Daha doğru sonuçlar verdiği için ETag kullanmanızı öneririz.

ETag örneği

İlk getirme işleminden sonra 120 saniye geçtiğini ve tarayıcının aynı kaynak için yeni bir istek başlattığını varsayalım. İlk olarak tarayıcı, HTTP önbelleğini kontrol eder ve önceki yanıtı bulur. Maalesef tarayıcı, süresi dolduğu için önceki yanıtı kullanamıyor. Bu noktada tarayıcı yeni bir istek gönderip yeni tam yanıtı getirebilir. Ancak bu verimsiz bir yöntemdir. Kaynak değişmediyse önbellekte bulunan bilgileri tekrar indirmenin bir anlamı yoktur.

Onay anahtarları, ETag başlığında belirtildiği gibi bu sorunu çözmek için tasarlanmıştır. Sunucu, rastgele bir jeton oluşturup döndürür. Bu jeton genellikle dosya içeriğinin karması veya başka bir parmak izidir. Tarayıcının, parmak izinin nasıl oluşturulduğunu bilmesi gerekmez. Yalnızca bir sonraki istekte parmak izini sunucuya göndermesi yeterlidir. Parmak izi hâlâ aynıysa kaynak değişmemiştir ve tarayıcı indirme işlemini atlayabilir.

ETag veya Last-Modified ayarı, İstek başlıkları bölümünde belirtilen If-Modified-Since veya If-None-Match istek başlıklarını tetiklemesini sağlayarak yeniden doğrulama isteğini çok daha verimli hale getirir.

Doğru şekilde yapılandırılmış bir web sunucusu, bu gelen istek başlıklarını gördüğünde tarayıcının HTTP önbelleğinde bulunan kaynak sürümünün web sunucusundaki en yeni sürümle eşleşip eşleşmediğini onaylayabilir. Eşleşme varsa sunucu, 304 Not Modified HTTP yanıtıyla yanıt verebilir. Bu, "Elinizdekini kullanmaya devam edin." anlamına gelir. Bu tür bir yanıt gönderilirken aktarılacak çok az veri olduğundan, istenen kaynağın bir kopyasını göndermekten genellikle çok daha hızlıdır.

İstemcinin kaynak istediği ve sunucunun 304 başlığıyla yanıt verdiği bir görselleştirme.
Tarayıcı, sunucudan /file isteğinde bulunur ve sunucuya, yalnızca sunucudaki dosyanın ETag değeri tarayıcının If-None-Match değeriyle eşleşmiyorsa tam dosyayı döndürmesi talimatını vermek için If-None-Match başlığını ekler. Bu durumda, 2 değer eşleştiği için sunucu, dosyanın ne kadar süre daha önbelleğe alınması gerektiğiyle ilgili talimatları içeren bir 304 Not Modified yanıtı döndürür (Cache-Control: max-age=120).

Özet

HTTP önbelleği, gereksiz ağ isteklerini azalttığı için yükleme performansını artırmanın etkili bir yoludur. Tüm tarayıcılarda desteklenir ve ayarlanması çok fazla çalışma gerektirmez.

Aşağıdaki Cache-Control yapılandırmaları iyi bir başlangıç noktasıdır:

  • Her kullanımdan önce sunucuyla yeniden doğrulanması gereken kaynaklar için Cache-Control: no-cache.
  • Hiçbir zaman önbelleğe alınmaması gereken kaynaklar için Cache-Control: no-store.
  • Cache-Control: max-age=31536000.

ETag veya Last-Modified başlığı, süresi dolmuş önbellek kaynaklarını daha verimli bir şekilde yeniden doğrulamanıza yardımcı olabilir.

Daha fazla bilgi

Cache-Control başlığını kullanmanın temellerinin ötesine geçmek istiyorsanız Jake Archibald'ın Önbelleğe alma ile ilgili en iyi uygulamalar ve max-age ile ilgili dikkat edilmesi gerekenler kılavuzuna göz atın.

Geri gelen ziyaretçiler için önbellek kullanımınızı nasıl optimize edeceğinizle ilgili yardım almak üzere Önbelleğinizi sevin başlıklı makaleyi inceleyin.

Ek: Diğer ipuçları

Daha fazla zamanınız varsa HTTP önbelleği kullanımınızı optimize etmenin diğer yolları şunlardır:

  • Tutarlı URL'ler kullanın. Aynı içeriği farklı URL'lerde sunarsanız bu içerik birden fazla kez getirilip depolanır.
  • Uygulamayı kullanmayı bırakan kullanıcı sayısını en aza indirin. Bir kaynağın bir kısmı (ör. CSS dosyası) sık sık güncellenirken dosyanın geri kalanı (ör. kitaplık kodu) güncellenmiyorsa sık güncellenen kodu ayrı bir dosyaya bölmeyi ve sık güncellenen kod için kısa süreli önbelleğe alma stratejisi, sık sık değişmeyen kod için ise uzun süreli önbelleğe alma stratejisi kullanmayı düşünün.
  • Cache-Control politikanızda bir miktar eskime kabul edilebilirse yeni stale-while-revalidate yönergesine göz atın.

Ek: Cache-Control akış şeması

Akış Şeması
Cache-Control üstbilgilerinizi ayarlama karar süreci.

Ek: Cache-Control örnek

Cache-Control değer Açıklama
max-age=86400 Yanıt, tarayıcılar ve ara önbellekler tarafından 1 güne kadar (60 saniye x 60 dakika x 24 saat) önbelleğe alınabilir.
private, max-age=600 Yanıt, tarayıcı tarafından (aracı önbellekler tarafından değil) 10 dakikaya kadar (60 saniye x 10 dakika) önbelleğe alınabilir.
public, max-age=31536000 Yanıt, herhangi bir önbellek tarafından 1 yıl boyunca saklanabilir.
no-store Yanıtın önbelleğe alınmasına izin verilmez ve her istekte tam olarak getirilmesi gerekir.