Chargement adaptatif avec les techniciens de service

Les utilisateurs accèdent aux sites Web via une grande variété de connexions réseau et d'appareils. Même dans les grandes villes, où les réseaux mobiles sont rapides et fiables, on peut se retrouver avec des temps de chargement plus lents, par exemple en voyageant en métro, en voiture ou simplement en se déplaçant. Dans des régions comme les marchés émergents, ce phénomène est encore plus courant, non seulement en raison de réseaux peu fiables, mais aussi parce que les appareils ont tendance à avoir moins de mémoire et de puissance de traitement du processeur.

Le chargement adaptatif est un modèle de performances Web qui vous permet d'adapter votre site en fonction des conditions du réseau et de l'appareil de l'utilisateur.

Le modèle de charge adaptatif est rendu possible par les travailleurs de service, le API d'informations sur le réseau, les API de concurrence matérielle, et le API de mémoire de l'appareil. Dans ce guide, nous explorons comment vous pouvez utiliser les techniciens de service et l'API Network Information pour mettre en place une stratégie de chargement adaptatif.

Cas de production

Terra est l'une des plus grandes entreprises de médias du Brésil. Il dispose d'une large base d'utilisateurs, provenant d'une grande variété d'appareils et de réseaux.

Pour offrir une expérience plus fiable à tous ses utilisateurs, Terra associe des techniciens de service et API d'informations sur le réseau pour offrir des images de qualité inférieure aux utilisateurs sur des connexions 2G ou 3G.

La société a également constaté que les scripts et les actifs (tels que les bannières) téléchargés par les réseaux publicitaires étaient particulièrement nocifs pour les utilisateurs naviguant sur des connexions 3G ou plus lentes.

Comme c'est le cas avec de nombreux éditeurs, Terra sert AMP versions de ses pages aux utilisateurs des moteurs de recherche et autres plates-formes d'échange de liens. Les pages AMP sont généralement légères et aident à atténuer l'impact des publicités sur les performances en réduisant la priorité de leur chargement sur le contenu principal de la page.

Dans cette optique, Terra a décidé de commencer à proposer des versions AMP de ses pages non seulement aux utilisateurs issus des moteurs de recherche, mais aussi à ceux qui naviguent sur son site en 3G ou avec des connexions plus lentes.

Pour y parvenir, ils utilisent le API d'informations sur le réseau sur le technicien de service pour détecter si la demande provient de la 3G ou plus lente. Si tel est le cas, ils modifient l'URL de la page pour demander la version AMP de la page.

Grâce à cette technique, ils envoient 70% moins d'octets aux utilisateurs avec des connexions plus lentes. Les temps utilisé sur les pages AMP est plus élevé pour les utilisateurs 3G et les annonces sur les pages AMP ont une meilleure CTR (taux de clics) pour ce groupe.

Implémentez le chargement adaptatif avec Workbox

Dans cette section, nous explorerons comment Workbox peut être utilisé pour implémenter des stratégies de chargement adaptatif.

Workbox fournit plusieurs stratégies de mise en cache d'exécution prêtes à l'emploi. Ils sont utilisés pour indiquer comment le technicien de service génère une réponse après avoir reçu un aller chercher un événement.

Par exemple, dans un Mettre en cache d'abord stratégie le Demander il sera rempli en utilisant la réponse mise en cache (si disponible). S'il n'y a pas de réponse en cache, Demander il sera rempli par une requête réseau et la réponse sera mise en cache.

importer {registerRoute} desde 'routage de boîte de travail';
importer {CacheFirst} desde 'workbox-strategies';
registerRoute(
new RegExp('/img/'),
new CacheFirst()
);

Les stratégies de mise en cache peuvent être personnalisées avec Plugins de boîte de travail. Ceux-ci vous permettent d'ajouter des comportements supplémentaires en manipulant les demandes et les réponses pendant le cycle de vie d'une demande. Workbox dispose de plusieurs plugins intégrés pour les cas courants et les API, mais vous pouvez également définir un plugin personnaliséet entrez une logique personnalisée de votre choix.

Pour réaliser l'adaptation de la charge, définissez un plugin personnalisé, appelé, par exemple, adaptiveLoadingPlugin:

const adaptiveLoadingPlugin = {
requestWillFetch: asynchrone ({request}) => {
const urlParts = request.URL.split('/');
laisser imageQuality;
switch (
navigateur && navigateur.lien
? navigateur.lien.effectiveType
: ''
) {
case '3g':
imageQuality = 'q_30';
break;
}
const newUrl = urlParts
.épissure(urlParts.longueur - 1, 0, imageQuality)
.join('/')
.replace('.jpg', '.png');
const newRequest = new Demander(newUrl.href, {en-têtes: request.en-têtes});
revenir newRequest;
},
};

Le code ci-dessus effectue les opérations suivantes:

• Mettre en œuvre un requestWillFetch () callback: appelé à chaque fois qu'une requête réseau doit être effectuée, vous pouvez donc modifier le Demander.
• Vérifiez le type de connexion à l'aide du API d'informations sur le réseau. En fonction de l'état du réseau, il crée une nouvelle partie URL, qui indique la qualité de l'image à rechercher (par ex. q_30 pour les utilisateurs 3G).
• Créer une nouvelle URL basée sur la dynamique nouvelle partie value et renvoie le nouveau Demander à exécuter, en fonction de cette URL.

Passez ensuite le complément à un cacheFirst stratégie qui contient une expression régulière pour correspondre aux URL de l'image (ex. / img /):

workbox.routing.registerRoute(
  new RegExp('/img/'),
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      adaptiveLoadingPlugin,
      workbox.expiration.Brancher({
        maxEntries: 50,
        purgeOnQuotaError: vrai,
      }),
    ],
  }),
);

Par conséquent, lorsque les demandes d'image sont interceptées, la stratégie de mise en cache d'exécution essaiera de satisfaire la demande du cache. S'il n'est pas disponible, il exécutera une logique dans le plugin pour décider de la qualité d'image à récupérer sur le réseau.

Enfin, la réponse sera mise en cache et renvoyée sur la page.

Plug-in Cloudinary Workbox

Cloudinary, un service d'hébergement d'images et de vidéos, a Plug-in de boîte de travail qui encapsule la fonctionnalité expliquée dans la section précédente, ce qui la rend encore plus facile à mettre en œuvre.

Le plugin est conçu pour fonctionner avec Plug-in Workbox Web Pack. Pour l'implémenter, utilisez le GénérerSW () classe:

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: asynchrone ({request}) =>
cloudinaryPlugin.requestWillFetch(request),
},
],
},
},
],
});

Le code ci-dessus effectue les opérations suivantes:

• Utilisez le GénérerSW () classe pour configurer webpack pour générer un service worker sur la cible indiquée dans swDest.
• Importez le script du plugin cloudinary.
• Définit une stratégie de mise en cache d'exécution Cache First pour les demandes d'image à Cloudinary CDN.
• Passe le Plug-in Cloudinary Workbox pour régler la qualité de l'image en fonction des conditions du réseau.

Explorez des stratégies de charge plus adaptables

Vous pouvez aller plus loin en cartographiant les signaux des appareils, tels que concurrence matérielle y Dispositif de mémoire aux catégories d'appareils, puis proposez différents actifs en fonction du type d'appareil (bas de gamme, milieu de gamme ou haut de gamme).