Bu gönderi, Önbelleğinizi sevin video, Chrome Dev Summit 2020’deki Genişletilmiş İçeriğin bir parçası. Videoya göz atmayı unutmayın:
Kullanıcılar sitenizi ikinci kez yüklediğinde, tarayıcıları bu yüklemeyi hızlandırmaya yardımcı olmak için HTTP önbelleğindeki kaynakları kullanır. Ancak web’de önbelleğe alma standartları 1999’a kadar uzanıyor ve oldukça geniş bir şekilde tanımlanmışlar; CSS veya görüntü gibi bir dosyanın ağdan mı getirileceğini yoksa önbellekten mi yükleneceğini belirlemek biraz hatalı bir bilimdir.
Bu gönderide, önbelleğe alma için makul, modern bir varsayılandan bahsedeceğim; hiç önbelleğe alma yok. Ancak bu yalnızca varsayılandır ve elbette “kapatmaktan” daha inceliklidir. Okumaya devam etmek!
Hedefler #
Bir site 2. kez yüklendiğinde iki hedefiniz vardır:
- Kullanıcılarınızın mevcut olan en güncel sürümü aldığından emin olun; bir şeyi değiştirdiyseniz, bu hızlı bir şekilde yansıtılmalıdır.
- Ağdan mümkün olduğunca az şey getirirken 1 numarayı yapın
En geniş anlamda, müşterilerinize sitenizi tekrar yüklediklerinde yalnızca en küçük değişikliği göndermek istersiniz. Ve herhangi bir değişikliğin en verimli dağıtımını sağlamak için sitenizi yapılandırmak zordur (bununla ilgili daha fazlası aşağıda ve videoda).
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ı HTTP önbelleğinin sitenizde uzun süre kalmasına izin vermeye karar verdiniz, böylece siteye hizmet etmek için hiçbir ağ isteğine gerek kalmaz. Veya güncel olup olmadığını kontrol etmeden önce bir siteye tamamen çevrimdışı hizmet verecek bir hizmet çalışanı oluşturdunuz. Bu uç bir seçenektir ve geçerli olup birçok çevrimdışı öncelikli uygulama benzeri web deneyimi için kullanılır, ancak web’in yalnızca önbellek uç noktasında veya hatta tamamen yalnızca ağ uç noktasında olması gerekmez.
Arka plan #
Web geliştiricileri olarak hepimiz “eski bir önbelleğe” sahip olma fikrine alışkınız. Ancak, neredeyse içgüdüsel olarak, bunu çözmek için mevcut araçları biliyoruz: “sert bir yenileme” yapın veya bir gizli pencere açın veya bir sitenin verilerini temizlemek için tarayıcınızın geliştirici araçlarının bir kombinasyonunu kullanın.
İnternetteki normal kullanıcılar aynı lükse sahip değil. Bu nedenle, kullanıcılarımızın 2. yüklemelerinde iyi vakit geçirmelerini sağlamak gibi bazı temel hedeflerimiz olsa da, aynı zamanda Kötü zaman ya da sıkışıp kal. (web.dev/live sitesini neredeyse nasıl kapatacağımız hakkında konuşmamı dinlemek istiyorsanız videoyu izleyin!)
Biraz arka plan için, “eski önbellek” için gerçekten yaygın bir neden, aslında önbelleğe alma için 1999 dönemi varsayılanıdır. şuna dayanır: Last-Modified başlık:
Yüklediğiniz her dosya, tarayıcınızın gördüğü şekliyle mevcut kullanım süresinin ek %10’u kadar tutulur. Örneğin, eğer 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 niyetli bir fikirdi, ancak günümüzün web sitelerinin sıkı bir şekilde entegre edilmiş doğası göz önüne alındığında, bu varsayılan davranış, bir kullanıcının web sitenizin farklı sürümleri için tasarlanmış dosyalara (örneğin, Salı günkü sürümden JS ve Cuma günkü sürümden CSS) sahip olduğu bir duruma geçmesinin mümkün olduğu anlamına gelir, çünkü bu dosyalar tam olarak aynı anda güncellenmemiştir.
İyi aydınlatılmış yol #
Önbelleğe alma için modern bir varsayılan, aslında 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. Her son kullanıcıya coğrafi olarak yakın bir CDN tarafından sağlanacağından, bu istek düşük gecikme süresine sahip olacaktır.
Web barındırıcınızı bu başlıkla web isteklerine yanıt verecek şekilde yapılandırabilirsiniz:
Cache-Control: max-age=0,must-revalidate,public
Bu temelde diyor ki; dosya hiçbir zaman geçerli değildir ve tekrar kullanabilmeniz için onu ağdan doğrulamanız gerekir (aksi takdirde yalnızca “önerilir”).
Bu doğrulama işlemi, aktarılan bayt sayısı açısı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 bunun maliyeti vardır gecikme bir kullanıcının öğrenmek için yine de ağa gitmesi gerektiği için. Ve bu, bu yaklaşımın birincil dezavantajıdır. 1. dünyada hızlı bağlantıları olan ve seçtiğiniz CDN’nizin geniş kapsama alanına sahip olduğu yerlerde gerçekten işe yarayabilir, ancak daha yavaş mobil bağlantılara sahip olan veya zayıf altyapı kullanan kişiler için olmayabilir.
Ne olursa olsun, bu modern bir yaklaşımdır. popüler bir CDN olan Netlify’da varsayılandır, ancak neredeyse tüm CDN’lerde yapılandırılabilir. Firebase Barındırma için bu başlığı dahil edebilirsiniz barındırma bölümünde firebase.json dosyanızın:
"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 yüzden, bunu makul bir varsayılan olarak önermeme rağmen, yalnızca bu—varsayılan! Nasıl devreye gireceğinizi ve varsayılanları nasıl yükselteceğinizi öğrenmek için okumaya devam edin.
Parmak izli URL’ler #
Sitenizde sunulan varlıkların, resimlerin vb. adlarına dosya içeriğinin bir karmasını ekleyerek, bu dosyaların her zaman benzersiz içeriğe sahip olmasını sağlayabilirsiniz; sitecode.af12de.js Örneğin. Sunucunuz bu dosyalara yönelik isteklere yanıt verdiğinde, son kullanıcılarınızın tarayıcılarını bu başlıkla yapılandırarak onları uzun süre önbelleğe almalarını güvenle sağlayabilirsiniz:
Cache-Control: max-age=31536000,immutable
Bu değer, saniye cinsinden bir yıldır. Spesifikasyona göre, bu fiilen “sonsuza kadar” eşittir.
Daha da önemlisi, bu karmaları elle oluşturmayın; bu çok fazla el işidir! Bu konuda size yardımcı olması için Webpack, Rollup ve benzeri araçları kullanabilirsiniz. Onlar hakkında daha fazlasını okuduğunuzdan emin olun. Takım Raporu.
Parmak izli URL’lerden yalnızca JavaScript’in yararlanamayacağını unutmayın; simgeler, CSS ve diğer değişmez veri dosyaları gibi varlıklar da bu şekilde adlandırılabilir. (Siteniz her değiştiğinde daha az kod göndermenizi sağlayan kod bölme hakkında biraz daha fazla bilgi edinmek için yukarıdaki videoyu izlediğinizden emin olun.)
Sitenizin önbelleğe alma yaklaşımı ne olursa olsun, bu tür parmak izli dosyalar, oluşturabileceğiniz herhangi bir site için inanılmaz derecede değerlidir. Çoğu site her sürümde değişmiyor.
Elbette, ‘dost’, kullanıcılara yönelik sayfalarımızı şu şekilde yeniden adlandıramayız: index.html dosyalamak index.abcd12.html— bu mümkün değil, kullanıcılara sitenizi her yüklediklerinde yeni bir URL’ye gitmelerini söyleyemezsiniz! Bu ‘dost’ URL’ler bu şekilde yeniden adlandırılamaz ve önbelleğe alınamaz, bu da beni olası bir orta yola yönlendiriyor.
orta zemin #
Önbelleğe alma söz konusu olduğunda, belli ki bir orta yol için yer var. İki aşırı seçenek sundum; önbellek Aslaveya önbellek sonsuza kadar. Ve yukarıda bahsettiğim “dost” URL’ler gibi bir süreliğine önbelleğe almak isteyebileceğiniz bir dizi dosya olacaktır.
Bu “dost” URL’leri ve HTML’lerini önbelleğe almak istiyorsanız, hangi bağımlılıkları içerdiklerini, nasıl içerdiklerini düşünmeye değer. Onlar önbelleğe alınabilir ve URL’lerini bir süre önbelleğe almanın sizi nasıl etkileyebileceğini öğrenin. Bunun 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 veya değiştirirseniz, HTML’nizin önbelleğe alınmış bir sürümünü görüntüleyen kullanıcılar, orijinali hâlâ önbelleğe aldıkları için yanlış veya eksik bir resim alabilirler. /images/foo.jpeg sitenizi tekrar ziyaret ettiklerinde.
Dikkatli olursanız, bu 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ı hatırlamak önemlidir. Aksine, içinde var olabilir parçalar son kullanıcınızın tarayıcılarının önbelleklerinde.
Genel olarak, önbelleğe almayla ilgili çoğu kılavuz bu tür bir ayar hakkında konuşacaktır – bir saat mi, birkaç saat mi önbelleğe almak istiyorsunuz, vb. Bu tür bir önbelleği ayarlamak için şuna benzer bir başlık kullanın (3600 saniye veya bir saat önbelleğe alınır):
Cache-Control: max-age=3600,immutable,public
Son bir nokta. Haber makaleleri gibi, kullanıcıların genellikle yalnızca bir kez erişebileceği zamanında içerik oluşturuyorsanız, bence bunlar asla önbelleğe alınmamalı ve yukarıdaki mantıklı varsayılanımızı kullanmalısınız. Önbelleğe almanın değerini, bir kullanıcının her zaman en son ve en harika içeriği, örneğin bir haber veya güncel olayla ilgili kritik bir güncelleme gibi görme isteğine göre abarttığımızı düşünüyorum.
HTML olmayan seçenekler #
HTML’nin yanı sıra, orta zeminde yaşayan dosyalar için diğer bazı seçenekler şunları içerir:
-
Genel olarak, başkalarını etkilemeyen varlıkları arayın
- Örneğin: HTML’nizin işlenme biçiminde değişikliklere neden olduğundan CSS’den kaçının
-
Güncel makalelerin bir parçası olarak kullanılan büyük resimler
- Kullanıcılarınız muhtemelen herhangi bir makaleyi birkaç defadan fazla ziyaret etmeyecektir, bu nedenle fotoğrafları veya kahraman görsellerini sonsuza kadar önbelleğe alıp depolama alanını boşa harcamayın.
-
Kendisinin ömrü olan bir şeyi temsil eden bir varlık
- Hava durumuyla ilgili JSON verileri yalnızca saatte bir yayınlanabilir, bu nedenle önceki sonucu bir saat boyunca önbelleğe alabilirsiniz; bu, pencerenizde değişmez
- Açık kaynaklı bir projenin derlemeleri hız sınırlı olabilir, bu nedenle, durumun değişebileceği olası olana kadar bir yapı durumu görüntüsünü önbelleğe alın
Özet #
Kullanıcılar sitenizi ikinci kez yüklediklerinde, zaten bir güven oyu almış olursunuz; geri gelip sunduklarınızdan daha fazlasını almak isterler. Bu noktada, her zaman sadece yükleme süresini kısaltmakla ilgili değildir ve tarayıcınızın hem hızlı hem de güncel bir deneyim sunmak için yalnızca ihtiyaç duyduğu işi yapmasını sağlamak için kullanabileceğiniz birçok seçeneğiniz vardır.
Önbelleğe alma, web’de yeni bir kavram değildir, ancak belki de makul bir varsayılana ihtiyaç duyar; birini kullanmayı ve ihtiyaç duyduğunuzda daha iyi önbelleğe alma stratejilerini kesinlikle kullanmayı düşünün. Okuduğunuz için teşekkürler!
Ayrıca bakınız #
HTTP önbelleği hakkında genel bir kılavuz için, HTTP Önbelleği ile gereksiz ağ isteklerini önleme konusuna bakın.