Modificar los activos que ofrece a los usuarios en función de las condiciones de su dispositivo y red.
Actualizado
Confiabilidad de la red
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, el API de concurrencia de hardware, y el API de memoria del dispositivo. 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.
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.
Como es el caso de muchos editores, Terra sirve AMPERIO 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.
Para lograrlo, utilizan el 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.
Gracias a esta técnica, envían 70% menos bytes a los usuarios con conexiones más lentas. los tiempo usado en las páginas AMP es mayor para los usuarios de 3G y los anuncios en las páginas AMP tienen una mejor CTR (porcentaje de clics) para ese grupo.
Implementar la carga adaptable con 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 fetch evento.
Por ejemplo, en un Caché primero estrategia el Request se cumplirá utilizando la respuesta en caché (si está disponible). Si no hay una respuesta en caché, Request se cumplirá mediante una solicitud de red y la respuesta se almacenará en caché.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';registerRoute(
new RegExp('/img/'),
new CacheFirst()
);
Las estrategias de almacenamiento en caché se pueden personalizar con Complementos de Workbox. 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 complemento personalizadoe 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:
- Implementa un
requestWillFetch()devolución de llamada: se llama cada vez que se va a realizar una solicitud de red, por lo que puede modificar laRequest. - 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_30para usuarios de 3G). - Crea una nueva URL basada en la dinámica
newPartvalor y devuelve el nuevoRequesta 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/):
workbox.routing.registerRoute(
new RegExp('/img/'),
workbox.strategies.cacheFirst({
cacheName: 'images',
plugins: [
adaptiveLoadingPlugin,
workbox.expiration.Plugin({
maxEntries: 50,
purgeOnQuotaError: true,
}),
],
}),
);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.
Complemento de Cloudinary Workbox
Cloudinary, un servicio de alojamiento de imágenes y videos, tiene Complemento de Workbox que encapsula la funcionalidad explicada en la sección anterior, lo que la hace aún más fácil de implementar.
El complemento está diseñado para funcionar con Complemento de paquete web de Workbox. Para implementarlo, use el GenerateSW() clase:
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),
},
],
},
},
],
});El código anterior hace lo siguiente:
- Usa el
GenerateSW()class para configurar webpack para generar un service worker en el destino indicado enswDest. - Importa el script del complemento cloudinary.
- Define una estrategia de almacenamiento en caché en tiempo de ejecución Cache First para solicitudes de imágenes a Cloudinary CDN.
- Pasa el Complemento de 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 concurrencia de hardware y Dispositivo de memoria a las categorías de dispositivos y luego ofrecer diferentes activos según el tipo de dispositivo (de gama baja, media o alta).
