Diseño web: adaptative loading y el poder de las APIs

La Inteligencia Artificial y la Industria 4.0

7 julio, 2020

Las tecnologías habilitadoras de la Industria 4.0

9 julio, 2020

Published by Fernando Cortés Flores at 7 julio, 2020

Cuestión de experiencia

Con nuestras webs deseamos llegar al mayor número de usuarios posibles. Sabemos, además, que estos usuarios accederán desde múltiples dispositivos. Lo más probable, es que hayamos realizado un diseño que pueda ser visualizado sin problemas en cualquier tamaño de pantalla. Sin embargo, aún con todo esto, tendremos usuarios que tendrán una mala experiencia de usuario, tendrán una experiencia lenta, muy lenta.

La variedad de dispositivos con los que accedemos a la web difieren entre sí no sólo en la pantalla. Existen diferencias y limitaciones en el propio hardware que harán la experiencia de estos usuarios más lenta. No sólo eso, el lugar de acceso puede ser muy distinto, con lo que también tendremos usuarios que experimenten lentitud debido a la calidad de su conexión

Puedes acceder al reporte de Open Signal aquí

Si queremos proveer a todos nuestros posibles usuarios una experiencia adecuada, deberemos tener en cuenta todos estos factores. Haciendo que nuestra web sea accesible en una cantidad mayor de dispositivos y una mayor cantidad de localizaciones.

Algunos ejemplos de Adaptative Loading AQUÍ

Adaptative Loading

Adaptative Loading es basar la respuesta de nuestra web a partir de las limitaciones de los dispositivos, centrándose no solamente en el tamaño de pantalla. Es decir, se ajusta aún más a las necesidades y limitaciones que tiene cada uno de los usuarios que acceden a nuestra web.

En resumen, Adaptative Loading es un patrón que debemos plantear en la web para poder llegar a dispositivos de bajo de rendimiento (low-end devices) y no sólo a los dipositivos más potentes (High-EndDevices). Este patrón parte de la base “no todos los usuarios deben tener la misma experiencia, pero sí una experiencia de la misma calidad” y sus principios son:

Entregar un Core funcional de la forma más rápida posible, incluyendo a todo tipo de dispositivos.
Ir añadiendo funcionalidades más potentes de forma progresiva a partir de las características del dispositivo final.

El poder de las APIs

Gracias a los navegadores modernos y a los nuevos estándares, podemos descubrir algunas limitaciones de nuestros dispositivos:

Network:
- connection.effectiveType (Network Information API) Nos proporciona información acerca del tipo de conexión del dispositivo.
- Otras propiedades de la API de NetworkInformation (navigator.connection): Network Information
Memory
- Device Memory) Esta propiedad de sólo lectura devuelve la cantidad aproximada de memoria RAM de un dispositivo.
CPU
- hardwareConcurrency (Hardware Concurrency) Propiedad sólo disponible en los Web Worker y devuelve el número de CPUs lógicas del dispositivo.

NOTA: Es importante saber que estas APIs son experimentales y que debe revisarse la compatibilidad con navegadores. Por ello hay que tomar una aproximación de “progressive enhancement” para estas APIs.

APIs para adaptative loading mediante Hooks de React: Puedes encontrarlas aquí

Estrategias de performance

Existen algunas indicaciones, más genéricas, en base a la restricción que queramos atajar:

Network
- Transferir sólo la información necesaria.
- Evitar el exceso de ancho de banda, por ejemplo, en la descarga de imágenes, en conexiones lentas.
Memory
- Reducir el uso de memoria.
- Optimizar la carga de recursos que utilicen mucha memoria.
- Desactivar animaciones que utilicen mucha memoria.
CPU
- Limitar el coste de Javascript.
- Evitar la carga de componentes con operaciones pesadas de CPU.
- Reducir el código que hace un uso abusivo de la CPU.

Teniendo en cuenta estas indicaciones, se pueden aplicar diferentes estrategias para abordar diferentes problemas que podamos encontrar. Sin embargo, cada web tiene unos retos y deben estudiarse las estrategias a llevar a cabo.

Algunas estrategias utilizadas para mejorar la experiencia de low-end devices son:

Cargar el Javascript que no es crítico para la interacción de la web, como el que pueda haber en algunos workers, sólo en CPUs rápidas.
Bloquear algunos script de terceros en dispositivos lentos.
Descargar vídeos e imágenes de menor calidad con una red lenta.
Autoplay de vídeos desactivado en dispositivos con una red lenta.
Descargar imágenes de menor calidad primero e ir descargando imágenes de mayor calidad después en dispositivos con una red lenta.
Evitar el preload de algunos recursos en dispositivos con escasa capacidad de computación.
Utilizar la caché para responder de forma más eficiente en un cambio de conexión.

La aplicación de citas Tinder adopta este tipo de estrategias: más información aquí.

Conclusiones

Si deseamos aumentar la cantidad de público al que va dirigido nuestra web o nuestra aplicación, los retos a afrontar son grandes. La fragmentación en los dispositivos a nivel de rendimiento, no sólo a nivel de diseño, pasa a ser un problema importante a tratar. La potencia de los dispositivos es mayor que en el pasado, sin embargo, la diferencia entre el hardware más potente del mercado y los dispositivos más económicos, sumado a los dispositivos más antiguos que hay en el mercado, hace que haya un gap muy grande de rendimiento.

Los desarrolladores, acostumbrados a primar las novedades y acostumbrados a trabajar con equipos potentes, a menudo sobrecargamos nuestras webs y aplicaciones con un uso excesivo de red o con un exceso de código Javascript que estresa los recursos de la máquina.

Es por esto que surgen patrones que permiten hacer más felices a los usuarios de todo tipo de dispositivo, proveyendo de una experiencia eficiente para todos.