Cómo utilizar archivos HAR para analizar el rendimiento a lo largo del tiempo

Cuando considero el rendimiento de un sitio web, me vienen a la mente varias cosas. Pienso en mirar las solicitudes de una página, comprender qué recursos se están cargando y cuánto tiempo tardan estos recursos en estar disponibles para los usuarios.

Pestaña Red de Chrome

La pestaña de red le dará una tabla que contiene todos los activos cargados en la página. También le mostrará información relevante sobre el origen de esos activos (dominio, código de estado HTTP, tamaño), quién inició la solicitud y el orden en el que se cargaron en una representación en cascada.

Puede agregar más información a esta tabla haciendo clic con el botón derecho en uno de los encabezados de la tabla y eligiendo otras columnas.

Las columnas de tamaño, tiempo y cascada serán cruciales para comprender el rendimiento de una página. El valor de tamaño presentará el tamaño comprimido con gzip del recurso (cuando corresponda), mientras que la columna de tiempo muestra la duración total desde el inicio de la solicitud hasta la recepción del byte final en la respuesta.

Por último, pero no menos importante, la columna de cascada demuestra cuándo se carga el activo junto con las otras solicitudes.

Las mejoras de rendimiento se notan mediante cambios en su código / entorno. Entonces, ¿cómo hacemos un seguimiento de lo que está siendo analizado por la pestaña Red? Exportando la página en formato HAR.

¿Cuál es el archivo HAR?

Un archivo HAR (abreviatura de HTTP Archive) es un archivo JSON que contiene toda la información sobre las interacciones de un navegador con una página. Contendrá el documento HTML y sus respectivos archivos JS y CSS.

Junto con este contenido, un archivo HAR también contendrá la información de todos los encabezados y los metadatos del navegador (es decir, la hora de cada solicitud).

Es importante mencionar aquí que las cookies y los datos del formulario también se registrarán en el archivo, así que tenga cuidado de no incluir información confidencial (datos personales, contraseñas, números de tarjetas de crédito) mientras audita las páginas.

Además, debe auditar las páginas en ventanas privadas, lo que evita las extensiones del navegador. Es importante evitar las extensiones de un navegador, ya que pueden modificar los tiempos de carga de una página.

Generando archivos HAR

Google Chrome

  • Cierre todas las ventanas de incógnito en Google Chrome.
  • Abre una nueva ventana de incógnito en Google Chrome.
  • Vaya a Ver> Desarrollador> Herramientas para desarrolladores.
  • En el panel Herramientas para desarrolladores, elija la pestaña Red.
  • Marque las casillas de verificación Conservar registro y Desactivar caché para registrar todas las interacciones.
  • Recarga la página.
  • Haga clic en Exportar HAR (icono de flecha hacia abajo) para exportar el archivo HAR.
  • Guarde el archivo HAR.

Firefox

  • Cierre todas las ventanas privadas en Firefox.
  • Abra una nueva ventana privada en Firefox.
  • Vaya a Herramientas> Desarrollador> Red o ctrl-shift-E.
  • Recarga la página.
  • En el icono de Cog (parte superior derecha de la página), elija Guardar todo como Har.
  • Guarde el archivo HAR.
Pestaña Red de Firefox

Safari

  • Asegúrese de que la casilla de verificación Mostrar menú Desarrollar en la barra de menús esté marcada en Safari> Preferencias> Avanzado.
  • Elija Archivo> Abrir nueva ventana privada.
  • Visite la página web donde ocurre el problema.
  • Elija Desarrollar> Mostrar inspector web. Aparece la ventana del Inspector web.
  • Recarga la página.
  • Haga clic en Exportar en la parte superior derecha del panel.
  • Guarde el archivo HAR.
Pestaña Safari Network

Lectura de archivos HAR

Una vez que tenga un archivo HAR, puede probar algunos visores HAR en línea. Mi favorito personal es el creado por Jan Odavarko.

Visor de HAR

Lo que me gusta de este visor en particular es el hecho de que puede tener varios archivos abiertos al mismo tiempo, lo que hace que sea más fácil compararlos.

Usar archivos HAR para analizar el rendimiento de una página

Los archivos HAR pueden ser útiles para recopilar información sobre los activos de una página. Como tiene información detallada sobre su contenido, puede comparar lo que ha mejorado (o en algunos casos, no mejorado) después de que se lanza una nueva función o se completa un rediseño, por ejemplo.

Durante mi flujo de trabajo, me gusta realizar un seguimiento de los valores finales de tamaño / tiempo de algunas páginas del producto en el que estoy trabajando.

Más información

  • Medir los tiempos de carga de recursos
  • Código fuente de HAR Viewer

También publicado en mi blog. Si te gusta este contenido, sígueme en Twitter y GitHub. Foto de portada de William Daigneault / Unsplash