Saltar al contenido principal

Aprenda a asegurarse de que cada usuario obtenga la mejor experiencia posible optimizando sus sitios para restricciones específicas de hardware y red.

Las capacidades del dispositivo y las conexiones de red varían mucho. Los sitios que deleitan a los usuarios en dispositivos de alta gama pueden ser
inutilizable en los de gama baja. Los sitios que se cargan sin problemas en redes rápidas pueden detenerse en redes lentas. Cualquier usuario puede experimentar un sitio web lento, por eso el desarrollo de soluciones de «talla única» no siempre funciona.

En su Charla de Chrome Dev Summit, Addy Osmani de Google y Nate Schloss de Facebook exploran una solución a ese problema: un patrón para entregar páginas que se adapten mejor a una variedad de limitaciones de los usuarios. Ellos lo llaman carga adaptable.

¿Qué es la carga adaptativa?

La carga adaptable implica brindar diferentes experiencias a diferentes usuarios en función de sus limitaciones de red y hardware, específicamente:

  • Una experiencia central rápida para todos los usuarios (incluidos los dispositivos de gama baja).

  • Agregar progresivamente funciones exclusivas de alta gama, si la red y el hardware de un usuario pueden manejarlo.

Al optimizar para restricciones específicas de hardware y red, permite que cada usuario obtenga la mejor experiencia posible para su dispositivo. Adaptar la experiencia a las limitaciones de los usuarios puede incluir:

  • Sirve imágenes y videos de baja calidad en redes lentas.

  • Limitar la velocidad de fotogramas de las animaciones en dispositivos de gama baja.

  • Evitar operaciones computacionalmente costosas en dispositivos de gama baja.

  • Bloqueo de scripts de terceros en dispositivos más lentos.

  • Carga de JavaScript no crítico para interactividad solo en CPU rápidas.

Cómo implementar la carga adaptativa

Las señales que puede utilizar para la carga adaptativa son:

Hay dos lugares donde puede tomar una decisión sobre qué servir a los usuarios: el cliente y el servidor. En el cliente, tiene las API de JavaScript mencionadas anteriormente. En el servidor, puede utilizar sugerencias para el cliente
para obtener información sobre las capacidades del dispositivo del usuario y la red a la que está conectado.

Carga adaptable en React

React Adaptive Loading Hooks y utilidades es una suite para el ecosistema React que facilita la adaptación de sus sitios a dispositivos de gama baja. Incluye:

  • los useNetworkStatus() gancho para adaptarse según el estado de la red (slow-2g,
    2g, 3go 4g).

  • los useSaveData() gancho para adaptarse según las preferencias de ahorro de datos del usuario.

  • los useHardwareConcurrency() gancho para adaptarse en función del número de núcleos de procesador de CPU lógicos en el dispositivo del usuario.

  • los useMemoryStatus() gancho para adaptarse según la memoria del dispositivo del usuario (RAM).

Cada gancho acepta un argumento opcional para establecer el valor inicial. Esta opción es útil en dos escenarios: cuando el navegador del usuario no es compatible con la API relevante y para la representación del lado del servidor, donde puede usar los datos de sugerencias del cliente para establecer el valor inicial en el servidor. Por ejemplo, el
useNetworkStatus() hook puede usar el valor inicial pasado de la sugerencia del cliente para la representación del lado del servidor y, cuando se ejecuta en el cliente, se actualiza si cambia el tipo efectivo de la red.

React Adaptive Loading Hooks & Utilities se implementan utilizando API de plataforma web (Información de red,
Dispositivo de memoria
y Simultaneidad de hardware). Puede utilizar las mismas API para aplicar conceptos de carga adaptativa a otros marcos y bibliotecas, como
Angular,
Vue, y otros.

Carga adaptable en acción

Esta sección explora demostraciones de cómo puede utilizar la carga adaptable y ejemplos del mundo real de sitios como Facebook, eBay, Tinder y otros.

