Es importante comprender cómo es usar tu app o tu sitio cuando la conectividad es deficiente o poco confiable, y cómo desarrollar en consecuencia. Varias herramientas pueden ayudarte.
Realiza pruebas con ancho de banda bajo y latencia alta
Una proporción creciente de personas experimentan la Web en dispositivos móviles. Incluso en el hogar, muchas personas están abandonando la banda ancha fija y adoptando la red móvil.
En este contexto, es importante comprender cómo es el uso de tu app o tu sitio cuando la conectividad es deficiente o poco confiable. Existe una variedad de herramientas de software que pueden ayudarte a emular y simular un ancho de banda bajo y una latencia alta.
Emula la limitación de la red
Cuando compiles o actualices un sitio, debes garantizar un rendimiento adecuado en diversas condiciones de conectividad. Varias herramientas pueden ayudar.
Herramientas del navegador
Chrome DevTools te permite probar tu sitio con diferentes velocidades de carga y descarga y tiempos de ida y vuelta, usando configuraciones predeterminadas o personalizadas del panel Network. Consulta Primeros pasos con el análisis del rendimiento de red para aprender los conceptos básicos.
Herramientas del sistema
Network Link Conditioner es un panel de preferencias disponible en Mac si instalas Hardware IO Tools para Xcode:
Emulación de dispositivos
Android Emulator te permite simular varias condiciones de red mientras ejecutas apps (incluidos navegadores web y apps web híbridas) en Android:
En iPhone, Network Link Conditioner se puede usar para simular condiciones de red deterioradas (ver más arriba).
Prueba desde diferentes ubicaciones y redes
El rendimiento de la conectividad depende de la ubicación del servidor y del tipo de red.
WebPagetest es un servicio en línea que ofrece un conjunto de pruebas de rendimiento que puedes ejecutar para tu sitio usando diferentes redes y ubicaciones de host. Por ejemplo, puedes probar tu sitio desde un servidor de la India en una red 2G o por cable desde una ciudad de EE.UU.
Selecciona una ubicación y, en la configuración avanzada, un tipo de conexión. Incluso puedes automatizar las pruebas con secuencias de comandos (por ejemplo, para acceder a un sitio) o con sus APIs RESTful. Esto te ayuda a incluir pruebas de conectividad en los procesos de compilación o el registro de rendimiento.
Fiddler admite la creación de conexiones proxy globales a través de GeoEdge, y sus reglas personalizadas se pueden usar para simular velocidades de módem:
Cómo realizar pruebas en una red deteriorada
Los proxies de software y hardware te permiten emular condiciones de red móvil problemáticas, como limitación de ancho de banda, demora de paquete y pérdida de paquete aleatoria. Un proxy compartido o una red deteriorada pueden permitir a un equipo de desarrolladores incorporar pruebas de red reales a su flujo de trabajo.
El Control de tráfico aumentado (ATC) de Facebook es un conjunto de aplicaciones con licencia BSD que se pueden usar para definir el tráfico y emular condiciones de red deterioradas:
Facebook incluso estableció los 2G Tuesdays para comprender cómo usan su producto los usuarios de 2G. Los días martes, los empleados reciben un aviso emergente que les da la opción 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 hay una versión de prueba disponible.
Puedes encontrar más información acerca de Charles en codewithchris.com.
Controla la conectividad poco confiable y el “lie-fi”
¿Qué es el lie-fi?
El término lie-fi data de al menos 2008 (cuando los teléfonos tenían este aspecto) y hace referencia a conectividad que no funciona como parece. Tu navegador se comporta como si tuviera conectividad cuando, por cualquier motivo, no la tiene.
Cuando se malinterpreta, la conectividad puede generar una experiencia deficiente debido a que el navegador (o JavaScript) intenta repetidamente recuperar recursos en lugar de desistir y seleccionar un recurso de reserva sensible. El Lie-Fi puede ser incluso peor que la ausencia de conexión; por lo menos, cuando un dispositivo está completamente sin conexión, tu JavaScript puede tomar una medida evasiva adecuada.
Es probable que el lie-fi se convierta en un problema mayor a medida que más personas se cambien a la red móvil y abandonen la banda ancha fija. Los datos recientes del censo de EE.UU. muestran un abandono de la banda ancha fija. En el siguiente gráfico, se muestra el uso de Internet móvil en casa en 2015 en comparación con 2013:
Usa tiempos de espera para controlar la conectividad intermitente
En el pasado, se usaban métodos modificados con XHR para probar la conectividad intermitente, pero el service worker permite métodos más confiables para establecer tiempos de espera de red. Puedes hacerlo usando Workbox con solo unas pocas líneas de código:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Puedes obtener más información sobre Workbox en la charla de Jeff Posnick en la Chrome Dev Summit, Workbox: Flexible PWA Libraries.
También se está desarrollando la función de tiempo de espera para la API de Fetch, y la API de Streams debería ayudar a optimizar la entrega de contenido y evitar solicitudes monolíticas. Jake Archibald proporciona más detalles sobre la manera de abordar el Lie-Fi en Supercharging page load.