El monitor de red. Herramientas de desarrollo

12 de mayo de 2019

Comienzo esta serie de artículos dedicados a profundizar en las herramientas que los navegadores ponen a nuestra disposición. Y voy a empezar por el monitor de red. Me he encontrado con personas, que dedicadas al desarrollo, desconocía algunas funcionalidades que ofrece esta herramienta.

Creo que en todos los navegadores que disponen de herramientas de desarrollo se puede acceder a éstas pulsando la tecla F12. También se puede acceder pulsando «Ctrl+Mayúsc.+I» o a través del menú: menú > Desarrollador web > Alternar herramientas en Firefox; menú > Más herramientas > Herramientas para desarrolladores, en Chrome.

¿Qué es el monitor de red?

Monitor de red de Mozilla Firefox
Monitor de red de Mozilla Firefox

En general, esta herramienta registra del tráfico web mientras se navega. Lo primero que destaca es un listado con todos los recursos descargados para mostrar la página actual, una barra superior dónde definir diferentes opciones y, en el pie, una barra de estado donde se muestra un resumen del listado.

¿Qué podemos ver en la barra de estado?

La barra de estado que aparece al fondo del informe tenemos información muy útil, sobre todo cuando estamos intentando mejorar la velocidad de carga de una web.

Barra de estado del Monitor de red de Firefox
Barra de estado del monitor de red de Firefox

De izquierda a derecha, lo primero que nos muestra es el número de solicitudes, esto es el número de ficheros que se descargan.

A continuación vemos el tamaño de los datos totales, y el tamaño de los datos transferidos. En general, los transferidos serán menores dado que, es una buena costumbre transferirlos comprimidos.

Luego de estos, los tiempos significativos en la carga de la página. Tiempo total, el tiempo de carga y procesamiento del html sin scripts, css, ni imágenes (DOMContentLoad); y el tiempo total de carga, ahora sí, con todos los elementos descargados y procesados.

Para mí, el tiempo al que menos importancia le doy es al total. Éste no es estático, sino que puede cambiar durante el tiempo en el que el usuario está visualizando la página, por ejemplo, si se producen conexiones al servidor empleando ajax.

El más importante, DOMContentLoad, representará el tiempo en el que el contenido informativo básico de la página está disponible para el usuario. Un valor alto en este tiempo podría significar que tenemos problemas en el lado del servidor, y no está funcionando demasiado fino. Demasiados plugins, versiones antiguas de php, un servidor sobrecargado… pueden ser motivos de que este tiempo sea demasiado grande.

La diferencia de tiempos entre los eventos DOMContentLoad y Load, representará el tiempo que se ha necesitado para obtener y procesar los scripts, estilos e imágenes de la página. Esta diferencia es lo que podemos minimizar cuando optimizamos los recursos servidos en nuestra web: imágenes optimizadas, scripts minimizados y comprimidos, políticas de caché del navegador, lazy load para las imágenes, etc.

¿Qué encontramos en la barra superior?

Encima del listado de recursos descargados encontramos, principalmente, herramientas de filtrado.

Barra superior del monitor de red de Firefox
Barra superior del monitor de red de Firefox

En general, un cuadro de texto donde podemos filtrar la lista por algún término que conozcamos.

A continuación, una serie de filtros preestablecidos que se pueden aplicar de manera individual o combinándolos, lo que permite un análisis más cómodo de los recursos descargados.

Lo siguente que encontramos son dos ckeckbox para activar o desactivar los registros persistentes, con lo que en cada recarga no destruirá los datos de la anterior; o desactivar la caché del navegador, que al recargar la página descartará las copias de los recursos almacenadas localmente.

Los registros persistentes nos pueden ayudar, en un proceso de optimización, a contrastar cómo ha variado el tamaño de algún recurso.

Desactivar caché hace que en cada recarga el navegador descarte los recursos cacheados y los descargue, de nuevo, desde el servidor.

Finalmente, podemos simular la velocidad de la red, throttling (estrangulamiento) en Chrome. Nos da la posibilidad de analizar el comportamiento de nuestra página para diferentes dispositivos sin limitarnos únicamente al aspecto final, sino también los tiempos de carga en redes más lentas. Es muy probable que muchas de las visitas que reciba nuestro sitio vengan desde dispositivos móviles. Las redes móviles, a día de hoy, en España, alcanzan velocidades altas. Pero, no todos nuestros usuarios tienen por qué disponer de la última tecnología, ni de las redes más veloces.

Y voy a parar aquí hoy, porque esto se está alargando bastante. En el próximo artículo me meteré de lleno a analizar lo qué aparece cuando hacemos click sobre alguno de los recursos que aparecen listados: Cabeceras, cookies, parámetros…

Hasta entonces, un abrazo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.