Network en DevTools: qué se descarga y pesa

Explora con precisión cómo la pestaña Network en DevTools te ayuda a verificar qué se descarga en tu proyecto, cuánto pesa y cuánto tarda. Con esta guía práctica entenderás cómo leer estados, tipos de archivos, tamaños, tiempos y el Waterfall para detectar cuellos de botella y optimizar la carga.

¿Para qué usar Network en DevTools?

La pestaña Network sirve para corroborar lo que se carga o descarga cuando ingresas a una URL y presionas enter. Ahí verás los assets que el navegador solicita y recibe para renderizar la página: HTML, estilos, JavaScript e imágenes. Son las dependencias reales que tu proyecto necesita para mostrarse.

• Abre Network y luego refresca la página para ver datos.
• Observa archivos solicitados, su peso y su tiempo de descarga.
• Úsalo cuando algo no carga como esperas.

Nota útil: si al abrir Network ves la lista vacía, es normal. La captura comienza cuando la pestaña está abierta y recargas.

¿Qué información clave muestra Network?

Al refrescar, verás una tabla con archivos y líneas de color. Cada columna aporta señales para el diagnóstico del rendimiento.

¿Cómo leer status y tipo?

• Status: muestra el status HTTP. Un 200 indica que la petición fue exitosa.
• Tipo: identifica si es documento, HTML, estilos, código o PNG.

¿Qué revela inicializar sobre el origen?

• Inicializar indica qué archivo solicitó el recurso actual.
• En el ejemplo, el HTML pide los estilos, el JavaScript y la imagen, porque esas referencias están en el head del documento.

¿Cómo interpretar tamaño, transferencia y tiempos?

• Tamaño: verás dos números. El de arriba es el peso del archivo sin minificar ni optimizar. El de abajo es el peso ya optimizado.
• Totales de la sesión: 4 recursos con aproximadamente 9.9 KB transferidos y 4.4 KB de recursos. La diferencia surge por la optimización.
• Tiempos: el HTML inicial tardó cerca de 119 ms. El tiempo total para que todo estuviera disponible fue alrededor de 476 ms. Si recargas y ves aún menos tiempo, puede influir la caché.
• Waterfall: al pasar el puntero sobre la barra verás la división del tiempo de descarga. Un archivo puede rondar 351 ms según la medición puntual.

¿Cómo detectar cuellos de botella y actuar?

Cuando una página tarda en cargar, Network permite encontrar la causa. Observa los recursos con mayor tiempo o peso y actúa sobre ellos.

• Identifica el archivo que más tarda en el Waterfall.
• Revisa el peso: si es alto, impacta la descarga.
• Verifica la minificación: si los dos dígitos del tamaño aparecen iguales y estás seguro de haber minificado, probablemente no se aplicó.
• Considera la caché al interpretar mejoras en recargas.

¿Tienes dudas o un caso concreto que quieras analizar con Network? Compártelo y revisamos juntos cómo interpretarlo.