Le panneau "Network" (Réseau) de DevTools de votre navigateur permet d'identifier les ressources chargées et le moment où elles le sont. Chaque ligne du panneau "Réseau" correspond à une URL spécifique que votre application Web a chargée.
Savoir ce que vous chargez
Pour élaborer les stratégies de mise en cache appropriées pour votre application Web, vous devez déterminer ce que vous chargez exactement. Lorsque vous créez 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 y faire face dans votre application.
Vous pensez peut-être que vous avez déjà une bonne idée de ce que votre application Web charge. Si vous n'utilisez qu'un petit nombre de fichiers HTML, JavaScript, CSS et image statiques, cela peut être vrai. 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 d'API dynamiques et de réponses générées par le serveur, l'image devient rapidement plus floue.
Une stratégie de mise en cache qui convient à quelques petits fichiers CSS ne sera probablement pas adaptée à des centaines d'images volumineuses, par exemple.
Savoir quand vous chargez
Une autre partie de l'image globale du chargement est le moment où tout est chargé.
Certaines requêtes envoyées au réseau, comme la requête de navigation pour votre code HTML initial, sont effectuées sans condition dès qu'un utilisateur accède à 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 être chargés pour afficher votre page interactive. Ces requêtes se trouvent toutes 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 d'API ou les éléments chargés de manière différée, peuvent ne pas commencer à se charger que bien après la fin du chargement initial. Si ces requêtes ne se produisent que suite à une séquence spécifique d'interactions utilisateur, un ensemble de ressources complètement différent peut être demandé lors de plusieurs visites de la même page. Une stratégie de mise en cache moins agressive est souvent appropriée pour les contenus que vous avez identifiés comme étant en dehors du chemin de chargement critique.
Les colonnes "Nom" et "Type" vous aident à identifier ce qui est concerné.
Les colonnes "Nom" et "Type" permettent d'obtenir un aperçu pertinent de ce qui est chargé. La réponse à la question "Qu'est-ce qui se charge ?" dans l'exemple ci-dessus 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, mais vous ne verrez que la dernière partie du chemin d'accès de l'URL. Par exemple, si https://example.com/main.css est chargé, vous ne verrez que main.css sous "Nom".
Les derniers caractères du chemin de l'URL, qui suivent le point (par exemple, "css"), sont appelés extension de l'URL.
L'extension de l'URL indique généralement le type de ressource demandé et est directement associée 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 "Cascade" vous aide à déterminer le moment
Examinez la colonne "Cascade", en commençant par le haut et en descendant. La longueur de chaque barre représente la durée totale de chargement de 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 de manière dynamique, longtemps après le chargement initial de la page ?
La première requête de la cascade sera toujours pour le document HTML, par exemple v2.html. Toutes les requêtes ultérieures découleront de cette requête de navigation initiale (comme une cascade !), en fonction des images, des scripts et des styles référencés par le document HTML.
La cascade montre que dès que v2.html a terminé de se charger, les requêtes pour les composants qu'il référence (également appelés sous-ressources) commencent. Le navigateur peut demander plusieurs sous-ressources en même temps, ce qui est représenté par les barres qui se chevauchent dans la colonne "Cascade" pour main.css et logo.svg. Enfin, vous pouvez voir sur la capture d'écran que main.js commence à se charger en dernier et qu'il se termine après les trois autres URL.