Sitenizi ikinci kez yükleyen kullanıcılar HTTP önbelleklerini kullanacağı için bunun düzgün çalıştığından emin olun.
Bu yayın, Chrome Geliştirici Zirvesi 2020'deki Genişletilmiş İçerik'in bir parçası olan Love your cache (Önbelleğinizi sevin) başlıklı videonun tamamlayıcısıdır. İlgili videoya mutlaka göz atın:
Kullanıcılar sitenizi ikinci kez yüklediğinde tarayıcıları, yüklemenin daha hızlı yapılmasına yardımcı olmak için HTTP önbelleğindeki kaynakları kullanır. Ancak web'de önbelleğe alma standartları 1999'dan kalmadır ve oldukça geniş bir şekilde tanımlanmıştır. CSS veya resim gibi bir dosyanın ağdan tekrar getirilip getirilemeyeceğini veya önbelleğinizden yüklenip yüklenemeyeceğini belirlemek biraz kesin olmayan bir bilimdir.
Bu yayında, hiç önbelleğe alma yapmayan, makul ve modern bir önbelleğe alma varsayılan ayarından bahsedeceğim. Ancak bu yalnızca varsayılan ayardır ve elbette "kapatmak"tan daha incelikli bir işlemdir. Okumaya devam edin.
Hedefler
Bir site 2. kez yüklendiğinde iki hedefiniz vardır:
- Kullanıcılarınızın en güncel sürümü kullandığından emin olun. Yaptığınız değişiklikler hızlı bir şekilde yansıtılır.
- Ağdan mümkün olduğunca az veri alırken 1. adımı uygulayın
En geniş anlamda, müşterilerinize sitenizi tekrar yüklediklerinde yalnızca en küçük değişikliği göndermek istersiniz. Ayrıca, sitenizi herhangi bir değişikliğin en verimli şekilde dağıtılmasını sağlayacak şekilde yapılandırmak da zordur (Bu konu hakkında daha fazla bilgiyi aşağıda ve videoda bulabilirsiniz).
Bununla birlikte, önbelleğe alma konusunda başka ayarlarınız da vardır. Örneğin, kullanıcının tarayıcı HTTP önbelleğinizin sitenizi uzun süre tutmasına izin vererek siteyi sunmak için hiçbir ağ isteği gerekmemesini sağlayabilirsiniz. Bir sitenin güncel olup olmadığını kontrol etmeden önce tamamen çevrimdışı hizmet verecek bir hizmet çalışanı da oluşturmuş olabilirsiniz. Bu, çevrimdışı öncelikli uygulama benzeri birçok web deneyiminde geçerli olan ve kullanılan ekstrem bir seçenektir. Ancak web'in yalnızca önbellek kullanımına, hatta tamamen ağa özgü bir aşırılığa ihtiyacı yoktur.
Arka plan
Web geliştiricileri olarak, "eski önbellek" fikrine hepimiz alışkınız. Ancak bu sorunu çözmek için kullanılabilecek araçları neredeyse içgüdüsel olarak biliyoruz: Bir sitenin verilerini temizlemek için "zor yenileme" yapabilir, gizli pencere açabilir veya tarayıcınızın geliştirici araçlarını kullanabilirsiniz.
İnternetteki sıradan kullanıcılar bu lüksü kullanamaz. Dolayısıyla, kullanıcıların 2. yüklemelerinde güzel vakit geçirmelerini sağlamak gibi temel hedeflerimiz olsa da, kötü zaman geçirmemelerini veya takılmamalarını sağlamak da çok önemli. (web.dev/live sitesini neredeyse nasıl kilitlediğimizden bahsetmek isterseniz videoya göz atın.)
"Çökmüş önbelleğe" yol açan en yaygın neden, 1999'dan kalma önbelleğe alma varsayılan ayarıdır. Last-Modified üst bilgisini kullanır:
Yüklediğiniz her dosya, tarayıcınızın gördüğü şekilde mevcut ömrünün% 10'u boyunca tutulur. Örneğin, index.html bir ay önce oluşturulduysa tarayıcınız tarafından yaklaşık üç gün daha önbelleğe alınır.
Bu, zamanında iyi niyetle ortaya atılan bir fikirdi ancak günümüz web sitelerinin sıkı entegrasyonlu yapısı göz önüne alındığında, bu varsayılan davranış, kullanıcının web sitenizin farklı sürümleri için tasarlanmış dosyalara (ör. Salı günkü sürümün JS'si ve Cuma günkü sürümün CSS'si) sahip olduğu bir duruma yol açabilir. Bunun nedeni, bu dosyaların tam olarak aynı zamanda güncellenmemesidir.
İyi aydınlatılmış yol
Modern bir varsayılan önbelleğe alma yöntemi, hiç önbelleğe alma yapmamak ve içeriğinizi kullanıcılarınıza yakınlaştırmak için CDN'leri kullanmaktır. Kullanıcılar sitenizi her yüklediğinde, sitenin güncel olup olmadığını görmek için ağa giderler. Bu istek, her son kullanıcıya coğrafi olarak yakın bir CDN tarafından sağlanacağından düşük gecikmeye sahiptir.
Web barındırıcınızı, web isteklerine şu başlıkla yanıt verecek şekilde yapılandırabilirsiniz:
Cache-Control: max-age=0,must-revalidate,public
Bu, dosyanın hiçbir zaman geçerli olmadığını ve tekrar kullanabilmek için ağdan doğrulamanız gerektiğini (aksi takdirde yalnızca "önerildiğini") ifade eder.
Bu doğrulama işlemi, aktarılan bayt açısından nispeten ucuzdur. Büyük bir görüntü dosyası değişmediyse tarayıcınız küçük bir 304 yanıtı alır. Ancak bunu öğrenmek için kullanıcının yine de ağa gitmesi gerektiğinden gecikme ücreti alınır. Bu da bu yaklaşımın başlıca dezavantajıdır. Bu yöntem, gelişmiş ülkelerde hızlı bağlantı kullanan ve tercih ettiğiniz CDN'nin kapsama alanı geniş olan kullanıcılar için çok iyi sonuç verebilir. Ancak daha yavaş mobil bağlantıları olan veya kötü altyapı kullanan kullanıcılar için uygun değildir.
Bununla birlikte, bu modern yaklaşım popüler bir CDN olan Netlify'de varsayılan olarak kullanılsa da neredeyse tüm CDN'lerde yapılandırılabilir. Firebase Hosting için bu başlığı firebase.json dosyanızın barındırma bölümüne ekleyebilirsiniz:
"headers": [
// Be sure to put this last, to not override other headers
{
"source": "**",
"headers": [ {
"key": "Cache-Control",
"value": "max-age=0,must-revalidate,public"
}
}
]
Bu nedenle, bunu akıllıca bir varsayılan ayar olarak önermeye devam etsem de bu yalnızca varsayılan ayardır. Nasıl müdahale edip varsayılan ayarları yükselteceğinizi öğrenmek için okumaya devam edin.
Parmak izi içeren URL'ler
Sitenizde sunulan öğelerin, resimlerin vb. adlarına dosyanın içeriğinin karmasını ekleyerek bu dosyaların her zaman benzersiz içeriklere sahip olmasını sağlayabilirsiniz. Bu işlem sonucunda, örneğin sitecode.af12de.js adlı dosyalar oluşturulur. Sunucunuz bu dosyalarla ilgili isteklere yanıt verdiğinde, son kullanıcılarınızı aşağıdaki başlıkla yapılandırarak tarayıcılarını uzun bir süre boyunca önbelleğe almaları için güvenli bir şekilde yönlendirebilirsiniz:
Cache-Control: max-age=31536000,immutable
Bu değer, saniye cinsinden bir yıldır. Spesifikasyona göre bu, "sonsuza kadar" ile aynıdır.
Bu karma oluşturma işlemlerini manuel olarak yapmayın. Bu işlem çok fazla manuel çalışma gerektirir. Bu konuda size yardımcı olması için Webpack, Rollup gibi araçları kullanabilirsiniz. Bu araçlar hakkında daha fazla bilgiyi Tooling Report'ta bulabilirsiniz.
Yalnızca JavaScript'in değil, simge, CSS ve diğer değişmez veri dosyaları gibi öğelerin de parmak izi URL'lerinden yararlanabileceğini unutmayın. (Siteniz değiştiğinde daha az kod yayınlamanıza olanak tanıyan kod bölme hakkında biraz daha bilgi edinmek için yukarıdaki videoyu izlemeyi unutmayın.)
Sitenizin önbelleğe almaya yaklaşımından bağımsız olarak, bu tür parmak izi içeren dosyalar oluşturabileceğiniz her site için son derece değerlidir. Çoğu site her sürümde değişmiyor.
Elbette, kullanıcılara yönelik "kullanıcı dostu" sayfalarımızı bu şekilde yeniden adlandıramayız: index.html dosyanızı index.abcd12.html olarak yeniden adlandırmak mümkün değildir. Kullanıcılara sitenizi her yüklediklerinde yeni bir URL'ye gitmelerini söyleyemezsiniz. Bu "kullanıcı dostu" URL'ler bu şekilde yeniden adlandırılamaz ve önbelleğe alınamaz. Bu da beni olası bir orta yol bulmaya yönlendiriyor.
Orta yol
Önbelleğe alma konusunda elbette bir orta yol vardır. Hiçbir zaman veya sonsuza kadar önbelleğe alma gibi iki uç seçenek sunuyoruz. Ayrıca, yukarıda bahsettiğim "kullanıcı dostu" URL'ler gibi bir süreliğine önbelleğe almak isteyebileceğiniz bazı dosyalar olacaktır.
Bu "kullanıcı dostu" URL'leri ve HTML'lerini önbelleğe almak istiyorsanız hangi bağımlılıklara sahip olduklarını, bunların nasıl önbelleğe alınabileceğini ve URL'lerinin bir süreliğine önbelleğe alınmasının sizi nasıl etkileyebileceğini göz önünde bulundurmanız gerekir. Aşağıdaki gibi bir resim içeren bir HTML sayfasına bakalım:
<img src="/images/foo.jpeg" loading="lazy" />
Bu gecikmeli yüklenmiş resmi silerek veya değiştirerek sitenizi günceller ya da değiştirirseniz sitenizi tekrar ziyaret eden kullanıcılar, HTML'nizin önbelleğe alınmış bir sürümünü görüntüledikleri için yanlış veya eksik bir resim görebilir. Bunun nedeni, sitenizi tekrar ziyaret ettiklerinde orijinal /images/foo.jpeg'yi hâlâ önbelleğe almalarıdır.
Dikkatli olursanız bu durum sizi etkilemeyebilir. Ancak genel olarak, sitenizin son kullanıcılarınız tarafından önbelleğe alındığında artık yalnızca sunucularınızda bulunmadığını unutmayın. Bunun yerine, son kullanıcınızın tarayıcılarına ait önbelleğe alınmış parçalar halinde bulunabilir.
Genel olarak, önbelleğe almayla ilgili çoğu kılavuzda bu tür ayarlardan bahsedilir. Örneğin, bir saat mi yoksa birkaç saat mi önbelleğe almak istediğiniz sorulur. Bu tür bir önbelleği ayarlamak için aşağıdaki gibi bir başlık kullanın (3.600 saniye veya bir saat boyunca önbelleğe alır):
Cache-Control: max-age=3600,immutable,public
Son bir nokta. Kullanıcıların genellikle yalnızca bir kez erişebileceği güncel içerikler (ör. haber makaleleri) oluşturuyorsanız bu içeriklerin hiçbir zaman önbelleğe alınmaması ve yukarıdaki makul varsayılan ayarımızı kullanmanız gerektiğini düşünüyorum. Kullanıcıların her zaman en yeni ve en iyi içerikleri (ör. bir haberdeki veya güncel bir etkinlikle ilgili kritik bir güncelleme) görmek istemesi yerine, önbelleğe alma özelliğinin değerini genellikle gereğinden fazla abarttığımızı düşünüyorum.
HTML olmayan seçenekler
HTML'nin yanı sıra, orta yerde bulunan dosyalar için diğer bazı seçenekler şunlardır:
Genel olarak başkalarını etkilemeyen öğeleri arayın
- Örneğin: HTML'nizin oluşturulma biçiminde değişikliklere neden olduğu için CSS'den kaçının
Güncel makalelerin parçası olarak kullanılan büyük resimler
- Kullanıcılarınız muhtemelen herhangi bir makaleyi birkaç defadan daha fazla ziyaret etmeyecektir. Bu nedenle fotoğrafları veya hero resimleri sonsuza kadar önbelleğe almayın ve depolama alanını boşa harcamayın
Kendisinin kullanım süresi olan bir öğeyi temsil eden öğe
- Hava durumuyla ilgili JSON verileri yalnızca saatte bir yayınlanabilir. Böylece önceki sonucu bir saat boyunca önbelleğe alabilirsiniz; bu veriler pencerenizde değişmez
- Açık kaynaklı bir projenin derlemeleri hız sınırlı olabilir. Bu nedenle, durumun değişebilmesi mümkün olana kadar derleme durumu görüntüsünü önbelleğe alın
Özet
Kullanıcılar sitenizi ikinci kez yüklediklerinde, zaten güven oyunu almış olursunuz. Geri dönüp sunduğunuz ürün veya hizmetin daha fazlasını elde etmek isterler. Bu noktada, her zaman yalnızca yükleme süresini kısaltmak söz konusu değildir. Tarayıcınızın hem hızlı hem de güncel bir deneyim sunmak için yalnızca gereken işlemleri yapmasını sağlamak için kullanabileceğiniz birçok seçenek vardır.
Önbelleğe alma, web'de yeni bir kavram olmasa da akıllıca bir varsayılan değere ihtiyaç duyabilir. Bu nedenle, bir varsayılan değer kullanmayı ve ihtiyaç duyduğunuzda daha iyi önbelleğe alma stratejilerini etkinleştirmeyi düşünün. Bu e-postayı okuduğunuz için teşekkür ederiz.
Aşağıdaki kaynakları da incelemenizi öneririz:
HTTP önbelleğiyle ilgili genel bir kılavuz için HTTP önbelleğiyle gereksiz ağ isteklerini önleme başlıklı makaleyi inceleyin.