Sitenizi ikinci kez yükleyen kullanıcılar HTTP önbelleğini kullanır. Bu nedenle, önbelleğin düzgün çalıştığından emin olun.
Bu gönderi, Chrome Dev Summit 2020'deki Genişletilmiş İçerik kapsamındaki Önbelleğinizi sevin videosunun tamamlayıcısıdır. Videoya göz atmayı unutmayı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 "kapatma"dan daha incelikli bir işlemdir. Devamını okuyun.
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, sitenizi tekrar yüklediklerinde müşterilerinize 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. Ya da sitenin güncel olup olmadığını kontrol etmeden önce siteyi tamamen çevrimdışı olarak yayınlayan bir hizmet çalışanı oluşturmuş olabilirsiniz. Bu, geçerli olan ve birçok çevrimdışı öncelikli uygulama benzeri web deneyiminde kullanılan uç bir seçenektir. Ancak web'in yalnızca önbelleğe dayalı veya tamamen yalnızca ağa dayalı olması gerekmez.
Arka plan
Web geliştiricileri olarak hepimiz "güncel olmayan önbelleğe" sahip olma fikrine alışığı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. Bu nedenle, kullanıcılarımızın 2. yüklemelerinde keyifli bir deneyim yaşamalarını sağlamak gibi temel hedeflerimiz olsa da kötü bir deneyim yaşamamaları veya takılmamaları da çok önemlidir. (web.dev/live sitesini neredeyse nasıl kilitlediğimizden bahsetmek isterseniz videoya göz atın.)
"Çökmüş önbelleğe" neden olan en yaygın faktör, 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üğü mevcut ömrünün% 10'u kadar daha saklanır. Örneğin, index.html bir ay önce oluşturulduysa tarayıcı 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 ana makinenizi, web isteklerine bu 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ığı ve tekrar kullanabilmek için ağdan doğrulamanız gerektiği anlamına gelir (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 kullanıcının bunu öğrenmek için ağa gitmesi gerektiğinden gecikme maliyeti vardı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 firebase.json dosyanızın barındırma bölümüne şu başlığı 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, örneğin sitecode.af12de.js adlı dosyalara neden olur. Sunucunuz bu dosyalarla ilgili isteklere yanıt verirken, son kullanıcınızın tarayıcılarına bu dosyaları uzun süre önbelleğe almaları için güvenli bir şekilde talimat verebilirsiniz. Bunun için tarayıcıları şu üstbilgeyle yapılandırabilirsiniz:
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ızı sağlayan kod bölme hakkında daha fazla 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 orta yol bulmak elbette mümkün. 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 kritik bir güncelleme veya güncel bir etkinlik) görmek istemesi karşısında, ö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 düzeyde bulunan dosyalar için diğer seçenekler şunlardır:
Genel olarak, diğer öğeleri 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 bir makaleyi birkaç kereden fazla ziyaret etmeyecek. Bu nedenle, fotoğrafları veya hero resimlerini sonsuza kadar önbelleğe alarak depolama alanında yer kaplamayın.
Kendisinin kullanım süresi olan bir öğeyi temsil eden öğe
- Hava durumuyla ilgili JSON verileri yalnızca saatte bir yayınlanabilir. Bu nedenle, önceki sonucu bir saat boyunca önbelleğe alabilirsiniz. Bu sonuç, pencerenizde değişmez.
- Açık kaynak projenin derlemeleri hız sınırlı olabilir. Bu nedenle, durum değişene kadar derleme durumu resmini önbelleğe alın.
Özet
Kullanıcılar sitenizi ikinci kez yüklediğinde, güvenlerini kazanmışsınız demektir. Tekrar gelip sunduğunuz hizmetlerden daha fazla yararlanmak 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.