El panel de red de las Herramientas para desarrolladores de tu navegador ayuda a identificar qué recursos están cargados y cuándo se cargan. Cada fila del panel Network corresponde a una URL específica que cargó tu app web.
Cómo saber qué cargas
Idear las estrategias de almacenamiento en caché correctas para tu aplicación web requiere tener control sobre qué es exactamente lo que se está cargando. Cuando se compila una aplicación web confiable, la red puede estar sujeta a todo tipo de fuerzas oscuras. Debes comprender las vulnerabilidades de la red para poder lidiar con ellas en la app.
Tal vez creas que ya tienes una idea bastante clara de lo que carga tu aplicación web. Si solo usas una pequeña cantidad de archivos de imagen, JavaScript, HTML y JavaScript estáticos, es posible que esto sea así. Sin embargo, apenas comienzas a combinar recursos de terceros alojados en redes de distribución de contenidos mediante solicitudes dinámicas a la API y respuestas generadas por el servidor, el panorama se vuelve más confuso con rapidez.
Es probable que una estrategia de almacenamiento en caché que tenga sentido para algunos archivos CSS pequeños no sea útil para cientos de imágenes grandes, por ejemplo.
Cómo saber cuándo cargas
Otra parte del panorama de carga general es cuando 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 puede contener referencias codificadas a archivos críticos de CSS o JavaScript que también deben cargarse para mostrar tu página interactiva. Todas estas solicitudes se encuentran en la ruta de carga crítica. Deberás almacenarlos en caché de forma intensa para que sean confiables y rápidos.
Es posible que otros recursos, como las solicitudes a la API o los elementos de carga diferida, no comiencen a cargarse hasta mucho después de que se completa toda la carga inicial. Si esas solicitudes solo se realizan 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 apropiada para el contenido que identificaste como fuera de la ruta de carga crítica.
Las columnas Nombre y Tipo ayudan con la
Las columnas Nombre y Tipo ayudan a proporcionar un panorama significativo de lo que se carga. La respuesta a “¿qué se carga?” en el ejemplo anterior es un total de cuatro URLs, cada una de las cuales representa un tipo único de contenido.
El nombre representa la URL que solicitó tu navegador, aunque solo verás la última parte de la ruta de la URL en la lista. Por ejemplo, si se carga https://example.com/main.css, solo verás main.css en Nombre.
Los últimos caracteres de la ruta de acceso 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 te 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 Waterfall ayuda con el momento
Examina la columna Waterfall, comenzando por la parte superior y avanzando hacia abajo. La longitud de cada barra representa la cantidad total de tiempo que se dedicó a cargar cada recurso. ¿Cómo puedes diferenciar 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 de 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 en función de las imágenes, las secuencias de comandos y los estilos que haga referencia el documento HTML.
La cascada muestra que, no bien termina de cargarse v2.html, se inician las solicitudes de los elementos 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 Waterfall para main.css y logo.svg. Por último, en la captura de pantalla, puedes ver que main.js comienza a cargarse en último lugar y termina de cargarse después de que las otras tres URLs también se hayan completado.