Conceptos básicos sobre el ancho de banda bajo y la latencia alta

Es importante comprender cómo se siente usar tu app o sitio cuando la conectividad es deficiente o poco confiable, y compilar en consecuencia. Varias herramientas pueden ayudarte.

Realiza pruebas con un ancho de banda bajo y una latencia alta

Una proporción cada vez más de personas experimentan la Web en dispositivos móviles. Incluso en sus hogares, muchas personas están abandonando la banda ancha fija y adoptando la red móvil.

En este contexto, es importante comprender cómo se siente usar tu app o sitio cuando la conectividad es deficiente o poco confiable. Existen diversas herramientas de software que pueden ayudarte a emular y simular un ancho de banda bajo y una latencia alta.

Emular la limitación de la red

Cuando compilas o actualizas un sitio, debes garantizar un rendimiento adecuado en varias condiciones de conectividad. Hay varias herramientas que pueden ayudar.

Herramientas del navegador

Las herramientas para desarrolladores de Chrome te permiten probar tu sitio con distintas velocidades de carga y descarga, y tiempos de ida y vuelta, mediante ajustes predeterminados o una configuración personalizada del panel de red. Consulta Cómo comenzar a analizar el rendimiento de la red para conocer los conceptos básicos.

Limitación de las Herramientas para desarrolladores de Chrome

Herramientas del sistema

Network Link Conditioner es un panel de preferencias disponible en Mac si instalas herramientas de E/S de hardware 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, se puede usar Network Link Conditioner para simular condiciones de red deterioradas (ver arriba).

Realiza pruebas 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 permite ejecutar un conjunto de pruebas de rendimiento en tu sitio mediante varias 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.

Configuración de WebPagetest

Selecciona una ubicación y, en la configuración avanzada, selecciona un tipo de conexión. Incluso puedes automatizar las pruebas mediante secuencias de comandos (por ejemplo, para acceder a un sitio) o con sus APIs de RESTful. Esto te ayuda a incluir pruebas de conectividad en los procesos de compilación o en 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 las velocidades del módem:

Proxy Fiddler

Cómo realizar pruebas en una red deteriorada

Los proxies de software y hardware te permiten emular condiciones problemáticas de red móvil, como la limitación del ancho de banda, la demora de paquetes y la pérdida aleatoria de paquetes. Con un proxy compartido o una red deteriorada, un equipo de desarrolladores puede incorporar pruebas de red reales en su flujo de trabajo.

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

Aumento del control de tráfico de Facebook

Facebook incluso estableció los martes de 2G para ayudar a comprender cómo las personas conectadas a 2G usan su producto. Los martes, a los empleados les aparece una ventana emergente que les da la opción de simular una conexión 2G.

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

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

Puedes obtener más información sobre Charles en el sitio codewithchris.com.

Controla la conectividad poco confiable y el “lie-fi”

¿Qué es el “Lie-Fi”?

El término lie-fi se remonta al menos al año 2008 (cuando los teléfonos se veían asíesto) y hace referencia a una conectividad que no es lo que parece. Tu navegador se comporta como si tuviera conectividad cuando, por cualquier motivo, no la tiene.

La conectividad mal interpretada puede generar una experiencia deficiente, ya que el navegador (o JavaScript) continúa intentando recuperar recursos en lugar de darse por vencido y elegir un resguardo razonable. En realidad, el lie-fi puede ser peor que el uso sin conexión. Por lo menos, si un dispositivo está definitivamente sin conexión, tu JavaScript puede realizar una acción evasiva adecuada.

Es probable que el lie-fi se convierta en un problema más grande a medida que más personas se cambien a los dispositivos móviles y no la banda ancha fija. Los datos del censo de EE.UU. recientes muestran un desplazamiento 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:

Gráfico de los datos del censo de EE.UU. que muestra
el paso de la banda ancha fija a la telefonía móvil,

Usa tiempos de espera para controlar la conectividad intermitente

En el pasado, se utilizaban métodos modificados con XHR para probar la conectividad intermitente, pero el service worker habilita métodos más confiables para establecer tiempos de espera de la red. Para ello, puedes usar 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 Chrome Dev Summit, Workbox: bibliotecas flexibles de AWP.

También se está desarrollando la funcionalidad 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 las solicitudes monolíticas. Jake Archibald proporciona más detalles sobre cómo abordar el lie-fi en Supercharging page load (Sobrecarga de la carga de la página).

Comentarios