Son birkaç modülde, projeyi ertelemek
JavaScript'in ve resimlerin ve <iframe> öğelerinin geç yüklenmesi.
Kaynak yüklemesini ertelemek, ilk deneme sırasında ağ ve CPU kullanımını azaltır
kaynakları ihtiyaç duyulduğu anda indirerek sayfa yüklenir.
önden yüklemek yerine, daha sonra
kullanılmaya başlayabilecek.
Bu, ilk sayfa yükleme sürelerini iyileştirebilir ancak sonraki etkileşimlere neden olabilir.
güç kaynağı için gereken kaynaklar o sırada henüz yüklenmemişse
bunları görebilirsiniz.
Örneğin, bir sayfada özel tarih seçici varsa tarihi erteleyebilirsiniz. kullanıcı öğeyle etkileşime geçene kadar seçicinin kaynaklarını kullanır. Ancak yükleniyor Tarih seçicinin kaynakları isteğe bağlı olarak biraz gecikmelere neden olabilir Kullanıcının ağ bağlantısına, cihaz özelliklerine veya Her ikisi de (kaynaklar indirilene, ayrıştırılana ve yürütmeye hazır olana kadar).
Bu biraz zor bir dengedir; uygulamanızı yükleyerek bant genişliğinizi boşa harcamanızı istemezsiniz ancak etkileşimleri ve sonraki sayfayı geciktiren kaynaklar yüklemeler de ideal olmayabilir. Neyse ki, projenizi tamamlamak için arasında daha iyi bir denge kurmak için kullanabileceğiniz bir araçtır. Bu modülde bu hedefe ulaşmak için kullanabileceğiniz bazı teknikler (ör. kaynakları önceden getirmek, Tüm sayfaları önceden işleme ve hizmet çalışanı kullanarak kaynakları önbelleğe alma.
Yakın gelecekte gereken kaynakları düşük öncelikte önceden getirin
Resimler, stil sayfaları, veriler ve kaynakları içeren kaynakları,
veya JavaScript kaynakları için <link rel="prefetch"> kaynak ipucunu kullanın. İlgili içeriği oluşturmak için kullanılan
prefetch ipucu tarayıcıya, şurada bir kaynağın gerekli olabileceğini bildirir:
teslim etmeyi öğreteceğim.
Bir prefetch ipucu belirtildiğinde, tarayıcı bir istek başlatabilir
Kaynaklarla rekabet etmekten kaçınmak için o kaynağa en düşük öncelikteki kaynak için
emin olmanız gerekir.
Kaynakları önceden getirmek, kullanıcı deneyimini iyileştirmek için yakın gelecekte gerekli kaynakların indirilmesini beklemek zorunda bu dosyalar, ihtiyaç anında disk önbelleğinden anında alınabilir.
<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 önceden getirebileceği bilgisini verir
Boşta kaldığında date-picker.js ve date-picker.css. Ayrıca,
Kullanıcı sayfayla etkileşimde bulunurken kaynakları dinamik olarak önceden getirmek için
JavaScript'e dokunun.
prefetch, Safari dışında tüm modern tarayıcılarda desteklenir
herkes tarafından görüntülenebilir. Öncelikle yükleme işlemi için
ve tüm tarayıcılarda çalışır şekilde çalışır ve
bilgi edinin. Ardından, bu modülün önbelleğe alma
kaynaklar hakkında bilgi edinebilirsiniz.
Gelecekteki gezinmeleri hızlandırmak için sayfaları önceden getir
Ayrıca bir sayfayı ve tüm alt kaynaklarını önceden getirmek için
Bir HTML belgesine işaret ederken as="document" özelliği:
<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 dokümanları önceden getirmek için Speculation Rules API. Spekülasyon Kuralları, JSON nesnesi olarak tanımlanır sayfanın HTML'sine eklenir veya JavaScript aracılığıyla dinamik olarak eklenir:
<script type="speculationrules">
{
"prefetch": [{
"source": "list",
"urls": ["/page-a", "/page-b"]
}]
}
</script>
JSON nesnesi bir veya daha fazla işlemi açıklar (şu anda yalnızca desteklenmektedir)
prefetch ve prerender ile bu işlemle ilişkili URL'lerin listesi. İçinde
snippet'ini açarsa tarayıcıya /page-a kodunu önceden getirmesi istenir
ve /page-b. <link rel="prefetch"> işlevine benzer şekilde, spekülasyon kuralları da
tarayıcının bazı durumlarda göz ardı edebileceğine dair ipucu verir.
Quicklink gibi kitaplıklar, sayfada gezinmeyi görünür olduğunda sayfaların bağlantılarını önceden getirmeyi veya önceden işlemeyi kullanıcının görüntü alanına uygulanır. Bu da kullanıcının sonunda kullanıcı söz konusu sayfaya gider (sayfadaki tüm bağlantıların önceden getirilmesine kıyasla).
Önceden işleme sayfaları
Kaynakları önceden getirmeye ek olarak, tarayıcıya kullanıcı gitmeden önce sayfayı önceden oluşturmak için kullanabilir. Bu şekilde, kaynakları getirilip işlendikçe anında sayfa yüklenir. görebilirsiniz. Kullanıcı sayfaya gittiğinde, sayfa şuraya yerleştirilir: ön plan.
Önceden işleme, Speculation Rules API aracılığıyla desteklenir:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
Önceden getirme ve önceden işleme demoları
Service Worker'ı önceden önbelleğe alma
Service Worker kullanarak kaynakları tahmine dayalı olarak önceden getirmek de mümkündür.
Service Worker'ı önceden önbelleğe alma özelliği, Cache API'yi kullanarak kaynakları getirip kaydedebilir,
ve tarayıcının isteği Cache API'sini kullanarak sunmasını sağlar.
ağa katılmaz. Service Worker'ı önceden önbelleğe alma, çok etkili bir Service Worker kullanır
yalnızca önbellek stratejisi olarak bilinen önbelleğe alma stratejisi Bu model son derece
çünkü kaynaklar, Service Worker önbelleğine yerleştirildikten sonra
istenildiği anda neredeyse anında getirilir.
Bir hizmet çalışanı kullanarak kaynakları önbelleğe almak için Workbox'ı kullanabilirsiniz. Şu durumda: önceden belirlenmiş bir dizi önbellek için kendi kodunuzu yazabilirsiniz. dosyası olarak da kaydedebilir. Her iki durumda da, önbelleğe almak için hizmet çalışanı kullanabilirsiniz. önbelleğin, hizmet hizmetin kullanımına sunulduğunda gerçekleştiğini yüklü olması gerekir. Yüklemenin ardından, önbelleğe alınmış kaynaklar otomatik olarak hizmet çalışanının web sitenizde kontrol ettiği tüm sayfalarda erişilebilir.
Workbox, hangi kaynakların kullanılması gerektiğini belirlemek için bir önbellek manifesti kullanır önbelleğe alınmış olması gerekir. Önbellek manifesti, dosyaların ve sürüm oluşturma bilgilerinin yer aldığı bir listedir "bilgi kaynağı" işlevi gören önbellekte tutulmasını sağlar.
[{
url: 'script.ffaa4455.js',
revision: null
}, {
url: '/index.html',
revision: '518747aa'
}]
Önceki kod, iki dosya içeren örnek bir manifesttir:
script.ffaa4455.js ve /index.html. Bir kaynak, sürüm içeriyorsa
bilgi (dosya karması olarak bilinir) ve ardından revision
özelliği, dosya zaten sürümlü olduğu için null olarak bırakılabilir (örneğin,
Önceki kodda script.ffaa4455.js kaynağı için ffaa4455). Örneğin,
sürümü bulunmayan kaynaklar için derleme sırasında bunlar için bir düzeltme oluşturulabilir.
Kurulumdan sonra bir hizmet çalışanı, statik sayfaları veya kendi sayfalarını önbelleğe almak için kullanılabilir. hızlandıran alt kaynaklar hazırladık.
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
'/styles/product-page.39a1.js',
]);
Örneğin, bir e-ticaret ürün listeleme sayfasında Service Worker için
Ürün ayrıntıları sayfasını oluşturmak için gereken CSS ve JavaScript'i önceden önbelleğe almak,
ve ürün ayrıntıları sayfasına
gidilmesinin çok daha hızlı olmasını sağlıyor.
önceki örnekte, product-page.ac29.css ve product-page.39a1.js
önbelleğe alınmış olması gerekir. workbox-precaching içinde kullanılabilen precacheAndRoute yöntemi
Önbelleğe alınmış kaynakların doğru şekilde sağlanması için gereken işleyicileri otomatik olarak kaydeder
gerekli olduğunda Service Worker API'den getirilir.
Service Worker'lar yaygın bir şekilde desteklendiği için Service Worker'ı kullanabilirsiniz. önbellekleri sunma.
ziyaret edin.Bilginizi test etme
prefetch ipucu hangi öncelikte ortaya çıkar?
Önceden getirme ile bir sayfayı önceden nasıl oluşturabilirsiniz?
Service Worker önbelleği ve HTTP önbelleği aynıdır.
Sıradaki: Web çalışanlarına genel bakış
Artık önceden getirme, önceden işleme ve Service Worker'ları önceden önbelleğe almanın geleceğe dönük gezinmeyi hızlandırmak söz konusu olduğunda yararlı olabilir. bu aşamanın nasıl başarılı olabileceğiyle ilgili bilinçli kararlar hem web siteniz hem de kullanıcıları için yararlıdır.
Ardından, web çalışanlarına genel bir bakış sunulur ve bunun nasıl yapılacağını ana iş parçacığına odaklanabilir ve ana iş parçacığına kullanıcı etkileşimleri. E-postanızın başarısını garantilemek için ne yapabileceğinizi daha fazla zaman ayırın, sonraki iki modüle zaman ayırın!