Kaynakları ağ üzerinden getirmek hem yavaş hem de pahalı bir işlemdir:
- Büyük yanıtlar için tarayıcı ile sunucu arasında çok sayıda döngü gerekir.
- Sayfanız, kritik kaynaklarının tamamı tamamen indirilene kadar yüklenmez.
- Bir kullanıcı sitenize sınırlı bir mobil veri planıyla erişiyorsa tüm gereksiz ağ istekleri parayı boşa harcama anlamına gelir.
Gereksiz ağ isteklerinden nasıl kaçınabilirsiniz? Tarayıcının HTTP Önbelleği ilk savunma hatınızdır. Bu her zaman en güçlü veya esnek yaklaşım değildir ve önbelleğe alınan yanıtların ömrü üzerinde sınırlı denetime sahip olursunuz, ancak etkilidir, tüm tarayıcılarda desteklenir ve çok fazla çalışma gerektirmez.
Bu kılavuz, etkili bir HTTP önbelleğe alma uygulamasının temel özelliklerini gösterir.
Tarayıcı uyumluluğu
HTTP Önbelleği adında tek bir API yoktur. Web platformu API'leri koleksiyonunun genel adıdır. Bu API'ler tüm tarayıcılarda desteklenir:
HTTP Önbelleği nasıl çalışır?
Tarayıcının yaptığı tüm HTTP istekleri, isteği gerçekleştirmek için kullanılabilecek geçerli bir önbelleğe alınmış yanıt olup olmadığını kontrol etmek için öncelikle tarayıcı önbelleğine yönlendirilir. Eşleşme olursa yanıt önbellekten okunur. Böylece hem ağ gecikmesi hem de aktarım için ortaya çıkacak veri maliyetleri ortadan kalkar.
HTTP Önbelleği'nin davranışı, istek başlıkları ve yanıt başlıklarının bir kombinasyonu ile 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ı kavramsal genel bakış için MDN'nin HTTP Önbelleğe Alma makalesine göz atın.
İstek üstbilgileri: varsayılanlara bağlı kalın (genellikle)
Web uygulamanızın giden isteklerine eklenmesi gereken birkaç önemli üst bilgi olsa da, tarayıcı istek gönderdiğinde neredeyse her zaman bunları sizin adınıza ayarlar. Yenilik kontrolünü etkileyen istek üst bilgileri (ör. If-None-Match
ve If-Modified-Since
), yalnızca tarayıcının HTTP Önbelleğindeki mevcut değerleri anlamasına göre görünür.
Bu iyi haberdir. Bu, <img
src="my-image.png">
gibi etiketleri HTML'nize eklemeye devam edebileceğiniz anlamına gelir. Tarayıcı, ek bir çaba göstermeden sizin için HTTP önbelleğine alma işlemini otomatik olarak halleder.
Yanıt başlıkları: web sunucunuzu yapılandırma
HTTP önbelleğe alma kurulumunun en önemli bölümü, web sunucunuzun giden her yanıta eklediği üst bilgilerdir. Aşağıdaki başlıkların tümü, etkili önbelleğe alma davranışında rol oynar:
Cache-Control
. Sunucu, tarayıcının ve diğer ara önbelleklerin bağımsız yanıtı nasıl ve ne kadar süreyle önbelleğe alması gerektiğini belirtmek için birCache-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ı olur ve dosyanın yeniden indirilmesine gerek yoktur.Last-Modified
. Bu başlıkETag
ile aynı amaca hizmet eder ancakETag
'in içeriğe dayalı stratejisi yerine bir kaynağın değişip değişmediğini belirlemek için zamana dayalı bir strateji kullanır.
Bazı web sunucularında bu üst bilgileri varsayılan olarak ayarlamak için yerleşik destek bulunurken, bazıları açıkça yapılandırmadığınız sürece üstbilgileri tamamen dışarıda bırakır. Başlıkların nasıl yapılandırılacağına ilişkin belirli ayrıntılar, kullandığınız web sunucusuna bağlı olarak büyük ölçüde değişiklik gösterir. En doğru ayrıntıları almak için sunucunuzun belgelerine bakmanız gerekir.
Biraz arama yapmanıza gerek kalmaması için bazı popüler web sunucularının yapılandırılmasına ilişkin talimatları aşağıda bulabilirsiniz:
Cache-Control
yanıt üstbilgisinin hariç tutulması HTTP önbelleğe almayı devre dışı bırakmaz.
Bunun yerine tarayıcılar, belirli bir içerik türü için ne tür önbelleğe alma davranışının en mantıklı olacağını etkili bir şekilde tahmin eder.
Muhtemelen bu tekliften daha fazla kontrole ihtiyacınız vardır. 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ü tutulan URL'ler için uzun ömürlü önbelleğe alma
Sunucunuzun tarayıcılara bir CSS dosyasını 1 yıl (Cache-Control: max-age=31536000
) süreyle önbelleğe almaları talimatını verdiğini ancak tasarımcınızın kısa süre önce yaptığı ve hemen kullanıma sunmanız gereken bir acil durum güncellemesi yaptığını varsayalım. Tarayıcılara dosyanın "eski" önbelleğe alınmış kopyasını güncellemeleri için nasıl bildirimde bulunursunuz?
Kaynağın URL'sini değiştirmeden bunu 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 şekliyle artık güncelliğini kaybedinceye ya da başka bir nedenle önbellekten çıkarılana kadar (örneğin, kullanıcının tarayıcı önbelleğini temizlemesi) kullanılır. Sonuç olarak, sayfa oluşturulduğunda farklı kullanıcılar dosyanın farklı sürümlerini kullanabilir: Kaynağı yeni getiren kullanıcılar yeni sürümü kullanırken, daha önce (ancak hâlâ geçerli) bir kopyayı önbelleğe alan kullanıcılar yanıtın daha eski bir sürümünü kullanır. İstemci taraflı önbelleğe alma ve hızlı güncellemeler gibi iki platformdan da nasıl en iyi şekilde 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 bir parmak izini veya sürüm numarasını dosya adına (örneğin, style.x234dff.css
) yerleştirerek yaparsınız.
"Parmak izi" veya sürüm oluşturma bilgilerini içeren ve içeriği hiçbir zaman değiştirilmesi amaçlanmayan URL isteklerine yanıt verirken yanıtlarınıza Cache-Control: max-age=31536000
ekleyin.
Bu değerin ayarlanması tarayıcıya, sonraki bir yıl boyunca herhangi bir zamanda aynı URL'yi yüklemesi gerektiğinde (31.536.000 saniye; desteklenen maksimum değer), web sunucunuza herhangi bir ağ isteği göndermek zorunda kalmadan HTTP Önbelleğindeki değeri hemen kullanabileceğini bildirir. Harika! Ağdan uzak durmanın getirdiği güvenilirlik ve hıza hemen kavuştunuz.
Webpack gibi araçlar oluşturarak öğe URL'lerinize karma parmak izi atama süreci otomatikleştirebilirsiniz.
Sürümü kaldırılan URL'ler için sunucu yeniden doğrulaması
Maalesef yüklediğiniz tüm URL'lerin sürümü oluşturulmamış. Belki web uygulamanızı dağıtmadan önce bir derleme adımını ekleyemediğiniz için öğe URL'lerinize karmalar ekleyemezsiniz. Her web uygulamasının HTML dosyalarına ihtiyacı vardır. Bu dosyalar (neredeyse) hiçbir zaman sürüm oluşturma bilgisi içermez. Çünkü ziyaret edilecek URL'nin https://example.com/index.34def12.html
olduğunu hatırlamaları gerektiğinde web uygulamanızı kullanabilecek kimse olmayacaktır. Bu URL'ler için ne yapabilirsiniz?
Bu, yenilgiyi kabul etmeniz gereken senaryolardan biridir. HTTP önbelleğe alma, ağdan tamamen kaçınmak için tek başına yeterli değildir. (Merak etmeyin, yakında Service Worker'lar hakkında bilgi edinecek ve savaşı sizin lehinize çevirmek için ihtiyacımız olan desteği sağlayacaksınız.) Bununla birlikte, 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, yeni sürüme geçirilmemiş URL'lerin nerede ve nasıl önbelleğe alınacağını hassas bir şekilde ayarlamanıza yardımcı olabilir:
no-cache
. Bu komut, tarayıcıya URL'nin önbelleğe alınmış bir sürümünü kullanmadan önce her defasında sunucuyla yeniden doğrulaması gerektiğini söyler.no-store
. Bu işlem, tarayıcıya ve diğer ara önbelleklere (CDN'ler gibi) dosyanın hiçbir sürümünü hiçbir zaman depolamamalarını bildirir.private
. Tarayıcılar dosyayı önbelleğe alabilir, ancak ara önbellekler bunu yapamaz.public
. Yanıt herhangi bir önbellekte depolanabilir.
Hangi Cache-Control
değerlerinin kullanılacağına karar verme sürecini görselleştirmek için Ek: Cache-Control
akış şemasına göz atın. Ayrıca, Cache-Control
yönergesinin virgülle ayrılmış bir yönerge listesini kabul edebileceğini unutmayın. Ek: Cache-Control
örnek bölümüne bakın.
Bununla birlikte, iki ek yanıt başlığından birini ayarlamak da yardımcı olabilir: ETag
veya Last-Modified
. Yanıt başlıklarında belirtildiği gibi, ETag
ve Last-Modified
aynı amaca hizmet eder: tarayıcının, süresi dolmuş bir önbelleğe alınmış dosyayı yeniden indirmesi gerekip gerekmediğini belirlemek. ETag
daha doğru olduğu için önerilen yaklaşımdır.
İlk getirmenin üzerinden 120 saniye geçtiğini ve tarayıcının aynı kaynak için yeni bir istek başlattığını varsayalım. Tarayıcı ilk olarak HTTP Önbelleğini kontrol eder ve önceki yanıtı bulur. Yanıtın süresi dolduğundan maalesef tarayıcı önceki yanıtı kullanamıyor. Bu noktada tarayıcı yeni bir istek gönderebilir ve yeni tam yanıtı getirebilir. Ancak bu verimsizdir çünkü kaynak değişmediyse önbellekte bulunan bilgilerin aynısını indirmeniz gerekmez. ETag
başlığında belirtildiği gibi doğrulama jetonlarının çözmek için tasarlandığı sorun budur. Sunucu, genellikle dosya içeriğinin karması veya başka bir parmak izi olan rastgele bir jeton oluşturur ve döndürür. Tarayıcının, parmak izinin nasıl oluşturulduğunu bilmesine gerek yoktur, yalnızca bir sonraki istekte sunucuya göndermesi gerekir. Parmak izi hâlâ aynıysa kaynak değişmemiştir ve tarayıcı indirme işlemini atlayabilir.
ETag
veya Last-Modified
ayarlayarak yeniden doğrulama isteğini çok daha verimli hale getirirsiniz. Sonunda İstek başlıklarında bahsedilen If-Modified-Since
veya If-None-Match
istek başlıklarını tetiklemiş olurlar.
Doğru şekilde yapılandırılmış bir web sunucusu bu gelen istek üst bilgilerini gördüğünde, tarayıcının HTTP Önbelleğinde bulunan sürümünün, web sunucusundaki en son sürümle eşleşip eşleşmediğini onaylayabilir. Eşleşme varsa sunucu bir 304 Not Modified
HTTP yanıtıyla yanıt verebilir. Bu, "Sahip olduğunuz cihazı kullanmaya devam edin!" ifadesine eşdeğerdir. Bu tür yanıtlar gönderirken aktarılacak çok az veri vardır. Bu nedenle, bu işlem genellikle istenen kaynağın bir kopyasını gerçekten geri göndermek zorunda kalmaktan çok daha hızlıdır.
Özet
HTTP Önbelleği, gereksiz ağ isteklerini azalttığı için yük performansını iyileştirmenin etkili bir yoludur. Tüm tarayıcılarda desteklenir ve kurulumu çok fazla zaman almaz.
Aşağıdaki Cache-Control
yapılandırmaları iyi bir başlangıçtı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
. - Sürümü tutulan kaynaklar için
Cache-Control: max-age=31536000
.
Ayrıca ETag
veya Last-Modified
üst bilgisi, süresi dolmuş önbellek kaynaklarını daha verimli bir şekilde yeniden doğrulamanıza yardımcı olabilir.
Daha fazla bilgi
Cache-Control
üstbilgisinin kullanımıyla ilgili temel bilgilerin ötesine geçmek istiyorsanız, Jake Archibald'ın Önbelleğe alma ile ilgili en iyi uygulamalar ve maksimum yaş sınırı 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 sevme bölümüne bakın.
Ek: Daha fazla ipucu
Daha fazla zamanınız varsa HTTP Önbelleği kullanımınızı optimize etmek için başvurabileceğiniz diğer yolları aşağıda bulabilirsiniz:
- Tutarlı URL'ler kullanın. Aynı içeriği farklı URL'lerde sunuyorsanız bu içerik birden çok kez getirilir ve 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üncelleniyorsa ancak dosyanın geri kalanı (kitaplık kodu gibi) sık sık güncelleniyorsa sık güncellenen kodu ayrı bir dosyaya bölmeyi ve sık güncellenen kod için kısa süreli bir önbelleğe alma stratejisi, sık sık değişmeyen kod için de uzun önbelleğe alma süresi stratejisi kullanmayı düşünün.
Cache-Control
politikanızda kabul edilebilir bir eskimişlik durumu varsa yenistale-while-revalidate
yönergesini inceleyin.
Ek: Cache-Control
akış şeması
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) süreyle önbelleğe alınabilir. |
private, max-age=600 |
Yanıt, tarayıcı tarafından 10 dakikaya (60 saniye x 10 dakika) kadar bir süreyle önbelleğe alınabilir (ancak ara önbellekler için kullanılamaz). |
public, max-age=31536000 |
Yanıt, herhangi bir önbellekte 1 yıl boyunca saklanabilir. |
no-store |
Yanıtın önbelleğe alınmasına izin verilmez ve her istekte tam olarak getirilmesi gerekir. |