Sitenizi ikinci kez yükleyen kullanıcılar HTTP önbelleklerini kullanırlar. Bu nedenle, sitenin doğru çalıştığından emin olun.
Bu yayın, Chrome Dev Summit 2020'de Genişletilmiş İçerik programının bir parçası olan Love your cache (Önbelleğinizi sevin) adlı videonun tamamlayıcısı niteliğindedir. Videoya göz atmayı unutmayın:
Kullanıcılar sitenizi ikinci kez yüklediklerinde tarayıcıları, sayfanın daha hızlı yüklenmesini sağlamak için HTTP önbelleğindeki kaynakları kullanır. Ancak web'de önbelleğe almayla ilgili standartlar 1999'a kadar geriye gitmektedir ve oldukça geniş bir şekilde tanımlanmıştır. CSS veya resim gibi bir dosyanın yeniden ağdan getirilip getirilmeyeceğinin, önbelleğinizden yüklenenlere kıyasla mı daha doğru sonuç verileceğini belirlemek biraz kesin olmayan bir bilimdir.
Bu yayında, önbelleğe alma için aslında hiç önbelleğe alma yapmayan, makul ve modern bir varsayılan yöntemden bahsedeceğim. Ama bu sadece varsayılan bir şey ve tabii ki "devre dışı bırakmak"tan daha incelikli. Devamını okuyun!
Hedefler
Bir site 2. kez yüklendiğinde iki hedefiniz olur:
- Kullanıcılarınızın mevcut en güncel sürümü aldığından emin olun. Değişiklik yaptıysanız, yaptığınız değişiklikler hemen
- Ağdan mümkün olduğunca az veri getirirken #1 yap
En genel anlamda, sitenizi tekrar yüklediklerinde müşterilerinize en küçük değişikliği göndermek istersiniz. Sitenizi herhangi bir değişikliğin en verimli şekilde dağıtılmasını sağlayacak şekilde yapılandırmak zordur (bu konu hakkında daha fazla bilgiyi aşağıda ve videoda bulabilirsiniz).
Bununla birlikte, önbelleğe almayı düşündüğünüzde başka düğmeleriniz de vardır. Belki de bir kullanıcının tarayıcısı HTTP önbelleğinin, sitenizde sunmak için hiçbir ağ isteğine gerek kalmayacak şekilde sitenizde uzun süre tutulmasına karar vermiş olabilirsiniz. Bir sitenin güncel olup olmadığını kontrol etmeden önce tamamen çevrimdışı olarak hizmet verecek bir hizmet çalışanı oluşturdunuz. Bu, geçerli olan ve çevrimdışı öncelikli uygulama gibi birçok web deneyimi için kullanılan uç bir seçenektir. Ancak web'in, yalnızca önbellek, hatta tamamen yalnızca ağa aşırı uçta olması gerekmez.
Arka plan
Web geliştiricileri olarak hepimiz "eski önbelleğin" olması fikrine alışkınız. Ancak, neredeyse içgüdüsel olarak bu sorunu çözecek araçların olduğunu biliyoruz: "tam yenileme" yapma, gizli pencere açma veya bir sitenin verilerini temizlemek için tarayıcınızın geliştirici araçlarının bazı kombinasyonlarını kullanma.
İnternet'teki normal kullanıcılar aynı lükse sahip değil. Dolayısıyla, kullanıcılarımızın ikinci yüklemelerinde iyi zaman geçirmelerini sağlamak gibi temel bazı hedeflerimiz olsa da kötü zaman yaşamadıklarından veya sıkışmadıklarından emin olmak da son derece önemlidir. (web.dev/live sitesinin neredeyse takıldığı durum hakkında konuşmamı isterseniz videoya göz atın!)
Temel olarak "eski önbellek" sorununun en yaygın nedenlerinden biri, aslında 1999 yılından kalma önbelleğe alma varsayılanıdır. Last-Modified üstbilgisine bağlıdır:
Yüklediğiniz her dosya, tarayıcınızın gördüğü şekilde geçerli ömrünün% 10'u kadar daha saklanır. Ö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, o zamanlar iyi planlanmış bir fikirdi, ancak günümüzün web sitelerinin tamamen entegre edilmiş doğası göz önünde bulundurulduğunda, bu varsayılan davranış, kullanıcının web sitenizin farklı sürümleri için tasarlanmış dosyalara sahip olduğu bir duruma (ör.Salı günkü sürümdeki JS ve Cuma günkü sürümdeki CSS) sahip bir duruma girmesinin mümkün olduğu anlamına geliyor. Bunun nedeni, söz konusu dosyaların tam olarak aynı anda güncellenmemesidir.
İyi aydınlatılmış yol
Önbelleğe alma için modern bir varsayılan yöntem, hiç önbelleğe alma yapmamak ve içeriğinizi kullanıcılarınıza yaklaştırmak için CDN'leri kullanmaktır. Bir kullanıcı, sitenizi her yüklediğinde, güncel olup olmadığını görmek için ağa gider. Bu istek, coğrafi olarak her son kullanıcıya yakın bir CDN tarafından sağlanacağı için düşük gecikme sağlar.
Web barındırıcınızı, web isteklerine yanıt verecek şekilde şu üst bilgiyi kullanarak yapılandırabilirsiniz:
Cache-Control: max-age=0,must-revalidate,public
Kısacası, dosyanın hiçbir zaman geçerli olmadığı ve tekrar kullanmadan önce ağdan doğrulamanız gerekir (aksi halde yalnızca "önerilir").
Bu doğrulama işlemi, aktarılan bayt bakımından nispeten ucuzdur. Büyük bir resim dosyası değişmediyse tarayıcınız küçük bir 304 yanıtı alır ancak kullanıcının bunu öğrenmek için yine de ağa gitmesi gerektiğinden gecikme maliyeti olur. Bu yaklaşımın en önemli dezavantajı ise budur. Bu özellik, birinci dünyada hızlı bağlantıya sahip olan ve tercih ettiğiniz CDN'nin geniş kapsama sahip olduğu yerlerde hızlı bağlantı kuran kişiler için gerçekten iyi çalışabilir, ancak daha yavaş mobil bağlantılara sahip olan veya kötü altyapı kullanan kişiler için uygun değildir.
Ne olursa olsun bu, popüler bir CDN olan Netlify'da varsayılan olan ancak neredeyse tüm CDN'lerde yapılandırılabilen modern bir yaklaşımdır. 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"
}
}
]
Dolayısıyla, bunu mantıklı bir varsayılan yöntem olarak öneriyorum, ancak varsayılan ayar bu. Nasıl devreye gireceğinizi ve varsayılanları nasıl yükselteceğinizi öğrenmek için okumaya devam edin.
Parmak izi kullanılan URL'ler
Sitenizde sunulan öğeler, resimler ve diğer öğelerin adlarına dosya içeriğinin bir karmasını ekleyerek bu dosyaların her zaman benzersiz içeriğe sahip olmasını sağlayabilirsiniz. Bu, örneğin sitecode.af12de.js adlı dosyaların gösterilmesine neden olur. Sunucunuz bu dosyalar için yapılan isteklere yanıt verdiğinde, son kullanıcılarınızın tarayıcılarına dosyaları şu başlıkla yapılandırarak bunları uzun bir süre önbelleğe almalarını güvenli bir şekilde söyleyebilirsiniz:
Cache-Control: max-age=31536000,immutable
Bu değer, yıl cinsinden saniyedir. Spesifikasyona göre bu, "sonsuza kadar" anlamına gelir.
Önemli bir nokta, bu karmaları elle oluşturmayın. Bu, çok fazla manuel iş gerektirir. Bu konuda size yardımcı olması için Webpack ve Rollup gibi araçları kullanabilirsiniz. Araç Raporu konusunda bu ayrıntılarla ilgili daha fazla bilgi edinin.
Parmak izi içeren URL'lerden yalnızca JavaScript'in yararlanamayacağını unutmayın. Simgeler, CSS ve diğer sabit veri dosyaları gibi öğelerin de bu şekilde adlandırılabileceğini unutmayın. (Siteniz her değiştiğinde daha az kod göndermenize olanak tanıyan kod bölme hakkında daha fazla bilgi edinmek için yukarıdaki videoyu izlemeyi unutmayın.)
Sitenizin önbelleğe alma yaklaşımı ne olursa olsun, bu tür dijital parmak izi dosyaları, oluşturduğunuz her site için son derece değerlidir. Çoğu site her sürümde değişmiyor.
Elbette kullanıcı dostu, 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ğil. Sitenizi her yüklediklerinde kullanıcılara yeni bir URL'ye gitmelerini söyleyemezsiniz. Bu "uygun" URL'ler bu şekilde yeniden adlandırılamaz ve önbelleğe alınamaz. Bu da beni olası bir orta yola yönlendirir.
Orta yol
Önbelleğe alma söz konusu olduğunda orta bir nokta vardır. İki uç seçenek sundum: hiçbir zaman önbelleğe alma veya sonsuza kadar önbellek. Ayrıca, yukarıda bahsettiğim "uygun" URL'ler gibi bir süreliğine önbelleğe almak isteyebileceğiniz bir dizi dosya olacaktır.
Bu "uygun" URL'leri ve HTML'lerini önbelleğe almak istemiyorsanız hangi bağımlılıkları içerdiklerini, bunların nasıl önbelleğe alınabileceğini ve URL'lerini bir süreliğine önbelleğe almanın sizi nasıl etkileyebileceğini göz önünde bulundurmaya değer. Şunun gibi bir resim içeren bir HTML sayfasına bakalım:
<img src="/images/foo.jpeg" loading="lazy" />
Bu geç yüklenen resmi silerek veya değiştirerek sitenizi günceller ya da değiştirirseniz HTML'nizin önbelleğe alınmış bir sürümünü görüntüleyen kullanıcılar, sitenizi yeniden ziyaret ettiklerinde orijinal /images/foo.jpeg öğesini önbelleğe almaya devam ettikleri için yanlış veya eksik bir resim alabilirler.
Dikkatli olursanız bu durum sizi etkilemeyebilir. Ancak genel olarak, son kullanıcılarınız tarafından önbelleğe alınan sitenizin artık yalnızca sizin sunucularınızda olmadığını unutmamak önemlidir. Daha ziyade, son kullanıcılarınızın tarayıcılarının önbelleklerinde bulunan parçalar halinde olabilir.
Önbelleğe alma hakkındaki çoğu rehberde genel olarak bu tür bir ayardan bahsedilir. Örneğin, bir saat mi, birkaç saat mi önbelleğe almak istersiniz? Bu tür bir önbellek oluşturmak için aşağıdaki gibi bir başlık kullanın (3.600 saniye veya bir saat süreyle önbelleğe alınır):
Cache-Control: max-age=3600,immutable,public
Son bir nokta. Normalde kullanıcıların (haber makaleleri gibi) yalnızca bir erişebildiği uygun içerikler oluşturuyorsanız, bunların hiçbir zaman önbelleğe alınmaması gerektiğini düşünüyorum. Bu durumda makul varsayılan seçeneğimizi kullanmalısınız. Önbelleğe almanın değerini genellikle, bir haber hikayesi veya güncel olayla ilgili bir eleştirel güncelleme gibi bir kullanıcının her zaman en yeni ve en iyi içeriği görme isteği yerine hafife alıyoruz.
HTML olmayan seçenekler
HTML'nin yanı sıra, orta alanda bulunan dosyalar için diğer bazı seçenekler şunlardır:
Genel olarak, başkalarını etkilemeyen öğeler bulmaya çalışın.
- Örneğin: HTML'nizin oluşturulma biçiminde değişikliklere neden olabileceğinden CSS'den kaçının.
Güncel makalelerin parçası olarak kullanılan büyük resimler
- Kullanıcılarınız muhtemelen birkaç defadan fazla tek bir makaleyi ziyaret etmeyecektir, bu nedenle fotoğrafları veya hero resimleri sonsuza kadar önbelleğe almayın ve israf yaratın
Ömür boyu geçerli olan bir şeyi temsil eden öğe
- Hava durumuyla ilgili JSON verileri yalnızca saatte bir yayınlanabilir. Bu nedenle önceki sonucu bir saat süreyle önbelleğe alabilirsiniz. Bu veriler pencerenizde değişmez.
- Açık kaynaklı projelerin derlemelerinde hız sınırlaması olabilir. Bu nedenle, derleme durumu görüntüsünü durumun değişebileceği zamana kadar önbelleğe alın
Özet
Kullanıcılar sitenizi ikinci kez yüklediklerinde, size zaten bir güven oyunu vardır. Geri dönüp sunduğunuz ürün veya hizmetlerden daha fazlasını almak isterler. Bu noktada, önemli olan her zaman yükleme süresini kısaltmak değildir ve tarayıcınızın hem hızlı hem de güncel bir deneyim sunmak için yalnızca ihtiyacı olan işi yapmasını sağlamak üzere kullanabileceğiniz bir dizi seçeneğiniz vardır.
Önbelleğe alma web'de yeni bir kavram olmasa da makul bir varsayılan ayar gerekebilir. İhtiyaç duyduğunuzda bir tane kullanmayı ve daha iyi önbelleğe alma stratejilerini güçlü bir şekilde etkinleştirmeyi düşünün. Okuduğunuz için teşekkür ederiz!
Aşağıdaki kaynakları da incelemenizi öneririz:
HTTP önbelleği hakkında genel bir kılavuz için HTTP Önbelleği ile gereksiz ağ isteklerini önleme bölümüne bakın.