El panel Network de la herramienta para desarrolladores de tu navegador te ayuda a identificar los recursos y cuándo se cargan. Cada fila en el panel Network corresponde a un URL específica que cargó tu app web.
Conoce lo que cargas
Proponer las estrategias adecuadas de almacenamiento en caché para la aplicación web controlar qué se carga exactamente Cuando se crea una Web confiable la red puede estar sujeta a todo tipo de fuerzas oscuras. Debes entender las vulnerabilidades de la red si quieres lidiar con ellas en tu .
Tal vez creas que ya tienes una idea clara de lo que es se carga la aplicación. Si solo usas una pequeña dispersión de HTML estático, JavaScript, CSS y archivos de imagen, eso podría ser cierto. Pero apenas comienzas mezclar recursos de terceros alojados en redes de distribución de contenidos, con solicitudes dinámicas a la API y las respuestas generadas por el servidor, la imagen se convierte rápidamente más oscuras.
Es probable que una estrategia de almacenamiento en caché adecuada para unos pocos archivos CSS pequeños no funcione correctamente. para cientos de imágenes grandes, por ejemplo.
Cómo saber cuándo cargas
Otra parte del panorama de carga general es cuándo todo se carga.
Algunas solicitudes a la red, como la solicitud de navegación para tu HTML inicial, se realizan incondicionalmente en cuanto un usuario visita un URL. Ese código HTML podría contener referencias codificadas para CSS o JavaScript. que también deben cargarse para mostrar tu página interactiva. Estos se encuentran en tu ruta de carga crítica. Deberás aplicar cambios almacenarlos en caché para que sean rápidos.
Es posible que otros recursos, como solicitudes a la API o recursos de carga diferida, no empiezan a cargarse hasta mucho después de que se complete toda la carga inicial. Si para que esas solicitudes ocurran solo siguiendo una secuencia específica de interacciones del usuario puede que se solicite un conjunto completamente diferente de recursos. en varias visitas a la misma página. Una estrategia de almacenamiento en caché menos agresiva es suelen ser apropiados para el contenido que identificas como ajeno al 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 qué ocurre. cargado. La respuesta a “¿qué se está cargando?” 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,
Se cargó https://example.com/main.css, por lo que solo verías main.css
en Nombre.
Los últimos caracteres de la ruta de la URL, después de
punto (por ejemplo, "css"), se conocen como la extensión de la URL.
La extensión de la URL generalmente 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 cuándo
Examina la columna Waterfall, comenzando por la parte superior y luego hacia abajo. El la longitud de cada barra representa el tiempo total que se dedicó a la carga cada recurso. ¿Cómo puedes distinguir entre una solicitud que se hace parte de la ruta de carga crítica y una solicitud que se activa dinámicamente mucho después de que se complete 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 un
cascada)) de esta solicitud de navegación inicial, en función de qué imágenes, secuencias de comandos
y diseña las referencias de documentos HTML.
La cascada muestra que, apenas v2.html termine de cargarse, las solicitudes
de los recursos a los que hace referencia (también conocidos como subrecursos). El
navegador puede solicitar varios subrecursos al mismo tiempo, y eso
representado por 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
se carga en último lugar y termina de cargarse después de que se completan las otras tres URLs
a tus conjuntos de datos.