El panel Network de DevTools de tu navegador ayuda a identificar qué recursos se cargan y cuándo. Cada fila del panel Red corresponde a una URL específica que cargó tu app web.
Conoce lo que cargas
Para idear las estrategias de almacenamiento en caché adecuadas para tu aplicación web, debes controlar qué exactamente estás cargando. Cuando se crea una aplicación web confiable, la red puede estar sujeta a todo tipo de fuerzas oscuras. Debes comprender las vulnerabilidades de la red si quieres abordarlas en tu app.
Es posible que ya tengas una idea bastante clara de lo que carga tu aplicación web. Si solo usas una pequeña dispersión de archivos HTML, JavaScript, CSS y de imagen estáticos, es posible que sea cierto. Sin embargo, en cuanto comienzas a combinar recursos de terceros alojados en redes de distribución de contenido, con solicitudes a la API dinámicas y respuestas generadas por el servidor, el panorama se vuelve rápidamente más confuso.
Por ejemplo, una estrategia de almacenamiento en caché que tenga sentido para algunos archivos CSS pequeños probablemente no tenga sentido para cientos de imágenes grandes.
Cómo saber cuándo cargas
Otra parte del panorama general de la carga es cuándo se carga todo.
Algunas solicitudes a la red, como la solicitud de navegación para tu HTML inicial, se realizan de forma incondicional en cuanto un usuario visita una URL determinada. Ese código HTML podría contener referencias codificadas a archivos CSS o JavaScript críticos que también deben cargarse para mostrar tu página interactiva. Todas estas solicitudes se encuentran en tu ruta de carga crítica. Deberás almacenarlos en caché de forma agresiva para que sean rápidos y confiables.
Es posible que otros recursos, como las solicitudes a la API o los recursos cargados de forma diferida, no comiencen a cargarse hasta mucho después de que se complete toda la carga inicial. Si esas solicitudes solo se producen después de una secuencia específica de interacciones del usuario, es posible que se solicite un conjunto de recursos completamente diferente en varias visitas a la misma página. A menudo, una estrategia de almacenamiento en caché menos agresiva es adecuada para el contenido que identificaste como fuera de la ruta de carga crítica.
Las columnas Nombre y Tipo ayudan con el qué
Las columnas Nombre y Tipo ayudan a proporcionar un panorama significativo de qué se está cargando. La respuesta a la pregunta "¿qué se está cargando?" en el ejemplo anterior es un total de cuatro URLs, cada una de las cuales representa un tipo de contenido único.
El nombre representa la URL que solicitó tu navegador, aunque solo verás la última parte de la ruta de acceso de la URL. Por ejemplo, si se carga https://example.com/main.css, solo verás main.css en Nombre.
Los últimos caracteres de la ruta de la URL, después del punto (p.ej., "css"), se conocen como la extensión de la URL.
Por lo general, la extensión de la URL indica qué tipo de recurso se solicita y se asigna directamente a la información que se muestra en la columna Tipo. Por ejemplo, v2.html es un documento y main.css es una hoja de estilo.
La columna Cascada ayuda con el cuándo
Examina la columna Cascada, comenzando por la parte superior y siguiendo hacia abajo. La longitud de cada barra representa la cantidad total de tiempo que se dedicó a cargar cada recurso. ¿Cómo puedes saber la diferencia entre una solicitud que se realiza como parte de la ruta de carga crítica y una solicitud que se activa de forma dinámica mucho después de que se completa la carga inicial de la página?
La primera solicitud en la cascada siempre será para el documento HTML, por ejemplo, v2.html. Todas las solicitudes posteriores fluirán (como una cascada) desde esta solicitud de navegación inicial, según las imágenes, las secuencias de comandos y los estilos a los que hace referencia el documento HTML.
La cascada muestra que, en cuanto termina de cargarse v2.html, comienzan las solicitudes para los recursos a los que hace referencia (también conocidos como subrecursos). El navegador puede solicitar varios subrecursos al mismo tiempo, lo que se representa con las barras superpuestas en la columna Cascada para main.css y logo.svg. Por último, en la captura de pantalla, puedes ver que main.js comienza a cargarse por último y termina de cargarse después de que también se completan las otras tres URLs.