Chargement adaptatif avec les techniciens de service

Modifier les actifs proposés aux utilisateurs en fonction des conditions de leur appareil et de leur réseau.

23 juin 2020
Mise à jour 20 août 2020

Il apparaît dans:
Fiabilité du réseau

Los usuarios acceden a sitios la toile a través de una amplia variedad de dispositivos y conexiones de red. Incluso en las principales ciudades, donde las redes móviles son rápidas y confiables, uno puede terminar experimentando tiempos de carga más lentos, por ejemplo, al viajar en el metro, en un automóvil o simplemente al moverse. En regiones como los mercados emergentes, este fenómeno es aún más común, no solo debido a redes poco confiables, sino también porque los dispositivos tienden a tener menos memoria y potencia de procesamiento de CPU.

La carga adaptable es un patrón de rendimiento web que le permite adaptar su sitio en función de la red del Nom d'utilisateur y las condiciones del dispositivo.

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. En esta guía, exploramos cómo puede utilizar los trabajadores del servicio y la API de información de red para lograr una stratégie de carga adaptable.

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 empresa también descubrió que los scripts y los activos (como los banners) cargados por las redes publicitarias eran especialmente perjudiciales para los usuarios que navegaban en 3G o conexiones más lentas.

Comme c'est le cas avec de nombreux éditeurs, Terra sert AMP versiones de sus páginas a usuarios procedentes de moteurs de recherche y otras plataformas de échange de liens. Las páginas AMP suelen ser livianas y ayudan a mitigar el impacto de los anuncios en el rendimiento al reducir la prioridad de su carga con respecto al Contenu principal de la página.

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 en el trabajador del servicio para detectar si la solicitud proviene de 3G o más lento. Si ese es el caso, cambian la URL de la página para solicitar la versión AMP de la página.

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 proporciona varias estrategias de almacenamiento en cache en tiempo de ejecución listas para usar. Se utilizan para indicar cómo el trabajador del servicio genera una respuesta después de recibir una 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).