Passer au contenu principal

Modificar los activos que ofrece a los usuarios en función de las condiciones de su dispositivo y red.

igraal_fr-fr


Mise à jour

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

Los usuarios acceden a sitios web 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 usuario y las condiciones del dispositivo.

El patrón de carga adaptativo es posible gracias a los trabajadores del servicio, el API de información de red, 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 estrategia de carga adaptable.

Caso de producción

Terra es una de las empresas de medios más grandes de Brasil. Tiene una gran base de usuarios, provenientes de una amplia variedad de dispositivos y redes.

Para brindar una experiencia más confiable a todos sus usuarios, Terra combina trabajadores de servicio y API de información de red para ofrecer imágenes de menor calidad a los usuarios en conexiones 2G o 3G.

images-terra-adaptatives-3516746

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 motores de búsqueda y otras plataformas de intercambio de enlaces. 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 contenido principal de la página.

Teniendo esto en cuenta, Terra decidió comenzar a ofrecer versiones AMP de sus páginas no solo a los usuarios que provienen de los motores de búsqueda, sino también a aquellos que navegan por su sitio en conexiones 3G o más lentas.

Pour y parvenir, ils utilisent le API de información de red 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.

terra-adaptatif-amp-9466834

Gracias a esta técnica, envían 70% moins d'octets a los usuarios con conexiones más lentas. los temps utilisé en las páginas AMP es mayor para los usuarios de 3G y los anuncios en las páginas AMP tienen una mejor CTR (taux de clics) pour ce groupe.

Implémentez le chargement adaptatif avec Workbox

En esta sección, exploraremos cómo se puede utilizar Workbox para implementar estrategias de carga adaptativas.

Workbox proporciona varias estrategias de almacenamiento en caché 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 Caché primero stratégie le Demander se cumplirá utilizando la respuesta en caché (si está disponible). Si no hay una respuesta en caché, Demander se cumplirá mediante una solicitud de red y la respuesta se almacenará en caché.

importer { registerRoute } depuis 'workbox-routing' ;
importer { CacheFirst } depuis 'workbox-stratégies' ;

registerRoute (
nouveau RegExp ( '/ img /' ) ,
nouveau CacheFirst ( )
) ;

Las estrategias de almacenamiento en caché se pueden personalizar con Plugins de boîte de travail. Estos le permiten agregar comportamientos adicionales manipulando solicitudes y respuestas durante el ciclo de vida de una solicitud. Workbox tiene varios complementos integrados para casos comunes y API, pero también puede definir un plugin personnalisée introduzca alguna lógica personalizada de su elección.

Para lograr la adaptación de la carga, defina un complemento personalizado, llamado, por ejemplo, adaptiveLoadingPlugin:

const adaptiveLoadingPlugin = {
requestWillFetch: async ({request}) => {
const urlParts = request.url.split('/');
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('/')
.replace('.jpg', '.png');
const newRequest = new Request(newUrl.href, {headers: request.headers});

return newRequest;
},
};

El código anterior hace lo siguiente:

  • Mettre en œuvre un requestWillFetch () devolución de llamada: se llama cada vez que se va a realizar una solicitud de red, por lo que puede modificar la Demander.
  • Comprueba el tipo de conexión, utilizando el API de información de red. Según el estado de la red, crea una nueva parte de URL, que indica la calidad de la imagen que se va a buscar (p. Ej. q_30 pour les utilisateurs 3G).
  • Crea una nueva URL basada en la dinámica nouvelle partie value et renvoie le nouveau Demander a realizar, en función de esa URL.

A continuación, pase el complemento a un cacheFirst estrategia que contiene una expresión regular para hacer coincidir las URL de la imagen (p. ej. / img /):

boîte de travail . routage . registerRoute (
nouveau RegExp ( '/ img /' ) ,
boîte de travail . stratégies . cacheFirst ( {
cacheName : 'images' ,
plugins : [
adaptiveLoadingPlugin ,
boîte de travail . expiration . Plugin ( {
maxEntries : 50 ,
purgeOnQuotaError : vrai ,
} ) ,
] ,
} ) ,
) ;

Como resultado, cuando se interceptan solicitudes de imágenes, la estrategia de almacenamiento en caché en tiempo de ejecución intentará satisfacer la solicitud desde la caché. Si no está disponible, ejecutará la lógica en el complemento para decidir qué calidad de imagen recuperar de la red.

Finalmente, la respuesta se conservará en la caché y se enviará de vuelta a la página.

Plug-in Cloudinary Workbox

Cloudinary, un servicio de alojamiento de imágenes y videos, tiene Plug-in de boîte de travail que encapsula la funcionalidad explicada en la sección anterior, lo que la hace aún más fácil de implementar.

cloudinary-workbox-5686987

El complemento está diseñado para funcionar con Plug-in Workbox Web Pack. Pour l'implémenter, utilisez le GénérerSW () classe:

nouveau workboxPlugin . GenerateSW ( {
swDest : 'sw.js' ,
importScripts : [ './cloudinaryPlugin.js' ] ,
runtimeCaching : [
{
urlPattern : nouveau RegExp ( '^ https: //res.cloudinary.com/.*/image/upload/' ) ,
gestionnaire : 'CacheFirst' ,
options : {
cacheName : 'images-cloud' ,
plugins : [
{
requestWillFetch : async ( { request } ) =>
cloudinaryPlugin . requestWillFetch ( demande ) ,
} ,
] ,
} ,
} ,
] ,
} ) ;

El código anterior hace lo siguiente:

  • 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.
  • Define una estrategia de almacenamiento en caché en tiempo de ejecución Cache First para solicitudes de imágenes a Cloudinary CDN.
  • Passe le Plug-in Cloudinary Workbox para ajustar la calidad de la imagen según las condiciones de la red.

Explore estrategias de carga más adaptables

Puede ir más allá, mapeando las señales del dispositivo, como concurrence matérielle y Dispositif de mémoire a las categorías de dispositivos y luego ofrecer diferentes activos según el tipo de dispositivo (de gama baja, media o alta).