Cómo simular condiciones de red lentas en Edge y analizarlo todo

Probar una web como lo haría un usuario con mala conexión es clave para que no se rompa la experiencia cuando la red aprieta. En Microsoft Edge dispones de herramientas nativas para emular latencia alta, anchos de banda bajos, pérdidas de paquetes y hasta situaciones sin conexión. Todo sin instalar nada extra, desde DevTools.

En esta guía práctica te muestro cómo simular redes lentas en Edge con la herramienta Condiciones de red y con la pestaña Red, además de todo lo necesario para inspeccionar, filtrar, ordenar y exportar las solicitudes. También verás cómo deshabilitar caché, falsear el agente de usuario, trabajar con WebSocket, crear perfiles de limitación personalizados y sacar HAR limpios o con datos sensibles, sin dejarte nada por el camino.

Qué significa simular condiciones de red lentas en Edge

Simular red lenta consiste en aplicar una limitación (throttling) a la conexión del navegador para controlar descarga, subida, latencia, pérdida y ordenación de paquetes. Edge integra esto en DevTools, tanto desde la barra principal de la herramienta Red como desde Condiciones de red en el panel de Vista rápida.

Edge te permite además deshabilitar la caché del navegador, cambiar la cadena del agente de usuario y configurar qué content-encodings acepta el cliente (gzip, deflate, br), para replicar escenarios reales de primera visita o de compatibilidad.

¿Por qué hacerlo? Porque las conexiones varían mucho: no es lo mismo fibra en casa que WiFi público, 4G limitado o una red congestionada. También influyen la latencia (TTFB) o la negociación con proxies y Service Workers. Emulando varias situaciones sabrás dónde ajustar tu web.

Nota rápida de alcance: la limitación de DevTools afecta al tráfico del navegador dentro de esa sesión. Si necesitas limitar Windows entero, puedes usar perfiles muy lentos en Edge para validar la web, o herramientas de sistema/terceros fuera del alcance de esta guía.

Empezar: abrir DevTools y registrar actividad de red

Abre DevTools con clic derecho > Inspeccionar sobre cualquier página de pruebas. Entra en la herramienta Red. Mientras DevTools esté abierto, todas las solicitudes quedarán registradas en la tabla de la pestaña Red al recargar la página.

• Botones esenciales: puedes detener o reanudar el registro (Ctrl+E o Cmd+E), limpiar solicitudes (Ctrl+L o Cmd+K) y activar Conservar registro para no perder el histórico entre recargas.
• Capturas de pantalla durante la carga: desde el icono de Configuración de red en la esquina superior derecha, activa Capturar capturas de pantalla y recarga con Ctrl+F5. Podrás ver miniaturas, hacer zoom, filtrar por momento y analizar qué veía el usuario mientras llegaban los bytes.
• Reproducir XHR: encuentra una solicitud XHR, haz clic derecho y elige Reproducir XHR (o pulsa R). Es útil para repetir la petición sin tocar la UI de la página y ver cómo impacta con o sin limitación.

Deshabilitar la caché del navegador y cambiar el comportamiento de carga

1. Para simular la primera visita real, marca Deshabilitar caché en la parte superior de la pestaña Red. Así evitas respuestas servidas desde caché y obtienes los encabezados y tiempos completos de red.
2. Desde Condiciones de red (botón Más condiciones de red en la pestaña Red) también puedes activar Deshabilitar caché, por si prefieres centralizarlo junto con la limitación y el agente de usuario. Esta casilla afecta mientras DevTools tiene el foco.
3. Borrado manual: en la tabla de solicitudes, clic derecho y elige Borrar caché del navegador o Borrar cookies del navegador cuando necesites limpiar entre pruebas.
4. Guardar solicitudes entre cargas: activa Conservar registro para mantener el timeline de peticiones aun cuando recargas o navegas entre rutas. Muy práctico para comparativas A/B.

Limitar la red: sin conexión, preajustes 4G/3G y perfiles personalizados

