Zum Hauptinhalt springen

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

igraal_de-de


Aktualisiert

Es erscheint in:
Netzwerkzuverlässigkeit

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, das Hardware-Parallelitäts-API, und das Gerätespeicher-API. 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.

terra-adaptive-images-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.

Wie bei vielen Verlagen dient Terra AMPERE 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.

Um dies zu erreichen, verwenden sie die 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-adaptiver-amp-9466834

Gracias a esta técnica, envían 70% weniger Bytes a los usuarios con conexiones más lentas. los Zeit verwendet en las páginas AMP es mayor para los usuarios de 3G y los anuncios en las páginas AMP tienen una mejor CTR (Klickrate) für diese Gruppe.

Implementieren Sie das adaptive Laden mit 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 holen Veranstaltung.

Zum Beispiel in a Caché primero Strategie der Anfrage se cumplirá utilizando la respuesta en caché (si está disponible). Si no hay una respuesta en caché, Anfrage se cumplirá mediante una solicitud de red y la respuesta se almacenará en caché.

{ registerRoute } aus 'Workbox-Routing' importieren ;
{ CacheFirst } aus 'Workbox-Strategien' importieren ;

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

Las estrategias de almacenamiento en caché se pueden personalizar con Workbox-Plugins. 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 benutzerdefiniertes Plugine 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 = Anfrage . URL . split ( '/' ) ;
let imageQuality ;

Schalter (
Navigator && Navigator . Verbindung
? Navigator . Verbindung . effektiveTyp
: ''
) {
Fall '3g' :
imageQuality = 'q_30' ;
Pause ;
}}

const newUrl = urlParts
. Spleiß ( urlParts . Länge - 1 , 0 , imageQuality )
. beitreten ( '/' )
. ersetzen ( '.jpg' , '.png' ) ;
const newRequest = new Request ( newUrl . href , { headers: request . headers } ) ;

return newRequest ;
} ,
} ;

El código anterior hace lo siguiente:

  • Implementieren Sie a requestWillFetch () devolución de llamada: se llama cada vez que se va a realizar una solicitud de red, por lo que puede modificar la Anfrage.
  • 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 für 3G-Benutzer).
  • Crea una nueva URL basada en la dinámica neuer Teil Wert und gibt das neue zurück Anfrage 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 /):

Arbeitsbox . Routing . registerRoute (
neues RegExp ( '/ img /' ) ,
Arbeitsbox . Strategien . cacheFirst ( {
cacheName : 'images' ,
Plugins : [
adaptiveLoadingPlugin ,
Arbeitsbox . Ablauf . 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.

Cloudinary Workbox Plugin

Cloudinary, un servicio de alojamiento de imágenes y videos, tiene Workbox Plugin 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 Workbox Web Pack Plugin. Verwenden Sie zum Implementieren die GenerateSW () Klasse:

neues workboxPlugin . GenerateSW ( {
swDest : 'sw.js' ,
importScripts : [ './cloudinaryPlugin.js' ] ,
runtimeCaching : [
{
urlPattern : neues RegExp ( '^ https: //res.cloudinary.com/.*/image/upload/' ) ,
Handler : 'CacheFirst' ,
Optionen : {
cacheName : 'cloudinary-images' ,
Plugins : [
{
requestWillFetch : async ( { request } ) =>
cloudinaryPlugin . requestWillFetch ( Anfrage ) ,
} ,
] ,
} ,
} ,
] ,
} ) ;

El código anterior hace lo siguiente:

  • Verwenden Sie die GenerateSW () Klasse zum Konfigurieren des Webpacks zum Generieren eines Service Workers auf dem in angegebenen Ziel swDest.
  • Importieren Sie das Cloudinary Plugin-Skript.
  • Define una estrategia de almacenamiento en caché en tiempo de ejecución Cache First para solicitudes de imágenes a Cloudinary CDN.
  • Übergeben Sie die Cloudinary Workbox Plugin 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 Hardware-Parallelität y Speichergerät a las categorías de dispositivos y luego ofrecer diferentes activos según el tipo de dispositivo (de gama baja, media o alta).