Aprende análisis HAR

1. Introducción / ¿Qué es HAR?

Un archivo HAR (abreviatura de HTTP Archive) es un registro de todo lo que hace tu navegador en la red al cargar una página web. Piénsalo como la “caja negra” de tu sesión de navegación: cada solicitud al servidor, cada respuesta y cada demora quedan registradas.

Existe porque los sitios modernos son complejos. Una sola página puede disparar cientos de solicitudes: HTML, JavaScript, CSS, fuentes, imágenes, llamadas API, anuncios, píxeles de rastreo. Si algo se siente lento o roto, un archivo HAR muestra dónde está el problema: ya sea un servidor lento, un bucle de redirección o un script que bloquea todo lo demás.

Técnicamente, un HAR es solo un gran archivo JSON. Ábrelo en un editor de texto y verás datos estructurados con entradas como url, status y timings. Para una persona puede verse abrumador — líneas y líneas de solicitudes—, pero para las herramientas es oro puro: una línea de tiempo completa de cómo cargó tu página.

2. Cuándo usar archivos HAR

Los archivos HAR son más útiles cuando algo en una página web se siente mal: carga lenta, imágenes rotas, inicios de sesión fallidos o un spinner misterioso que nunca termina. Actúan como el cuaderno de notas de un detective, mostrando exactamente qué intentó hacer el navegador y cuánto tardó cada paso.

Podrías usar un archivo HAR cuando:

• Diagnosticas problemas de rendimiento: averigua si una página lenta se debe al servidor, a demasiadas redirecciones o a archivos JavaScript pesados.
• Depuras errores de red: ve qué solicitudes fallaron, agotaron tiempo o devolvieron errores como 404 o 500.
• Analizas el impacto de terceros: detecta scripts de anuncios, analíticas o widgets incrustados que retrasan el resto de la página.
• Revisas llamadas API: captura las solicitudes exactas que hace tu app, incluidos encabezados, payloads y respuestas.
• Trabajas con equipos de soporte: muchos proveedores SaaS piden un archivo HAR cuando reportas un bug. Les da una vista reproducible de lo que experimentó tu navegador.

3. Cómo generar un archivo HAR

Crear un archivo HAR viene incorporado en tu navegador. Solo toma un minuto y no necesitas herramientas especiales.

Chrome / Edge / Brave (navegadores Chromium)

1. Abre la página que quieres capturar.
2. Presiona F12 (o clic derecho → Inspeccionar) para abrir DevTools.
3. Ve a la pestaña Network.
4. Verifica que el botón rojo ● de grabar esté activo (haz clic si no lo está).
5. Actualiza la página para capturar todo desde el inicio.
6. Deja que la página cargue por completo.
7. Clic derecho en la lista de solicitudes de red → Guardar todo como HAR con contenido.

Firefox

1. Abre la página.
2. Presiona F12 para abrir DevTools.
3. Cambia a la pestaña Network.
4. Asegúrate de que la grabación esté habilitada (punto rojo).
5. Actualiza la página y espera a que cargue por completo.
6. Clic derecho en la lista → Guardar todo como HAR.

⚠️ Consejos y errores comunes

• Siempre empieza a capturar antes de refrescar la página.
• No cambies de pestaña a mitad de la captura; los navegadores pueden pausar la grabación.
• Los archivos HAR pueden contener datos sensibles como cookies o payloads. Compártelos solo con personas o herramientas de confianza.

4. Cómo leer un archivo HAR manualmente

Abre un archivo HAR en un editor de texto y verás un enorme objeto JSON. Cada entrada representa una solicitud que hizo tu navegador. Los campos más importantes son:

• url – la dirección solicitada.
• status – código de estado HTTP (200 OK, 404 Not Found, etc.).
• timings – cuánto tardó cada fase: búsqueda DNS, conexión, espera del servidor, descarga de contenido.
• request/response headers – cookies, user agents y caché.
• redirects – si el navegador tuvo que rebotar entre URL.

Algunas preguntas rápidas para interpretar un HAR sin herramientas:

• ¿Hay muchos 301/302 seguidos? Podrías tener una cadena de redirecciones que retrasa todo.
• ¿Las fases de "wait" son largas (por ejemplo, > 500 ms) mientras DNS y TCP son rápidas? Eso apunta a un servidor lento o saturado.
• ¿Los tiempos de "receive" son largos? El contenido podría ser enorme o la conexión muy lenta.
• ¿Hay solicitudes que se disparan mucho después de cargar la página? Podrían ser scripts pesados o llamadas API retardadas.

Leer manualmente es útil para un vistazo rápido, pero analizar docenas o cientos de solicitudes es mejor con herramientas (como HAR Analyzer) que agregan datos y resaltan anomalías.

5. Problemas comunes visibles en archivos HAR

Los archivos HAR exponen problemas que a veces son invisibles en una simple carga de página. Algunos patrones frecuentes:

• Cadenas de redirecciones: múltiples 301/302 antes de llegar al destino final. Cada salto agrega latencia.
• Errores intermitentes: solicitudes 500 o 503 mezcladas con 200. Sugiere servidores inestables.
• Solicitud de fuente bloqueante: una fuente web tardía puede retrasar el renderizado de texto.
• Demasiadas bibliotecas JS: docenas de scripts pequeños que podrían agruparse para reducir conexiones.
• Solicitudes de terceros lentas: scripts de anuncios o widgets que retrasan el resto de la página.
• Contenido que no se cachea: recursos estáticos sin headers de caché, obligando a recargas completas cada vez.

Detectar estos patrones temprano te ayuda a priorizar dónde optimizar primero.

6. Herramientas para analizar HAR

Puedes empezar con DevTools del navegador para capturar y mirar rápidamente. Para análisis más profundo:

• HAR Analyzer: Sube un HAR y obtén métricas, gráficos y alertas automáticas sobre problemas comunes.
• HTTP Archive Viewer: herramientas de código abierto para inspeccionar cada solicitud y sus tiempos.
• Scripts personalizados: usa Node o Python para recorrer el JSON y extraer las métricas que importan a tu equipo.

Elige la herramienta según el objetivo: depuración rápida, monitoreo continuo o auditorías de rendimiento.

7. Ejemplo paso a paso

Imagina que la página de checkout de tu tienda tarda 8 segundos en cargar y algunas imágenes no aparecen. Capturas un archivo HAR y encuentras:

• 4 redirecciones antes de llegar a /checkout (de http → https, luego a la versión www, etc.).
• Varias solicitudes de imágenes devuelven 404 — rutas rotas tras un despliegue reciente.
• Un script de terceros tarda 2 segundos en responder y bloquea otras solicitudes.

Con esos datos, puedes corregir los enlaces de imágenes, reducir las redirecciones y cargar el script externo de forma asíncrona para acelerar la experiencia.

8. Preguntas frecuentes