Aprende a garantizar que todos los usuarios obtengan la mejor experiencia posible mediante la optimización de tus sitios para limitaciones 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 que usan dispositivos de alta gama pueden resultar inutilizables 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 lo que desarrollar soluciones "uniformes para todos" no siempre funciona.
En su charla Chrome Dev Summit, Addy Osmani de Google y Nate Schloss de Facebook analizaron una solución para ese problema: un patrón para publicar páginas que satisfagan mejor una variedad de restricciones de los usuarios. Lo llaman carga adaptable.
¿Qué es la carga adaptable?
La carga adaptable implica brindar diferentes experiencias a distintos usuarios en función de sus restricciones de red y hardware, en particular:
Una experiencia básica rápida para todos los usuarios (incluidos los dispositivos de gama baja).
Agregamos de manera progresiva funciones solo de alta gama si la red y el hardware de un usuario pueden controlarlas.
Al realizar optimizaciones para limitaciones específicas de hardware y red, permites que todos los usuarios obtengan la mejor experiencia posible para sus dispositivos. Adaptar la experiencia a las limitaciones de los usuarios puede incluir lo siguiente:
Publicación de imágenes y videos de baja calidad en redes lentas.
Limitación de la velocidad de fotogramas de las animaciones en dispositivos de gama baja.
Se evitan las operaciones costosas en términos de procesamiento en dispositivos de gama baja.
Bloqueo de secuencias de comandos de terceros en dispositivos más lentos
Carga de JavaScript no crítico para la interactividad solo en CPUs rápidas.
Compatibilidad con navegadores y cómo implementar la carga adaptable
A continuación, se enumeran los indicadores que puedes usar para la carga adaptable. También se incluye compatibilidad con navegadores para cada indicador:
Navigator.deviceMemory
La propiedad navigator.deviceMemory se usa para reducir el consumo de memoria en dispositivos de gama baja.
Navigator.hardwareConcurrency
La propiedad navigator.hardwareConcurrency es el recuento de núcleos de la CPU. Se usa para limitar la costosa ejecución de JavaScript y reducir la lógica que usa la CPU cuando un dispositivo no puede manejarla bien.
NetworkInformation.effectiveType
La propiedad navigator.connection.effectiveType se usa para optimizar la transferencia de datos y usar menos ancho de banda.
NetworkInformation.saveData
La propiedad navigator.connection.saveData se usa para aprovechar las preferencias del usuario de Ahorro de datos.
Existen dos lugares en los que puedes tomar una decisión sobre qué entregar a los usuarios: el cliente y el servidor. En el cliente, tienes las APIs de JavaScript que se mencionaron antes. En el servidor, puedes usar sugerencias para clientes para obtener estadísticas sobre las capacidades del dispositivo del usuario y la red a la que está conectado.
Carga adaptable en React
Utilidades y ganchos de carga adaptables de React es un paquete para el ecosistema de React que facilita la adaptación de tus sitios a dispositivos de gama baja. En él se incluye lo siguiente:
El hook
useNetworkStatus()para adaptarse según el estado de la red (slow-2g,2g,3go4g).El hook
useSaveData()para adaptarse según las preferencias del usuario de Ahorro de datos.El hook
useHardwareConcurrency()para adaptarse según la cantidad de núcleos lógicos de procesador de CPU en el dispositivo del usuario.El hook
useMemoryStatus()para adaptarse según la memoria (RAM) del dispositivo del usuario.
Cada hook acepta un argumento opcional para configurar el valor inicial. Esta opción es útil en dos situaciones: cuando el navegador del usuario no admite la API relevante y para la renderización del servidor, en la que puedes usar los datos de la sugerencia del cliente para establecer el valor inicial en el servidor. Por ejemplo, el hook useNetworkStatus() puede usar el valor inicial que se pasó de la sugerencia del cliente para la renderización del servidor y, cuando se ejecuta en el cliente, se puede actualizar si cambia el tipo efectivo de red.
Los hooks y utilidades de carga adaptable de React se implementan a través de APIs de plataformas web (información de red, memoria del dispositivo y simultaneidad de hardware). Puedes usar las mismas APIs para aplicar conceptos de carga adaptable a otros frameworks y bibliotecas, como Angular, Vue y otros.
Carga adaptable en acción
En esta sección, se exploran demostraciones de cómo podrías usar la carga adaptable y los ejemplos del mundo real de sitios como Facebook, eBay, Tinder y otros.
En la demostración de React Movie, se muestra cómo adaptar la publicación de contenido multimedia según el estado de la red. Es una aplicación para explorar películas que muestra pósteres, resúmenes y listas de reparto. Según el tipo de conexión eficaz del usuario, publica pósteres de alta calidad en conexiones rápidas y pósteres de baja calidad en conexiones lentas.
Twitter tiene un modo de Ahorro de datos diseñado para reducir la cantidad de datos que se usan. En este modo, las imágenes de vista previa se cargan en imágenes grandes y de baja resolución solo cuando presionas 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%. Esta es una demostración de React que usa el hook de guardado de datos para replicar el cronograma de Twitter. Intenta abrir el panel Network de Herramientas para desarrolladores y observa la diferencia en la cantidad de datos transferidos a medida que te desplazas mientras la opción Guardar datos está inhabilitada y cuando está habilitada.
eBay activa y desactiva condicionalmente funciones como el zoom cuando las condiciones del hardware o de la red del usuario no las admiten. Puedes lograrlo mediante la división de código y la carga de código adaptables, una forma de cargar condicionalmente componentes más interactivos o ejecutar operaciones con mayor procesamiento de datos en dispositivos de alta gama, sin enviar esas secuencias de comandos a los usuarios de dispositivos más lentos. Mira el video de 16 min, en el que Addy muestra este patrón implementado con React.lazy() y Suspense en una página de demostración del producto de eBay.
Tinder usa varios patrones de carga adaptable en su Web y su app de Lite para ofrecer una experiencia rápida para todos. Si un usuario usa una red lenta o tiene habilitado el Ahorro de datos, inhabilita la reproducción automática de videos, limita la carga previa de rutas y limita la carga de la siguiente imagen en el carrusel a la carga de imágenes de a una a medida que los usuarios deslizan el dedo. Después de implementar estas optimizaciones, observaron mejoras significativas en el recuento promedio de deslizamientos en países como Indonesia.
Carga adaptable en Facebook
Un problema que surge con la carga adaptable es la agrupación de los dispositivos en clases de gama alta y baja según los indicadores disponibles. En los dispositivos móviles, la cadena usuario-agente (UA) proporciona el nombre del dispositivo que permite que Facebook use datos disponibles públicamente en las características del dispositivo para agrupar dispositivos móviles en clases. Sin embargo, en los dispositivos de escritorio, la única información relevante que proporciona UA es el sistema operativo del dispositivo.
Para agrupar dispositivos de escritorio, Facebook registra los datos sobre el sistema operativo, los núcleos de CPU (de navigator.hardwareConcurrency) y la memoria RAM (navigator.deviceMemory) en su supervisión de rendimiento. Al analizar las relaciones entre los diferentes tipos de hardware y el rendimiento, se clasificaron los dispositivos en cinco categorías. Con las clases de hardware integradas en la supervisión del rendimiento, obtienen un panorama más completo de cómo las personas usan los productos de Facebook en función de su dispositivo y pueden identificar regresiones con mayor facilidad.
Mira el video de 24 min, en el que Nate explica cómo Facebook aborda la agrupación de dispositivos y usa la carga adaptable para animaciones y carga de JavaScript.
Más información sobre la carga adaptable
La carga adaptable consiste en diseñar tus sitios teniendo en cuenta la inclusión. Crea una experiencia principal que funcione bien para todos y, luego, activa o desactiva las funciones que la vuelven aún más increíble si el usuario tiene suficiente memoria, CPU o una red rápida. Para obtener más información sobre la carga adaptable, consulta las demostraciones disponibles y mira la charla de Chrome Dev Summit: