Le panneau "Network" (Réseau) des outils de développement de votre navigateur permet d'identifier les ressources qui sont chargées et à quel moment. Chaque ligne du panneau "Network" correspond à une URL spécifique chargée par votre application Web.
Savoir ce que vous chargez
Pour établir les stratégies de mise en cache appropriées pour votre application Web, vous devez maîtriser ce que vous chargez exactement. Lors de la création d'une application Web fiable, le réseau peut être soumis à toutes sortes de forces obscures. Vous devez comprendre les failles du réseau si vous souhaitez les gérer dans votre application.
Vous pensez peut-être que vous avez déjà une assez bonne idée de ce que votre application Web charge. Si vous n'utilisez qu'un petit ensemble de fichiers HTML, JavaScript, CSS et image statiques, c'est peut-être le cas. Toutefois, dès que vous commencez à mélanger des ressources tierces hébergées sur des réseaux de diffusion de contenu à l'aide de requêtes API dynamiques et de réponses générées par le serveur, la situation devient rapidement plus étrange.
Par exemple, une stratégie de mise en cache adaptée à quelques petits fichiers CSS n'aura probablement pas de sens pour des centaines d'images volumineuses.
Savoir quand vous chargez
L'étape de chargement globale consiste également à le chargement de tous les éléments.
Certaines requêtes adressées au réseau, telles que la requête de navigation pour votre code HTML initial, sont effectuées sans conditions dès qu'un utilisateur visite une URL donnée. Ce code HTML peut contenir des références codées en dur à des fichiers CSS ou JavaScript critiques qui doivent également se charger pour afficher votre page interactive. Toutes ces requêtes se trouvent dans votre chemin de chargement critique. Vous devrez les mettre en cache de manière agressive pour qu'elles soient rapides et fiables.
D'autres ressources, telles que les requêtes API ou les éléments à chargement différé, peuvent ne commencer à se charger que bien après la fin du chargement initial. Si ces demandes ne se produisent qu'à la suite d'une séquence spécifique d'interactions utilisateur, un ensemble complètement différent de ressources peut alors être demandé lors de plusieurs visites sur la même page. Une stratégie de mise en cache moins agressive est souvent appropriée pour le contenu que vous avez identifié comme se trouvant en dehors du chemin de chargement critique.
Les colonnes "Nom" et "Type"
Les colonnes "Name" (Nom) et "Type" permettent de fournir une image pertinente de ce qui est chargé. Dans l'exemple ci-dessus, la réponse à la question qu'est-ce qui se charge est un total de quatre URL, chacune représentant un type de contenu unique.
Le nom représente l'URL demandée par votre navigateur. Toutefois, seule la dernière partie du chemin d'accès est indiquée. Par exemple, si https://example.com/main.css est chargé, seul main.css apparaît sous "Nom".
Les derniers caractères du chemin de l'URL, qui suivent le point (par exemple, "css"), correspondent à l'extension de l'URL.
L'extension de l'URL indique généralement le type de ressource demandé et correspond directement aux informations affichées dans la colonne "Type". Par exemple, v2.html est un document, et main.css est une feuille de style.
La colonne Waterfall aide avec le moment
Examinez la colonne Waterfall, en commençant par le haut et en partant du bas. La longueur de chaque barre représente le temps total passé à charger chaque ressource. Comment faire la différence entre une requête effectuée dans le cadre du chemin de chargement critique et une requête déclenchée dynamiquement, longtemps après la fin du chargement initial de la page ?
La première requête de la cascade concerne toujours le document HTML, par exemple v2.html. Toutes les requêtes suivantes seront envoyées (comme une cascade) à partir de cette requête de navigation initiale, en fonction des images, des scripts et des styles auxquels le document HTML fait référence.
La cascade montre que dès que le chargement de v2.html est terminé, les requêtes pour les éléments auxquels il fait référence (également appelés sous-ressources) démarrent. Le navigateur peut demander plusieurs sous-ressources en même temps. Cela est représenté par les barres qui se chevauchent dans la colonne Waterfall pour main.css et logo.svg. Enfin, vous pouvez voir sur la capture d'écran que le chargement de main.js commence en dernier et que le chargement se termine une fois que les trois autres URL sont terminées.