Kullanıcılar web sitelerine çok çeşitli cihazlar ve ağ bağlantıları aracılığıyla erişir. Mobil ağların hızlı ve güvenilir olduğu büyük şehirlerde bile, örneğin metroda, arabada veya sadece hareket halindeyken daha yavaş yükleme süreleri yaşayabilirsiniz. Gelişmekte olan pazarlar gibi bölgelerde, bu fenomen yalnızca güvenilir olmayan ağlar nedeniyle değil, aynı zamanda cihazların daha az bellek ve CPU işlem gücüne sahip olma eğiliminde olması nedeniyle daha da yaygındır.
Uyarlanabilir yükleme, sitenizi kullanıcının ağ ve cihaz koşullarına göre uyarlamanıza olanak tanıyan bir web performans modelidir.
Uyarlanabilir yükleme modeli, servis çalışanları tarafından mümkün kılınmıştır. Ağ Bilgileri API’sı, Donanım Eşzamanlılık API’sıve Cihaz Belleği API’sı. Bu kılavuzda, uyarlanabilir bir yükleme stratejisi elde etmek için hizmet çalışanlarını ve Ağ Bilgileri API’sini nasıl kullanabileceğinizi keşfediyoruz.
Üretim durumu #
toprak Brezilya’nın en büyük medya şirketlerinden biridir. Çok çeşitli cihaz ve ağlardan gelen geniş bir kullanıcı tabanına sahiptir.
Tüm kullanıcılarına daha güvenilir bir deneyim sağlamak için Terra, servis çalışanlarını ve Ağ Bilgileri API’sı 2G veya 3G bağlantılarındaki kullanıcılara daha düşük kaliteli görüntüler sunmak için.
Şirket ayrıca, reklam ağları tarafından yüklenen komut dosyalarının ve varlıkların (bannerler gibi) özellikle 3G veya daha yavaş bağlantılarda gezinen kullanıcılar için zararlı olduğunu tespit etti.
Birçok yayıncıda olduğu gibi Terra da hizmet vermektedir. AMP sürümlerini arama motorlarından ve diğer bağlantı paylaşım platformlarından gelen kullanıcılara sunar. AMP sayfaları genellikle hafiftir ve sayfanın ana içeriğine göre yüklerinin önceliğini azaltarak reklamların performans üzerindeki etkisini azaltmaya yardımcı olur.
Bunu göz önünde bulunduran Terra, sayfalarının AMP sürümlerini yalnızca arama motorlarından gelen kullanıcılara değil, sitelerini 3G veya daha yavaş bağlantılarda dolaşan kullanıcılara da sunmaya karar verdi.
Bunu başarmak için kullandıkları Ağ Bilgileri API’sı isteğin 3G’den mi yoksa daha yavaş mı geldiğini tespit etmek için hizmet çalışanında. Bu durumda, sayfanın AMP sürümünü istemek için sayfanın URL’sini değiştirirler.
Bu teknik sayesinde gönderiyorlar %70 daha az bayt daha yavaş bağlantılardaki kullanıcılara. bu harcanan zaman AMP sayfalarındaki reklamlar 3G kullanıcıları için daha yüksektir ve AMP sayfalarındaki reklamlar daha iyidir. TO (tıklama oranı) o grup için.
Workbox ile uyarlamalı yüklemeyi uygulayın #
Bu bölümde, uyarlanabilir yükleme stratejilerini uygulamak için Workbox’ın nasıl kullanılabileceğini keşfedeceğiz.
Workbox, kullanıma hazır birkaç çalışma zamanı önbelleğe alma stratejisi sağlar. Hizmet çalışanının bir mesaj aldıktan sonra nasıl bir yanıt oluşturduğunu belirtmek için kullanılırlar. fetch etkinlik.
Örneğin, bir Önce Önbelleğe Al strateji Request önbelleğe alınmış yanıt (varsa) kullanılarak yerine getirilecektir. Önbelleğe alınmış bir yanıt yoksa, Request bir ağ isteği tarafından yerine getirilecek ve yanıt önbelleğe alınacaktır.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';registerRoute(
new RegExp('/img/'),
new CacheFirst()
);
Önbelleğe alma stratejileri ile özelleştirilebilir Çalışma kutusu eklentileri. Bunlar, bir isteğin yaşam döngüsü boyunca istekleri ve yanıtları değiştirerek ek davranışlar eklemenizi sağlar. Workbox, yaygın durumlar ve API’ler için birkaç yerleşik eklentiye sahiptir, ancak özel eklentive seçtiğiniz bazı özel mantığı tanıtın.
Uyarlanan yüklemeyi elde etmek için, örneğin, adı verilen özel bir eklenti tanımlayın. adaptiveLoadingPlugin:
const adaptiveLoadingPlugin = {
requestWillFetch: async ({request}) => {
const urlParts = request.url.split("http://web.dev/");
let imageQuality;switch (
navigator && navigator.connection
? navigator.connection.effectiveType
: ''
) {
//...
case '3g':
imageQuality = 'q_30';
break;
//...
}
const newUrl = urlParts
.splice(urlParts.length - 1, 0, imageQuality)
.join("http://web.dev/")
.replace('.jpg', '.png');
const newRequest = new Request(newUrl.href, {headers: request.headers});
return newRequest;
},
};
Önceki kod aşağıdakileri yapar:
- bir uygular
requestWillFetch()geri arama: Bu, bir ağ talebi yapılmak üzereyken çağrılır, böyleceRequest. - kullanarak bağlantı türünü kontrol eder. Ağ Bilgileri API’sı. Ağın durumuna bağlı olarak, getirilecek görüntünün kalitesini gösteren yeni bir URL bölümü oluşturur (örn.
q_303G kullanıcıları için). - dinamik temel alınarak yeni bir URL oluşturur.
newPartdeğer ve yeni değeri döndürürRequestbu URL’ye göre yapılacak.
Ardından, eklentiyi bir cacheFirst resim URL’lerini eşleştirmek için normal bir ifade içeren strateji (ör. /img/):
workbox.routing.registerRoute(
new RegExp('/img/'),
workbox.strategies.cacheFirst({
cacheName: 'images',
plugins: [
adaptiveLoadingPlugin,
workbox.expiration.Plugin({
maxEntries: 50,
purgeOnQuotaError: true,
}),
],
}),
);
Sonuç olarak, görüntü istekleri yakalandığında çalışma zamanı önbelleğe alma stratejisi, isteği önbellekten yerine getirmeye çalışır. Mevcut değilse, ağdan hangi görüntü kalitesinin getirileceğine karar vermek için eklentideki mantığı çalıştıracaktır.
Son olarak, yanıt önbellekte saklanacak ve sayfaya geri gönderilecektir.
Cloudinary Workbox Eklentisi #
Bir video ve resim barındırma hizmeti olan Cloudinary, Workbox Eklentisi bu, önceki bölümde açıklanan işlevselliği kapsar ve uygulanmasını daha da kolaylaştırır.
Eklenti ile çalışmak üzere tasarlanmıştır Workbox web paketi eklentisi. Bunu uygulamak için, GenerateSW() sınıf:
new workboxPlugin.GenerateSW({
swDest: 'sw.js',
importScripts: ['./cloudinaryPlugin.js'],
runtimeCaching: [
{
urlPattern: new RegExp('^https://res.cloudinary.com/.*/image/upload/'),
handler: 'CacheFirst',
options: {
cacheName: 'cloudinary-images',
plugins: [
{
requestWillFetch: async ({request}) =>
cloudinaryPlugin.requestWillFetch(request),
},
],
},
},
],
});
Önceki kod aşağıdakileri yapar:
- kullanır
GenerateSW()Web paketini, belirtilen hedefte bir hizmet çalışanı oluşturacak şekilde yapılandırmak için sınıfswDest. - Cloudinary eklenti komut dosyasını içe aktarır.
- Cloudinary CDN’ye görüntü istekleri için bir Önbelleğe Alma çalışma zamanı önbelleğe alma stratejisi tanımlar.
- geçer Cloudinary Workbox Eklentisi görüntü kalitesini ağ koşullarına göre ayarlamak için.
Daha uyarlanabilir yükleme stratejilerini keşfedin #
Cihaz sinyallerini eşleyerek bunun ötesine geçebilirsiniz. donanım eşzamanlılığı Ve cihaz hafızası cihaz kategorilerine ve ardından cihaz türüne (düşük, orta veya yüksek uç) bağlı olarak farklı varlıklar sunar.