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 gidiş-dönüş gerekir.
- Sayfanız, tüm kritik kaynakları tamamen indirilene kadar yüklenmez.
- Sitenizdeki bir kullanıcının sınırlı mobil veri planı varsa 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, tüm tarayıcılarda desteklenen web platformu API'leri koleksiyonunun genel adıdır:
Cache-Control
ETag
Last-Modified
HTTP Önbelleği nasıl çalışır?
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 için öncelikle tarayıcı önbelleğine yönlendirilir. Eşleşme varsa yanıt önbellekten okunur. Böylece hem ağ gecikmesi hem de aktarımın 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 istek üst bilgilerini belirleyen web uygulamanızın kodu hem de yanıt başlıklarını belirleyen web sunucunuzun yapılandırması üzerinde kontrol sahibi olursunuz.
Daha ayrıntılı, kavramsal bir genel bakış için MDN'nin HTTP Önbelleğe Alma makalesine bakın.
İstek üstbilgileri: varsayılanlara bağlı kalın (genellikle)
Web uygulamanızın giden isteklerine eklenmesi gereken birkaç önemli üst bilgi vardır, ancak 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), tarayıcının HTTP Önbelleğindeki mevcut değerleri anlamasına göre görünür.
Bu iyi haber: Bu, HTML'nize <img src="my-image.png"> gibi etiketleri eklemeye devam edebileceğiniz anlamına gelir ve tarayıcı, ek bir çaba sarf etmeden HTTP önbelleğe alma işlemini sizin için 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üre boyunca önbelleğe alması gerektiğini belirtmek için bir
Cache-Controlyö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ık,
ETagile aynı amaca hizmet eder ancakETag'in içerik temelli stratejinin aksine bir kaynağın değişip değişmediğini belirlemek için zamana dayalı bir strateji kullanır.
Bazı web sunucularında bu üstbilgilerin varsayılan olarak ayarlanması için yerleşik destek bulunur. Bazıları ise siz açık bir şekilde yapılandırmadığınız sürece üst bilgileri tamamen boş bırakır. Üstbilgileri nasıl yapılandıracağınız konusundaki belirli ayrıntılar, kullandığınız web sunucusuna bağlı olarak büyük ölçüde farklılık 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ı yapılandırma talimatları aşağıda verilmiştir:
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 sahip olursunuz. Bu nedenle, yanıt başlıklarınızı yapılandırmak için zaman ayırmanız gerekir.
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 hemen uygulamanı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 artık max-age veya expires tarafından belirlendiği şekliyle güncelliğini kaybedinceye ya da kullanıcının tarayıcı önbelleğini temizlemesi gibi başka bir nedenle önbellekten çıkarılana kadar kullanılır. Sonuç olarak, sayfa oluşturulduğunda farklı kullanıcılar dosyanın farklı sürümlerini yükleyebilir: 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 daha eski bir sürümü kullanır.
Hem istemci tarafında önbelleğe almayı hem de hızlı güncellemeleri almak için kaynağın URL'sini değiştirebilir ve içeriği her değiştiğinde kullanıcıyı yeni yanıtı indirmeye zorlayabilirsiniz. Genellikle bunu, dosyanın bir parmak izini veya sürüm numarasını dosya adına yerleştirerek yaparsınız: örneğin, style.x234dff.css.
"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 yıl boyunca herhangi bir zamanda (31.536.000 saniye, desteklenen maksimum değer) aynı URL'yi yüklemesi gerektiğinde, web sunucunuza herhangi bir ağ isteği yapmak 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. Ayrıca her web uygulamasının, neredeyse hiçbir zaman sürüm bilgisi içermeyen HTML dosyalarına ihtiyacı vardır. Çünkü ziyaret edilecek URL'nin https://example.com/index.34def12.html olduğunu hatırlamaları gerektiğinde hiç kimse web uygulamanızı kullanmakla uğraşmaz. Bu URL'ler için ne yapabilirsiniz?
HTTP önbelleğine alma işlemi, ağdan tamamen kaçınmaya yetecek kadar güçlü değildir. (Merak etmeyin, yakında ek destek sağlayan Service Worker hakkında daha fazla bilgi edineceksiniz.) 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, sürümü oluşturulmayan URL'lerin nerede ve nasıl önbelleğe alınacağını hassas bir şekilde ayarlamanıza yardımcı olabilir:
no-cache, 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 bildirir.no-store, tarayıcıya ve diğer ara önbelleklere (CDN 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: Tüm önbellekler yanıtı depolayabilir.
Hangi Cache-Control değerlerinin kullanılacağına karar verme sürecini görselleştirmek için Ek: Cache-Control akış şeması'na bakın. Cache-Control, virgülle ayrılmış bir yönerge listesini de kabul edebilir. Ek: Cache-Control örnek bölümüne bakın.
ETag veya Last-Modified ayarlarını yapmak da yardımcı olabilir.
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 belirleme. Daha doğru olduğu için ETag kullanmanızı öneririz.
İ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.
Maalesef tarayıcı, süresi dolduğu için ö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 bilgileri yeniden indirmek gerekmez.
ETag doğrulama jetonu, bu sorunu çözmek için tasarlanmıştır. Sunucu, rastgele bir jeton oluşturur ve bu jeton genellikle dosya içeriklerinin karması veya başka bir parmak izidir.
Tarayıcının, parmak izinin nasıl oluşturulduğunu bilmesine gerek yoktur. Bunu 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 ayarlandığında, İstek başlıkları'nda belirtilen If-Modified-Since veya If-None-Match istek başlıklarını tetiklemesine izin vererek yeniden doğrulama isteğini çok daha verimli hale getirir.
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.
/file ister ve If-None-Match üst bilgisini ekleyerek, sunucuya yalnızca sunucudaki dosyanın ETag değeri, tarayıcının If-None-Match değeriyle eşleşmediğinde dosyanın tam dosyayı döndürmesini söyleyen If-None-Match üst bilgisini ekler. Bu durumda değerler eşleşir ve sunucu, dosyanın ne kadar uzun süre boyunca (Cache-Control: max-age=120) önbelleğe alınması gerektiğine dair talimatları içeren bir 304 Not Modified yanıtı döndürü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 çaba gerektirmez.
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.
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 ü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 etmenin diğer yollarını aşağıda bulabilirsiniz:
- Tutarlı URL'ler kullanın. Aynı içeriği farklı URL'lerde sunuyorsanız, tarayıcı bu içeriği birden çok kez alır ve depolar.
- 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, dosyanın geri kalanı ise yapmıyorsa (kitaplık kodunda olduğu gibi) 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 kullanmayı ve sık sık değişmeyen kod için uzun önbelleğe alma süresi stratejisini kullanmayı düşünün.
Cache-Controlpolitikanızda kabul edilebilir düzeyde eskilik varsa yenistale-while-revalidateyönergesini dikkate alın .
Ek: Cache-Control akış şeması
Cache-Control başlıklarınızı belirlemeyle ilgili 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 bir 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 önbelleğe alınabilir ancak en fazla on dakika (60 saniye x 10 dakika) süreyle ara önbelleklerde kullanılamaz. |
public, max-age=31536000 |
Yanıt, herhangi bir önbellek tarafından bir yıl boyunca saklanabilir. |
no-store |
Yanıt önbelleğe alınamaz ve her istekte tam olarak getirilmelidir. |