Comprensión de las implicaciones del ancho de banda bajo y de la latencia {: .page-title } alta

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.

Haz pruebas con ancho de banda bajo y una latencia alta

Cada vez más personas experimentan la Web desde 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. Existen diferentes herramientas de software que pueden ayudarte a emular y simular condiciones de ancho de banda reducido y [latencia] alta(https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/).

Emula restricciones de la red

Cuando compiles o actualices un sitio, debes garantizar un rendimiento adecuado bajo muchas 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 de Chrome DevTools:

Restricciones de Chrome DevTools

Herramientas del sistema

Network Link Conditioner es un panel de preferencias disponible en Mac si instalas Hardware IO Tools para Xcode:

Panel de control de Network Link Conditioner de Mac

Configuración de Network Link Conditioner de Mac

Configuración personalizada de Network Link Conditioner de Mac

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:

Android Emulator

Configuración de Android Emulator

En iPhone, Network Link Conditioner se puede usar para simular condiciones de red deterioradas (ver más arriba).

Probar 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 los EE. UU.

Configuración de WebPagetest

Selecciona una ubicación y, en la configuración avanzada, un tipo de conexión. También puedes automatizar la prueba usando secuencias de comandos (por ejemplo, para acceder a un sitio) o sus API RESTful. Esto te ayudará 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:

Proxy Fiddler

Realiza una prueba 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.

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

Augmented Traffic Control de Facebook

Facebook, incluso, implementó 2G Tuesdays para ayudar a comprender la manera en que usan su producto quienes disponen de conexiones 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 Charles se puede usar para ajustar ancho de banda y latencia. Charles es un software comercial, pero hay una versión de prueba disponible.

Configuración de ancho de banda y latencia del proxy Charles

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

Controla las conexiones poco confiables 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 el motivo que fuere, 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.

El Lie-Fi probablemente se convierta en un problema más grande a medida que más gente adopte los dispositivos móviles y deje de usarse la banda ancha fija. Datos recientes de un censo de EE. UU. muestran señales de abandono de la banda ancha fija. La siguiente tabla muestra el uso de Internet móvil en casa en 2015 en comparación con 2013:

Tabla de datos de censo de EE UU. que muestra el paso de banda ancha fija a móvil, particularmente en hogares de ingresos bajos

Usa tiempos de espera para controlar la conectividad intermitente

En el pasado, se han usado métodos modificados usando XHR para probar las conectividades intermitentes, pero el service worker permite métodos más confiables para establecer tiempos de espera de red. Jeff Posnick explica la manera de lograr esto con tiempos de espera de sw-toolbox en su charla Instant Loading with Service Workers (carga inmediata con procesos de trabajo):

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

También se planea una opción de tiempo de espera para la API de extracción, y la Streams API debería ayudar optimizando la entrega de contenido y evitando solicitudes monolíticas. Jake Archibald proporciona información más detallada sobre la manera de abordar el Lie-Fi en Supercharging page load (sobrecarga de la carga de la página).