los Reaccionar película demostración muestra cómo adaptar el servicio de medios según el estado de la red. Es una aplicación para buscar películas que muestra carteles, resúmenes y listas de actores. Basado en el tipo de conexión efectiva del usuario, sirve carteles de alta calidad en conexiones rápidas y carteles de baja calidad en conexiones lentas.

Twitter tiene un modo de ahorro de datos diseñado para reducir la cantidad de datos utilizados. En este modo, las imágenes de vista previa se cargan en baja resolución y las imágenes grandes solo se cargan cuando toca la vista previa. Con esta opción habilitada, los usuarios de iOS y Android ahorraron un 50% en el uso de datos de imágenes, y los usuarios de la web ahorraron un 80%. Aquí hay una reacción
manifestación
que usa el gancho Guardar datos para replicar la línea de tiempo de Twitter. Intente abrir sus DevTools Red panel y observar la diferencia en la cantidad de datos transferidos a medida que se desplaza mientras Guardar datos está deshabilitado y cuando está habilitado.

Un screencast que compara el desplazamiento de la línea de tiempo de Twitter con la activación y desactivación del Ahorro de datos. Con el Ahorro de datos activado, solo se cargan las vistas previas de imágenes y los videos no se reproducen automáticamente.

eBay activa y desactiva condicionalmente funciones como el zoom cuando las condiciones de red o hardware de un usuario no las admiten bien. Puede lograr esto mediante la división y la carga de código adaptables, una forma de cargar condicionalmente componentes más interactivos o ejecutar operaciones más pesadas desde el punto de vista informático en dispositivos de gama alta, sin enviar esos scripts a los usuarios en dispositivos más lentos. Mira el video en 16 minutos donde Addy muestra este patrón implementado con React.lazy () y Suspense en un
página de demostración del producto de eBay.

adaptive-code-splitting-1504025

Tinder está utilizando una serie de patrones de carga adaptativos en su
web
y Aplicación Lite para que la experiencia sea rápida para todos. Si un usuario está en una red lenta o tiene el Ahorro de datos habilitado, deshabilita la reproducción automática de video, limita la búsqueda previa de rutas y limita la carga de la siguiente imagen en el carrusel para cargar imágenes una a la vez a medida que los usuarios deslizan el dedo. Después de implementar estas optimizaciones, han visto mejoras significativas en el recuento de deslizamientos promedio en países como Indonesia.

tinder-8861568

Carga adaptable en Facebook

Un problema que surge en la carga adaptativa es la agrupación de dispositivos en clases de gama alta y baja según las señales disponibles. En dispositivos móviles,
usuario-agente (UA) string proporciona el nombre del dispositivo que permite a Facebook utilizar datos disponibles públicamente sobre las características del dispositivo para agrupar los dispositivos móviles en clases. Sin embargo, en los dispositivos de escritorio, la única información relevante que proporciona la UA es el sistema operativo del dispositivo.

Para agrupar dispositivos de escritorio, Facebook registra los datos sobre el sistema operativo, los núcleos de la CPU (desde navigator.hardwareConcurrency) y memoria RAM (navigator.deviceMemory) en su seguimiento del desempeño. Al observar las relaciones entre diferentes tipos de hardware y rendimiento, clasificaron los dispositivos en cinco categorías. Con las clases de hardware integradas en el monitoreo del rendimiento, obtienen una imagen más completa de cómo las personas usan los productos de Facebook según su dispositivo y pueden identificar las regresiones más fácilmente.

Mira el video en 24 minutos, donde Nate explica cómo Facebook se acerca a la agrupación de dispositivos y utiliza la carga adaptable para animaciones y carga de JavaScript.

Obtenga más información sobre la carga adaptable

La carga adaptable se trata de diseñar sus sitios teniendo en cuenta la inclusión. Cree una experiencia central que funcione muy bien para todos, luego alterne o superponga características que la hagan aún más asombrosa si un usuario tiene suficiente memoria, CPU o una red rápida. Para obtener más información sobre la carga adaptable, consulte los
población
y mira la charla de Chrome Dev Summit:

R Marketing Digital