Son birkaç modülde, JavaScript'in yüklenmesini erteleme ve resimler ile <iframe> öğelerinin geç yüklenmesi gibi kavramları keşfettiniz.
Kaynak yüklemesini ertelemek, kaynakları önceden yüklemek yerine ihtiyaç duyuldukları noktada indirerek ilk sayfa yükleme sırasında ağ ve CPU kullanımını azaltır. Böylece, kaynaklar kullanılmayabilir.
Bu, ilk sayfa yükleme sürelerini iyileştirebilir ancak sonraki etkileşimlerde, güç sağlamak için gereken kaynaklar oluştukları anda yüklenmemişse gecikme yaşanabilir.
Örneğin, bir sayfada özel bir tarih seçici varsa kullanıcı öğeyle etkileşim kurana kadar tarih seçicinin kaynaklarını erteleyebilirsiniz. Bununla birlikte, tarih seçicinin kaynaklarının istek üzerine yüklenmesi, kaynaklar indirilene, ayrıştırılana ve çalıştırılmaya hazır olana kadar bir gecikmeye (kullanıcının ağ bağlantısına, cihaz özelliklerine veya her ikisine bağlı olarak) biraz gecikmeyle sonuçlanabilir.
Bu, dikkat edilmesi gereken bir noktadır. Kullanılmayan kaynakları yükleyerek bant genişliğini boşa harcamak istemezsiniz ancak etkileşimlerin ve sonraki sayfa yüklemelerinin gecikmesi de ideal olmayabilir. Neyse ki bu iki uç nokta arasında daha iyi bir denge kurmak için kullanabileceğiniz pek çok araç vardır. Bu modülde, bu uç noktalar arasında denge kurmak için kullanabileceğiniz bazı teknikler (ör. kaynakları önceden getirme, sayfaların tamamını önceden oluşturma ve bir hizmet çalışanı kullanarak önceden önbelleğe alma) ele almaktadır.
Yakın gelecekte ihtiyaç duyulan kaynakları düşük öncelikte önceden getirin
<link rel="prefetch"> kaynak ipucunu kullanarak resimler, stil sayfaları veya JavaScript kaynakları dahil olmak üzere kaynakları önceden getirmek mümkündür. prefetch ipucu, tarayıcıya bir kaynağın yakın gelecekte gerekli olabileceği bilgisini verir.
prefetch ipucu belirtildiğinde tarayıcı, geçerli sayfa için gereken kaynaklarla rekabet etmekten kaçınmak amacıyla en düşük öncelikte bu kaynak için bir istek başlatabilir.
Kaynakların önceden yüklenmesi, kullanıcı deneyimini iyileştirebilir. Çünkü bu kaynaklar, ihtiyaç duyulduğu anda disk önbelleğinden anında alınabilir. Bu nedenle, kullanıcının yakın gelecekte indirilecek kaynakları beklemesi gerekmez.
<head>
<!-- ... -->
<link rel="prefetch" as="script" href="/date-picker.js">
<link rel="prefetch" as="style" href="/date-picker.css">
<!-- ... -->
</head>
Önceki HTML snippet'i, tarayıcıya boşta kaldığında date-picker.js ve date-picker.css öğelerini önceden getirebileceğini bildirir. Kullanıcı JavaScript'te sayfayla etkileşimde bulunurken kaynakları dinamik olarak da önceden getirmek de mümkündür.
prefetch, Safari hariç tüm modern tarayıcılarda desteklenir. Safari'de de bu işlev bir bayrak arkasında bulunur. Web sitenizin kaynaklarını tüm tarayıcılarda çalışacak şekilde öncelikli olarak yüklemeniz gerekiyorsa ve bir Service Worker kullanıyorsanız bu modülün ilerleyen bölümlerinde, hizmet çalışanı kullanarak kaynakları önbelleğe alma hakkındaki bölümü okuyun.
Gelecekteki gezinmeleri hızlandırmak için sayfaları önceden getirin
Bir sayfayı ve tüm alt kaynaklarını, HTML belgesine işaret ederken as="document" özelliğini belirterek de önceden getirmek de mümkündür:
<link rel="prefetch" href="/page" as="document">
Tarayıcı boşta kaldığında, /page için düşük öncelikli bir istek başlatabilir.
Chromium tabanlı tarayıcılarda, Speculation rules API'yi kullanarak dokümanları önceden getirebilirsiniz. Spekülasyon Kuralları, sayfanın HTML'sine dahil edilen veya JavaScript aracılığıyla dinamik olarak eklenen bir JSON nesnesi olarak tanımlanır:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
JSON nesnesi, şu anda yalnızca prefetch ve prerender işlemlerini destekleyen bir veya daha fazla işlemi ve bu işlemle ilişkilendirilen URL'lerin listesini tanımlar. Önceki HTML snippet'inde tarayıcıya /page-a ve /page-b öğelerini önceden getirmesi talimatı verilir. <link rel="prefetch"> ile benzer şekilde, spekülasyon kuralları tarayıcının belirli durumlarda yok sayabileceği bir ipucudur.
Hızlı Bağlantı gibi kitaplıklar, sayfa bağlantılarını kullanıcının görüntü alanında görünür hale geldikten sonra dinamik bir şekilde önceden getirerek veya önceden oluşturarak sayfa gezinmelerini iyileştirir. Bu, sayfadaki tüm bağlantıların önceden getirilmesine kıyasla kullanıcının sonunda o sayfaya gitme olasılığını artırır.
Sayfaları önceden oluşturma
Kaynakları önceden getirmenin yanı sıra, tarayıcıya sayfayı kullanıcı gitmeden önce önceden oluşturması için ipucu vermek de mümkündür. Bu sayede, sayfa ve kaynakları arka planda getirilip işlendiğinden sayfa neredeyse anında yüklenir. Kullanıcı sayfaya gittiğinde, sayfa ön plana yerleştirilir.
Önceden oluşturma, Speculation Kuralları API'si aracılığıyla desteklenir:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
Önceden getirme ve önceden işleme demoları
Hizmet çalışanı önbelleğine alma
Hizmet çalışanı kullanarak kaynakları kurgusal olarak önceden getirmek de mümkündür.
Hizmet çalışanı önbelleğine alma özelliği, Cache API'yi kullanarak kaynakları getirebilir ve kaydedebilir. Böylece tarayıcının, ağa gitmeden Cache API'yi kullanarak isteği sunmasına izin verilir. Hizmet çalışanı önbelleğine alma, yalnızca önbellek stratejisi olarak bilinen çok etkili bir hizmet çalışanı önbelleğe alma stratejisi kullanır. Bu kalıp son derece etkilidir çünkü kaynaklar hizmet çalışanı önbelleğine yerleştirildikten sonra, istek üzerine neredeyse anında getirilir.
Bir hizmet çalışanı kullanarak kaynakları önbelleğe almak için Workbox'ı kullanabilirsiniz. Ancak isterseniz önceden belirlenmiş bir dosya grubunu önbelleğe almak için kendi kodunuzu yazabilirsiniz. Kaynakları önbelleğe almak için bir hizmet çalışanı kullanmaya karar verirken her iki durumda da önbelleğe almanın hizmet çalışanı yüklendiğinde gerçekleştiğini bilmeniz önemlidir. Yükleme işleminden sonra, önbelleğe alınan kaynaklar daha sonra Service Worker'ın web sitenizde kontrol ettiği herhangi bir sayfada geri alınabilir.
Çalışma kutusu, hangi kaynakların önceden önbelleğe alınması gerektiğini belirlemek için bir ön önbellek manifesti kullanır. Önbellek manifesti, önceden önbelleğe alınacak kaynaklar için "doğruluk kaynağı" olarak işlev gören dosyaların ve sürüm oluşturma bilgilerinin bir listesidir.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Önceki kod, iki dosya içeren bir örnek manifesttir: script.ffaa4455.js ve /index.html. Bir kaynak, dosyanın kendisinde sürüm bilgisi içeriyorsa (dosya karması olarak bilinir) revision özelliği, dosyanın zaten sürümü oluşturulmuş olduğundan (örneğin, önceki kodda script.ffaa4455.js kaynağı için ffaa4455) null olarak bırakılabilir. Sürümü kaldırılmış kaynaklar için derleme sırasında bir düzeltme oluşturulabilir.
Hizmet çalışanı, kurulumdan sonra sonraki sayfada gezinmeleri hızlandırmak amacıyla statik sayfaları veya bunların alt kaynaklarını önbelleğe almak için kullanılabilir.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Örneğin, bir e-ticaret ürün listeleme sayfasında, ürün ayrıntıları sayfasını oluşturmak için gereken CSS ve JavaScript'i önceden önbelleğe almak amacıyla bir hizmet çalışanı kullanılabilir. Böylece, ürün ayrıntıları sayfasına gitmek çok daha hızlı hale gelir. Önceki örnekte product-page.ac29.css ve product-page.39a1.js verileri ön belleğe alınmış. workbox-precaching ürününde bulunan precacheAndRoute yöntemi, önceden önbelleğe alınan kaynakların gerektiğinde Service Worker API'den getirilmesi için gereken işleyicileri otomatik olarak kaydeder.
Hizmet çalışanları yaygın olarak desteklendiğinden, durumun gerektirdiği tüm modern tarayıcılarda önbelleğe alma özelliğini kullanabilirsiniz.
Bilginizi test etme
prefetch ipucu hangi öncelikte gerçekleşir?
Bir sayfayı önceden getirmek ile önceden oluşturmak arasındaki fark nedir?
Hizmet çalışanı önbelleği ile HTTP önbelleği aynıdır.
Sıradaki: Web çalışanlarına genel bakış
Artık önceden getirme, önceden oluşturma ve hizmet çalışanı önceden önbelleğe almanın, gelecekteki sayfalara yönelik gezinmeleri hızlandırmak söz konusu olduğunda ne kadar yararlı olabileceğini bildiğinize göre, bunun web siteniz ve kullanıcıları için ne kadar faydalı olabileceğine dair bilgiye dayalı kararlar alabilirsiniz.
Sonraki bölümde, web çalışanlarına genel bir bakış sunulmuştur ve bunların, ana iş parçacığındaki pahalı işleri çıkarıp ana iş parçacığına kullanıcı etkileşimleri için nasıl daha fazla alan bırakabileceği ile ilgili bilgi verilmektedir. Ana iş parçacığına daha fazla alan sağlamak için ne yapabileceğinizi hiç düşündüyseniz sonraki iki modül zaman ayırmaya değer!