1. Limitación rápida desde la barra superior: abre el menú desplegable de limitación y elige un preajuste como 4G rápido, 4G lento, 3G o sin conexión. La pestaña Red mostrará un icono de advertencia para recordarte que el throttling está activo.
2. Modo sin conexión: útil para probar PWAs con Service Workers. Selecciona sin conexión y verifica cómo responde la app, qué se cachea y qué cae en estrategias como cache-first o network-first.
3. Crear tu propio perfil: ve a Limitación > Personalizado > Agregar, o usa la ruta Configuración de DevTools > Limitación > Agregar perfil. Define Nombre, Descarga (kbit/s), Carga, Latencia (ms), Pérdida de paquetes (%), Longitud de cola y si quieres Reordenación de paquetes. Un ejemplo extremo: 10 kbps bajada/subida, 10 ms, 1% de pérdida.
4. Aplicar el perfil personalizado: cierras la Configuración, regresas a la pestaña Red y en Limitación > Personalizado eliges el perfil creado. Observa TTFB, tamaño transferido y tiempos de descarga con el agua al cuello.

Limitación también para WebSocket

El throttling alcanza las conexiones WebSocket, no solo HTTP. Establece tu perfil lento y abre una página que use WebSocket. Conecta, envía mensajes y luego filtra por socket desde el botón de Filtro de socket (WebSocket | WebTransport | DirectSocket) para aislar la conexión.

• Pestaña Mensajes: selecciona la entrada del socket y abre la pestaña Mensajes. Verás los mensajes entrantes y salientes, su longitud en bytes y la hora. Bajo limitación, comprobarás el efecto del retardo y la congestión en los timestamps.
• Tipos de frames soportados en la tabla: continuación, binario, cierre, ping y pong. Es ideal para depurar chats, streaming de datos o sincronización en tiempo real bajo redes traducidas a pedales.
• Consejo: alterna tu perfil de 10 kbps y un 4G lento para validar experiencia mínima viable y experiencia razonable. Si con 4G lento la aplicación ya sufre, hay trabajo por delante.

Agente de usuario y User-Agent Client Hints

• Invalidar el agente de usuario: en Condiciones de red desmarca Usar el valor predeterminado del navegador. Elige un UA predefinido o escribe el tuyo. Útil para probar detecciones basadas en UA o respuestas condicionadas por servidor.
• UA Client Hints: en la misma sección puedes ajustar marcas y versión (por ejemplo Edge 92), versión completa del navegador, plataforma y versión (p.e. Windows 10.0), arquitectura (x86) y modelo de dispositivo. Esto permite simular cómo responde un backend que usa hints modernos.
• Comprobación: abre la Consola y evalúa navigator.userAgentData para verificar que las hints reflejan los valores establecidos.

Configurar content-encodings válidos

Edge permite definir qué content-encodings acepta con la opción Validate Content-Encodings. En la práctica, configuras compatibilidad de encabezados content-encoding para gzip, deflate y br. Los servidores suelen enviar respuestas comprimidas y el encabezado indica cómo se codificó.

¿Por qué mirarlo? Porque afecta directamente al tamaño transferido y a los tiempos en redes lentas. Si tu servidor no negocia br o gzip correctamente, verás tamaños mayores en el timeline.

Buscar, filtrar y ordenar solicitudes como un pro

