Carga adaptable con trabajadores de servicios

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 APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene más 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 scriptsConcepto de Scripts¿Qué son los Scripts?Los Scripts son fragmentos de código que se usan para dar forma a herramientas tanto en Internet como en el sector de la informática en general. Son una parte crucial del software, puesto que se trata exactamente del código que conforma a una aplicación en su totalidad o a una de sus funciones, como además el que puedes hallar explorando cómo está hecha una web.Desde más 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úsquedaConcepto de Motores de Búsqueda¿Qué son los Motores de Búsqueda?Los Motores de búsqueda, o Search Engines, son lo que se conoce comúnmente como buscadores. Todos aquellos sistemas informáticos que trabajan buscando todos los archivos almacenados en internet por medio de de arañas o crawlers para elaborar páginas de resultados que sirvan para que los usuarios accedan a webs tras realizar una búsqueda. Son los responsables de que, al buscar cualquier más y otras plataformas de intercambio de enlacesEl intercambio de enlaces es una táctica de construcción de enlaces a través la cual uno o más webs intercambian enlaces. Este intercambio de enlaces se discute y se acuerda de antemano y da lugar a oportunidades publicitarias para los sitios web implicados. El intercambio de enlaces además puede ser un factor que influya en la popularidad de los enlaces. Evaluación por los motores de búsqueda El motor de búsqueda más. Las páginas AMPConcepto de AMP¿Qué es el AMP o Accelerated Mobile Pages?El AMP, abreviatura de Accelerated Mobile Pages, es una propuesta que empezó a tomar forma en el año 2016 con la finalidad de mejorar la usabilidad, lectura y, en general, la experiencia de los usuarios de teléfono celular dentro de cualquier página web. Emprendida por Google con un aperturismo total (es de código abierto), lleva en activo desde entonces para facilitar más 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 contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más 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 URLEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo más 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éUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y más 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 eventoConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando más.

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 la Request.
• 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 para usuarios de 3G).
• Crea una nueva URL basada en la dinámica newPart valor y devuelve el nuevo Request 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/):

workbox.routing.registerRoute(
  new RegExp('/img/'),
  workbox.strategies.cacheFirst({
    cacheName: 'images',
    plugins: [
      adaptiveLoadingPlugin,
      workbox.expiration.PluginConcepto de Plugin¿Qué es un Plugin?Un Plugin es un fragmento o componente de código hecho para ampliar las funciones de un programa o de una herramienta. En el ámbito del marketing digital, especialmente dentro del marketing de contenidos, es algo que se utiliza con mucha frecuencia dentro de entornos como WordPress, puesto que sirven al momento de contar con añadidos que hagan mucho más cómoda y completa la experiencia de más({
        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('^httpsHTTPS (protocolo de Transferencia de Hiper-Texto) es un protocolo que permite determinar una conexión segura entre el servidor y el cliente, que no puede ser interceptada por personas no autorizadas. En resumidas cuentas, es la versión segura de el http (Hyper Text Transfer Protocol) Cómo funciona Una conexión HTTP estándar en Internet puede ser fácilmente secuestrada por partes no autorizadas. El propósito de una conexión HTTPS es evitar esto: encriptar más://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 en swDest.
• 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).