Livre étudiant – Réseaux informatiques : analyse du chargement d’une page web

Exercice 3 :  Observation du chargement d’une page Web

Dans cet exercice, nous allons observer le chargement d’une page Web et récupérer des informations sur les échanges réseaux qui ont lieux au cours de ce chargement et qui permettent la récupération des différents éléments composant la page.

3.1. Console développeur et journal HAR

Firefox, comme la plupart des navigateurs Web disposent d’une console développeur qui permet d’afficher des informations avancées sur la page Web et son chargement. En particulier, l’onglet réseau présente une liste des ressources qui ont été chargées par le navigateur pour afficher la page (voir Figure 4). Chaque élément de cette liste correspond donc à un élément (image, vidéo, script, feuille de style, police de caractère, icône ...), et apportent des informations sur l’élément : son type, sa taille, sa provenance, etc ... Ce journal peut être exporté dans un format nommé HAR (HTTP Archive format) pour être analysé par un programme externe.

3.2. Procédure pour récupérer le journal HAR

1. Charger la page https://www.20minutes.fr/
   
2. Acceptez les cookies
3. Activer la console développeur : menu en haut à gauche "More Tools > Developper Tools" ou "Ctrl-Shift-I"
4. Sélectionner l’onglet Network/Réseau
5. Recharger la page avec la touche F5
6. Faire défiler la page tout en bas et attendre que la liste se stabilise (environ 1 minute).
7. Sauvegarder le journal HAR : cliquer sur la roue en haut à droite de la console puis sélectionner "Save all as HAR"

Le journal HAR sera analysé dans le cadre de l’exercice 4.

Figure 4 – Navigateur Web Firefox avec console développeur activée et affichant l’onglet Réseau/- Network.