• Búsqueda global: abre la pestaña Buscar en la herramienta Red (Ctrl+F o Cmd+F), introduce la cadena y activa coincidencia de mayúsculas o expresiones regulares si lo necesitas. Los resultados resaltan tanto en la tabla como dentro de Encabezados o Respuesta.
• Filtros por propiedades: usa el cuadro Filtrar para expresiones combinadas por espacios (operan como AND). Ejemplos: mime-type:image/png larger-than:1K, domain:*.com, has-response-header:cache-control, status-code:404, scheme:https, method:POST, url:/api/.
• Propiedades disponibles: cookie-domain, cookie-name, cookie-path, cookie-value, domain, has-overrides, has-response-header, is:running (para WebSocket), larger-than, method, mime-type, mixed-content:all o mixed-content:displayed, priority, resource-type, response-header-set-cookie, scheme, set-cookie-domain, set-cookie-name, set-cookie-value, status-code, url.
• Filtros por tipo: conmutadores All, Fetch/XHR, Doc, CSS, JS, Font, Img, Med ia, Manifest, WS, Wasm u Other. Puedes activar varios manteniendo Ctrl o Cmd para acotar al grano.
• Más filtros rápidos: oculta data URLs (data:), oculta URLs de extensiones (chrome-extension://), muestra solo solicitudes bloqueadas, de terceros, o con cookies de respuesta bloqueadas (con acceso directo a la pestaña Cookies y la herramienta Problemas).

Ordenar y entender la cascada de tiempos

• Orden por columnas: haz clic en los encabezados de la tabla (Nombre, Estado, Tipo, Iniciador, Tamaño, Hora, Cumplido por) para ordenar. Añade la columna Cascada con clic derecho en el header si no la ves.
• Orden avanzado en Cascada: clic derecho en el encabezado Cascada y elige Hora de inicio, Tiempo de respuesta, Hora de finalización, Duración total o Latencia. Alterna asc/desc con un clic en el título de la columna.
• Vista previa del desglose: pasa el puntero por la barra de una solicitud en Cascada para ver un tooltip con colas, DNS, conexión, SSL, negociación de proxy, envío de solicitud, espera (TTFB) y descarga. Activa filas grandes para ver tamaño transferido y descomprimido a la vez.
• Eventos de carga: DOMContentLoaded y load aparecen como líneas verticales en la Información general, en Cascada y en el panel Resumen. Azul para DOMContentLoaded y rojo para load. Te sirve para ver en qué tramo de la cascada caen tus eventos clave.

Agrupar por iframes e inspeccionar iniciadores y dependencias

• Agrupar por marcos: activa Agrupar por fotograma en Configuración de red para colapsar/expandir iframes con sus solicitudes derivadas. Es oro cuando una página inserta muchos frames.
• Iniciadores y dependencias: mantén Shift y pasa el puntero sobre una solicitud. Verás en verde quién la inició y en rojo sus dependientes. Con orden cronológico, podrás seguir la cadena de iniciadores hacia atrás.

Destripar cada solicitud: vista previa, respuesta, encabezados y carga

• Vista previa: selecciona una solicitud y abre la pestaña Vista previa, ideal para imágenes u objetos renderizables.
• Respuesta: pestaña Respuesta para ver el cuerpo tal cual llega. Para JSON puedes copiar con formato desde Vista previa haciendo clic derecho en la primera línea y Copiar valor.
• Encabezados: pestaña Encabezados con General, Early Hints (si aplica), Respuesta y Solicitud. Marca Sin procesar para ver el orden real de recepción. Si aparecen Encabezados provisionales, puede ser caché local, recurso inválido o restricciones de seguridad. Deshabilitar caché y recargar suele devolver los encabezados completos.
• Carga (payload): pestaña Carga para parámetros de cadena de consulta y datos de formulario. Usa Ver origen para ver la representación original y alterna entre URL codificada y descodificada cuando pruebes parámetros con caracteres especiales.

Cookies, tamaño y cumplidores

• Pestaña Cookies: muestra las cookies enviadas con la solicitud, con detalle de campos. Útil para revisar SameSite, Secure, dominio y caducidades. En la herramienta Red verás avisos cuando cookies queden bloqueadas por políticas o configuración del navegador.
• Tamaño transferido y sin comprimir: activa Filas de solicitud grande para que la columna Tamaño muestre en grande el transferido y abajo el tamaño tras descompresión. Esto ayuda a valorar el impacto real de la compresión con redes limitadas.
• Cumplido por: la columna indica si una respuesta se sirvió desde caché HTTP o Service Worker. En pruebas de primera visita conviene tener caché deshabilitada para no falsificar tiempos.

Analizar WebSocket y streams de eventos

• WebSocket: con el filtro de socket activo, selecciona la conexión y abre la pestaña Mensajes. Verás hasta los 100 últimos mensajes con dirección (arriba/abajo), hora y longitud. Bajo limitación, los tiempos te cuentan la película de la red.
• EventSource y streaming: al disparar un SSE verás una solicitud tipo sse y una pestaña EventStream con mensajes que llegan a ritmo fijo. Puedes filtrar con una expresión regular y limpiar con el botón Borrar.

Exportar e importar: HAR desinfectado o con datos sensibles

• Exportar todo como HAR: desde la barra de acciones o con clic derecho en cualquier solicitud, elige Exportar HAR (desinfectado). Este formato JSON excluye por defecto campos sensibles como Cookie, Set-Cookie y Authorization.
• Incluir secretos si lo necesitas: en Configuración de DevTools > Preferencias > Red, marca Permitir generar HAR con datos confidenciales. A partir de ahí podrás exportar también la variante con datos sensibles.
• Importar un HAR: arrastra un archivo HAR a la tabla de la herramienta Red o usa Importar archivo HAR. Edge mostrará las solicitudes, sus iniciadores y te permitirá analizarlas como si las hubieras capturado en vivo.
• Copiar al portapapeles: con clic derecho sobre una solicitud puedes copiar URL, como cURL (cmd o bash), como PowerShell, como fetch (navegador o Node.js), copiar la respuesta o el seguimiento de pila (si fue iniciada por JavaScript). También hay opciones para copiar todas o las filtradas en los mismos formatos, y para copiar todo como HAR desinfectado o con datos.

Contadores y paneles: visión de conjunto

• Resumen al pie: el panel Resumen muestra número total de solicitudes y tamaño total de descarga desde que abriste DevTools. Ten presente que lo que ocurrió antes de abrir DevTools no se cuenta.
• Información general: puedes ocultarla si te estorba desmarcando Mostrar información general. A mí me encanta para ver picos de actividad y la ubicación de DOMContentLoaded y load sobre el timeline.
• Ocultar panel Filtros: si quieres más espacio para la tabla, contrae el panel de filtros con el botón Filtro. Reactívalo cuando vuelvas a necesitarlo.

Casos prácticos con limitación: del 4G a 10 kbps

• Prueba mínima razonable: aplica 4G lento y recarga. Observa TTFB y tiempos en cascada. Si el héroe visual tarda una eternidad, investiga fuentes, CSS y JS críticos y activa compresión br/gzip en el servidor.
• Prueba extrema: aplica tu perfil de 10 kbps, 10 ms, 1% de pérdida y reordenación. Sí, es un infierno, pero revela dependencias ocultas, timeouts poco amigables y recursos que jamás deberían ser bloqueantes.
• PWA sin conexión: habilita sin conexión y valida rutas almacenadas por el Service Worker, estrategias de caché y páginas de fallback. Comprueba cómo se comportan peticiones fetch fallidas y si informas al usuario correctamente.
• WebSocket con latencia: con el perfil lento, envía y recibe mensajes y revisa la pestaña Mensajes. Ajusta intervalos de ping/pong, reintentos y reconexiones exponenciales si hace falta.

Consejos extra: herramientas complementarias

• WebPageTest: servicio gratuito y de código abierto para simular condiciones típicas (56K, 3G, etc.), eligiendo ubicación y navegador. Permite tests básicos y avanzados con vídeo, bloqueo de contenido y más.
• HeadSpin: permite probar en redes móviles reales a escala mundial. Si necesitas realismo total y medir en 1.000+ redes, es una referencia potente.
• SpeedCurve: emula condiciones a lo largo del día para apreciar variaciones por congestión. Muy útil para ver cómo cambian métricas en horas punta.
• Network Link Conditioner en macOS: parte de Xcode, ideal para simular latencias, pérdidas o fallos a nivel de sistema en entornos Apple.

Guía de referencia rápida de fases temporales

• Fases que verás en la pestaña Temporización: Puesta en cola (por prioridad o límite de 6 conexiones en HTTP/1.0/1.1), Estancado (por los motivos de cola), Búsqueda DNS, Conexión (TCP y SSL), Negociación de proxy, Solicitud enviada, Preparación y Solicitud a ServiceWorker, Esperando (TTFB) y Descarga de contenido. En HTTP/2 también verás Recibir inserción y Lectura push si aplica.
• Interpretación práctica: colas largas invitan a priorizar recursos y reducir el número de conexiones, TTFB alto llama a optimizar backend y distancia, y descargas eternas a habilitar compresión y particionar lo realmente crítico.

Pequeños ajustes de interfaz que marcan diferencia

• Filas de solicitud grande: desde Configuración de red, actívalas para ver de un vistazo transferido vs descomprimido y prioridades inicial y final. Aporta claridad cuando la lista es larga.
• Columnas a medida: clic derecho en el encabezado de la tabla para ocultar/mostrar columnas y para añadir columnas personalizadas basadas en encabezados de respuesta. Incluso puedes gestionar columnas de encabezado desde una ventana dedicada.

Si construyes un flujo de pruebas con caché deshabilitada, limitación realista, filtros por tipo y un repaso de TTFB, cascada, payloads y HAR, tendrás una foto muy fiel de cómo rinde tu web en situaciones duras, y además sabrás exactamente qué tocar para que vuele incluso cuando la red va renqueando.

Artículo relacionado:

Guía completa para hacer un test de velocidad de red correctamente

Isaac

Redactor apasionado del mundo de los bytes y la tecnología en general. Me encanta compartir mis conocimientos a través de la escritura, y eso es lo que haré en este blog, mostrarte todo lo más interesante sobre gadgets, software, hardware, tendencias tecnológicas, y más. Mi objetivo es ayudarte a navegar por el mundo digital de forma sencilla y entretenida.