Módulo 2: Aumentar la velocidad de los sitios web móviles

2.1.2 Análisis de la experiencia con un ancho de banda escaso y una latencia elevada

Es importante saber qué se experimenta cuando la aplicación o el sitio web se usan con una conectividad deficiente o poco fiable, y crearlos con esa información en mente. Puedes utilizar una amplia gama de herramientas.

Prueba con ancho de banda escaso y latencia elevada

Cada vez hay más personas que navegan por la Web desde dispositivos móviles. Muchas de ellas han dejado de utilizar la banda ancha fija para utilizar dispositivos móviles (incluso cuando están en casa).

En vista de esta situación, es importante saber qué se experimenta al usar la aplicación o el sitio web con una conectividad deficiente o poco fiable. Hay una amplia gama de herramientas de software que sirven para emular y simular un ancho de banda escaso y una latencia elevada.

Emular limitaciones de la red

Cuando crees o actualices un sitio web, debes asegurarte de que funciona de forma adecuada con diversas condiciones de red. Hay varias herramientas que pueden ser útiles para realizar esta comprobación.

Herramientas del navegador

Si usas DevTools de Chrome, puedes probar el sitio web con diferentes velocidades de carga y descarga y varios tiempos de ida y vuelta. Además, puedes utilizar la configuración predeterminada o personalizada en el panel Network (Red) de DevTools de Chrome:

Herramientas del sistema

Network Link Conditioner es un panel de preferencias de Mac que está disponible al instalar Hardware IO Tools para Xcode (ten en cuenta que es necesario iniciar sesión en la herramienta con un ID de Apple):

Emulación del dispositivo

Con el emulador de Android puedes simular diversas condiciones de red mientras se ejecutan aplicaciones en Android (incluidos los navegadores web y las aplicaciones web híbridas):

En iPhone, Network Link Conditioner se puede usar para simular condiciones de red deficientes (consulta la información anterior).

Prueba desde diferentes ubicaciones y redes

El rendimiento de la conectividad depende de la ubicación del servidor y del tipo de red.

WebPagetest en un servicio online que permite ejecutar un conjunto de pruebas de rendimiento del sitio web con varias redes y ubicaciones de host. Por ejemplo, puedes probar el sitio web desde un servidor en India con una red 2G, o por cable desde una ciudad de EE. UU.

Selecciona una ubicación y, en la configuración avanzada, selecciona un tipo de conexión. También puedes realizar pruebas automáticas con secuencias de comandos (por ejemplo, para iniciar sesión en un sitio web) o con las API RESTful. Todo esto te servirá para incluir pruebas de conectividad en los procesos de compilación o registro del rendimiento.

En Fiddler puedes configurar proxies globales a través de GeoEdge. Además, puedes usar las reglas personalizadas para simular velocidades de módem:

Prueba en una red de calidad deficiente

Utiliza los proxies de software y hardware para emular condiciones de red móvil problemáticas, como la limitación del ancho de banda y el retraso o la pérdida aleatoria de paquetes. Un proxy compartido o una red deficiente pueden ser el motivo por el que el equipo de desarrolladores incorpore pruebas de redes reales en su flujo de trabajo.

Augmented Traffic Control (ATC) de Facebook es un conjunto de aplicaciones con licencia BSD que se puede usar para modelar el tráfico y emular condiciones de red deficientes:

Facebook ha implantado 2G Tuesdays para conocer la experiencia que tienen los usuarios de su producto que utilizan una conexión 2G. Los martes, los empleados reciben un mensaje emergente que les ofrece la posibilidad de simular una conexión 2G.

El proxy HTTP/HTTPS de Charles se puede usar para ajustar el ancho de banda y la latencia. Charles es un software comercial, pero existe una versión de prueba gratuita.

Puedes obtener más información acerca de Charles en codewithchris.com.

Gestionar una conexión poco fiable y "lie-fi"

¿Qué significa "lie-fi"?

El término "lie-fi" se remonta a 2008 como mínimo (cuando los teléfonos tenían este aspecto) y hace referencia a una conectividad que no es lo que parece. El navegador se comporta como si hubiera conexión, cuando en realidad no la tiene por algún motivo.

Esta interpretación errónea puede dar lugar a una experiencia deficiente, ya que el navegador (o JavaScript) sigue intentando obtener recursos en lugar de desistir y optar por una alternativa adecuada. "Lie-fi" puede ser peor que quedarse sin conexión, ya que si un dispositivo no tiene conexión, JavaScript puede adoptar la acción evasiva correspondiente.

Es probable que "lie-fi" se convierta en un problema mayor puesto que cada vez hay más personas que están utilizando dispositivos móviles en lugar de la banda ancha fija. Los datos recientes del censo de EE. UU. muestran el abandono de la banda ancha fija. En el siguiente gráfico se muestra el uso de Internet en dispositivos móviles en viviendas en 2015 en comparación con 2013:

Usar tiempos de espera para gestionar la conectividad intermitente

Anteriormente se usaban métodos poco adecuados con XHR para probar la conectividad intermitente, pero service worker ofrece métodos más fiables para establecer tiempos de espera de red. Jeff Posnick explica cómo conseguirlo con los tiempos de espera de sw-toolbox en su charla Instant Loading with Service Workers (carga instantánea con service workers):

toolbox.router.get(
  '/path/to/image',
  toolbox.networkFirst,
  {networkTimeoutSeconds: 3}
);

También se planea una opción de tiempo de espera para la API Fetch, mientras que la API Streams debería servir de ayuda para optimizar la distribución de contenido y evitar solicitudes inflexibles. Jake Archibald ofrece más información sobre cómo solucionar el "lie-fi" en el vídeo Supercharging page load (sobrecarga de la carga de la página).

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?