Kaynakları ağ üzerinden getirmek hem yavaş hem de pahalı bir işlemdir:
- Büyük yanıtlar, tarayıcı ile sunucu arasında birçok gidiş-dönüş yapılmasını gerektirir.
- Sayfanız tüm kritik kaynakları tamamen indirilene kadar yüklenmez.
- Bir kullanıcı sitenize sınırlı bir mobil veri planıyla erişiyorsa, gereksiz her ağ isteği onun parasının boşa harcanması anlamına gelir.
Gereksiz ağ isteklerinden nasıl kaçınabilirsiniz? Tarayıcının HTTP Önbelleği ilk savunma hattınızdır. En güçlü veya esnek yaklaşım olmayabilir ve önbelleğe alınan yanıtların süresi üzerinde sınırlı kontrole sahip olursunuz, ancak etkilidir, tüm tarayıcılarda desteklenir ve çok fazla çalışma gerektirmez.
Bu kılavuz, etkili bir HTTP önbellek uygulaması oluşturmayla ilgili temel bilgileri gösterir.
Tarayıcı uyumluluğu
Aslında HTTP Önbelleği adında tek bir API yoktur. Web platformu API'lerinden oluşan bir koleksiyonun genel adıdır. Bu API'ler tüm tarayıcılarda desteklenir:
Cache-Control
ETag
Last-Modified
HTTP Önbelleği nasıl çalışır?
Tarayıcının gönderdiği tüm HTTP istekleri, isteği yerine getirmek üzere kullanılabilecek geçerli bir önbelleğe alınmış yanıt olup olmadığını kontrol etmek için öncelikle tarayıcının önbelleğine yönlendirilir. Eşleşme varsa, yanıt önbellekten okunur. Böylece 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 denetime sahip olursunuz.
Daha ayrıntılı, kavramsal bir genel bakış için MDN'nin HTTP Önbelleğe Alma makalesine bakın.
İstek üstbilgileri: varsayılan değerleri koruyun (genellikle)
Web uygulamanızın giden isteklerine eklenmesi gereken bir dizi önemli üstbilgi vardır ancak tarayıcı, istekte bulunduğunda bunları sizin yerinize hemen hemen her zaman ayarlar. Yenilik kontrolünü etkileyen If-None-Match ve If-Modified-Since gibi istek başlıkları, tarayıcının HTTP Önbelleğindeki mevcut değerleri algılamasına göre görünür.
Bu iyi bir haberdir. HTML'nize <img src="my-image.png"> gibi etiketler eklemeye devam edebileceğiniz anlamına gelir. Böylece tarayıcı, HTTP önbelleğine alma işlemini ekstra çaba sarf etmeden sizin için otomatik olarak gerçekleştirir.
Yanıt başlıkları: Web sunucunuzu yapılandırın
HTTP önbellek kurulumunda 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 dikkate alınır:
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 birCache-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çeriklerinin karması) gönderebilir. Sunucu aynı jetonu döndürürse dosya aynı olur ve dosyayı yeniden indirmeye gerek yoktur.Last-Modified. Bu başlıkETagile aynı amaca hizmet eder, ancak bir kaynağın değişip değişmediğini belirlemek içinETagadlı içerik temelli stratejinin aksine zamana dayalı bir strateji kullanır.
Bazı web sunucularında bu üstbilgilerin varsayılan olarak ayarlanması için yerleşik destek bulunurken diğer sunucularda siz özellikle yapılandırmadığınız sürece üstbilgilerin tamamı dışarıda kalır. Üstbilgileri nasıl yapılandıracağınıza ilişkin ayrıntılar, hangi web sunucusunu kullandığınıza bağlı olarak büyük farklılıklar gösterir. Bu nedenle, en doğru ayrıntıları almak için sunucunuzun dokümanlarına bakmanız gerekir.
Aşağıda, arama yapmanızı engellemek için birkaç popüler web sunucusunu yapılandırmaya ilişkin talimatlar verilmiştir:
Cache-Control yanıt üstbilgisinin çıkarılması HTTP önbelleğe almayı devre dışı bırakmaz. Bunun yerine, tarayıcılar belirli bir içerik türü için hangi önbelleğe alma davranışının en mantıklı olacağını etkili bir şekilde tahmin eder. Muhtemelen bu tekliflerden daha fazla kontrol sahibi olmak istiyorsunuzdur. 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ümlü URL'ler için uzun ömürlü önbelleğe alma
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 az önce hemen dağıtmanız gereken bir acil durum güncellemesi yaptığını varsayalım. Tarayıcıları, dosyanın önbelleğe alınan "eski" kopyasını güncellemeleri konusunda nasıl bilgilendirirsiniz? En azından kaynağın URL'sini değiştirmeden yapamazsınız.
Tarayıcı yanıtı önbelleğe aldıktan sonra, max-age veya expires tarafından belirlenen şekilde güncelliğini yitirene ya da başka bir nedenle (örneğin, kullanıcının tarayıcı önbelleğini temizlemesi) önbellekten çıkarılana kadar önbelleğe alınan sürüm 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 önceki (ancak hâlâ geçerli) bir kopyayı önbelleğe alan kullanıcılar yanıtının eski bir sürümünü kullanır.
İstemci tarafı önbelleğe alma ve hızlı güncellemeler gibi iki seçenekten de en iyi şekilde nasıl yararlanırsınız? 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, dosya adına dosyanın bir parmak izini veya sürüm numarasını yerleştirerek yaparsınız (örneğin, style.x234dff.css).
"Parmak izi" veya sürüm bilgisi içeren ve içeriği asla değişmeyecek URL'lere ilişkin isteklere yanıt verirken yanıtlarınıza Cache-Control: max-age=31536000 ekleyin.
Bu değerin ayarlanması, tarayıcıya gelecek bir yıl içinde herhangi bir zamanda aynı URL'yi (31.536.000 saniye; desteklenen maksimum değer) yüklemesi gerektiğinde, web sunucunuza herhangi bir ağ isteğinde bulunmak zorunda kalmadan HTTP Önbelleğindeki değeri hemen kullanabileceğini bildirir. Bu harika! Ağdan kaçınarak elde ettiğiniz güvenilirliği ve hızı hemen elde ettiniz.
Webpack gibi derleme araçları, öğe URL'lerinize karma parmak izleri atama sürecini otomatikleştirebilir.
Sürümü geri alınmış URL'ler için sunucuyu yeniden doğrulama
Maalesef yüklediğiniz tüm URL'ler için sürüm oluşturulmamış. Belki web uygulamanızı dağıtmadan önce bir derleme adımı dahil edemediğiniz için öğe URL'lerinize karmalar ekleyemezsiniz. Her web uygulaması HTML dosyalarına ihtiyaç duyar. Ziyaret edilecek URL'nin https://example.com/index.34def12.html olduğunu hatırlaması gerektiğinde web uygulamanızı kullanmak zorunda kalacağından bu dosyalar (neredeyse!) hiçbir zaman sürüm bilgisi içermeyecektir. Peki bu URL'ler için ne yapabilirsiniz?
Bu, yenilgiyi kabul etmeniz gereken senaryolardan biridir. HTTP önbelleğine alma, ağdan tamamen kaçınacak kadar güçlü değildir. (Endişelenmeyin, yakında hizmet çalışanları hakkında bilgi edineceksiniz. Bu sayede savaşı sizin lehinize çevirebilmemiz için ihtiyacımız olan desteği sağlayacaksı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ümü doğrulanmamış URL'lerin nerede ve nasıl önbelleğe alınacağına ilişkin ince ayar yapmanı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 seferinde sunucuyla yeniden doğrulaması gerektiğini bildirir.no-store. Bu komut, tarayıcıya ve diğer ara önbelleklere (CDN'ler gibi) dosyanın hiçbir sürümünü asla depolamama talimatı verir.private. Tarayıcılar dosyayı önbelleğe alabilir, ancak ara önbellekler bunu yapamaz.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ı'na bakın. Cache-Control, virgülle ayrılmış yönerge listesini de kabul edebilir. Ek: Cache-Control örnek bölümüne bakın.
ETag veya Last-Modified değerini ayarlamak da yardımcı olabilir. Yanıt başlıklarında belirtildiği gibi, ETag ve Last-Modified aynı amaca hizmet eder: Süresi dolmuş bir önbelleğe alınmış dosyayı tarayıcının yeniden indirmesinin gerekip gerekmediğini belirlemek. Daha doğru sonuç verdiği için ETag kullanmanızı öneririz.
İlk getirme işleminin üzerinden 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. 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ı indirmek için bir neden yoktur.
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 dijital 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; parmak izini 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 başlıklarını gördüğünde, tarayıcının HTTP Önbelleğinde zaten sahip olduğu kaynak 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 yanıt, "Hey, halihazırda kullandıklarınızı kullanmaya devam edin!" ifadesine eşdeğerdir. Bu tür yanıtlar gönderilirken aktarılacak veri miktarı çok azdır. Bu nedenle, istenen kaynağın bir kopyasını gerçekten geri göndermek yerine genellikle çok daha hızlıdır.
/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şmediğinde tam dosyayı döndürmesi talimatını vermek için If-None-Match üst bilgisini içerir. Bu durumda, 2 değer eşleşmiştir. Bu nedenle sunucu, dosyanın ne kadar süre daha önbelleğe alınması gerektiğine dair talimatları içeren bir 304 Not Modified yanıtı (Cache-Control: max-age=120) döndürür.
Özet
HTTP Önbelleği, gereksiz ağ isteklerini azalttığı için yükleme 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 başlığı, süresi dolmuş önbellek kaynaklarını daha verimli bir şekilde yeniden doğrulamanıza yardımcı olabilir.
Daha fazla bilgi
Cache-Control üstbilgisini kullanmayla ilgili temel bilgilerin ötesine geçmek istiyorsanız Jake Archibald'ın Önbelleğe alma en iyi uygulamaları ve maksimum yaş kazanımları kılavuzuna göz atın.
Geri gelen ziyaretçiler için önbellek kullanımınızı nasıl optimize edeceğinizle ilgili yol gösterici bilgileri Önbelleğinizi sevme başlıklı makalede bulabilirsiniz.
Ek: Daha fazla ipucu
Daha fazla zamanınız varsa, HTTP Önbelleği kullanımınızı optimize etmenin diğer yollarını burada 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 bölümü (CSS dosyası gibi) sık sık güncellenirken dosyanın geri kalanı (kitaplık kodu gibi) güncellenmiyorsa sık güncellenen kodu ayrı bir dosyaya bölmeyi, sık güncellenen kod için kısa süreli bir önbelleğe alma stratejisi, sık değişmeyen kod için ise uzun bir önbelleğe alma süresi stratejisi kullanmayı düşünün.
Cache-Controlpolitikanızda eskilik derecesine izin veriliyorsa yenistale-while-revalidateyönergesine göz atın.
Ek: Cache-Control akış şeması
Cache-Control başlıklarınızı ayarlamayla 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 en fazla 1 gün süreyle (60 saniye x 60 dakika x 24 saat) önbelleğe alınabilir. |
private, max-age=600 |
Yanıt, 10 dakikaya (60 saniye x 10 dakika) kadar tarayıcı tarafından önbelleğe alınabilir (ancak ara önbellekler değil). |
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 getirilmelidir. |