Introduction
Le Waterfall (ou "cascade" en français) répertorie toutes les requêtes HTTPS qui ont été nécessaires pour charger la page, y compris les actifs (images, fichiers JavaScript, etc.), les requêtes tierces et les appels de services web.
Le Waterfall contient des informations temporelles, de même que l'établissement des connexions de réseaux sur le transfert des données. Vous pouvez y trouver des informations utiles pour une bonne compréhension du chargement des pages. Par exemple : le poids des différentes ressources, les status et en-têtes HTTP envoyés pour chaque requête et réponse.
Speed Analysis Lab inclut un Waterfall interactif dans ses rapports d'analyses, rapports de comparaison et rapports d'étapes détaillées de la fonctionnalité de scénario utilisateur.
Décomposition du rapport
Timings
La section "Timings" répertorie les valeurs de toutes les métriques de performance de la page. Sélectionnez les métriques que vous souhaitez afficher dans le Waterfall (sous forme de lignes verticales), afin de pouvoir les analyser avec le trafic réseau correspondant.
Choisissez le LCP pour voir les requêtes correspondantes si le LCP est déclenché par une image.
Long Tasks
Long Tasks (navigateur web occupé pendant plus de 50 ms) et valeur du Total Blocking Time. Les Long Tasks liées au FID maximum potentiels sont mises en évidence dans une couleur différente.
Waterfall
Le waterfall affiche la liste séquentielle de toutes les requêtes HTTP.
Par défaut, le rapport montre :
- La méthode HTTP utilisée (dans la plupart des cas GET ou POST).
- L'URL (survolez le nom pour voir l'URL complète).
- Le statut HTTP (200, 301, 404, etc.)
- La taille de la réponse
- Sa position dans le temps, avec une représentation chronologique des différentes étapes de la communication requête/réponse.
Valeurs détaillées du Waterfall
Survolez la représentation de la requête pour obtenir des valeurs détaillées sur les jalons temporels de la requête et de la réponse.
- DNS Lookup : temps nécessaire à la résolution DNS.
- Connecting : temps nécessaire pour établir la connexion TCP (et éventuellement SSL), requise pour la communication HTTP.
- Waiting : temps entre l'envoi de la requête HTTP et le début de la réception de la réponse.
- Receiving : temps entre le début et la fin de la réception de la réponse.
Afin de reproduire le contexte d'un utilisateur Internet de manière réaliste, Speed Analysis Lab inclut un temps de latence pour toutes ces étapes, à la seule exception du DNS Lookup. Tous les délais observés dépendent ainsi de la nature de la connexion configurée pour vos tests. Ceci s'applique tout particulièrement à l'étape de connexion ("Connecting") qui subira la latence à la fois de la connexion TCP et de la connexion SSL (si applicable).
Veuillez noter que les étapes DNS Lookup et Connecting ne seront pas toujours présentes. La résolution DNS n'est requise qu'une fois par domaine, et la connexion TCP (et SSL si applicable) ne sera requise que si une connexion TCP existante n'est pas utilisée.
Cliquez n'importe où sur la ligne pour voir plus d'informations sur une requête ou réponse donnée.
Vous y trouverez l'URL complète de la requête, l'adresse IP liée, les en-têtes HTTP de la requête et enfin, la réponse.
Filtres et personnalisation
Cliquez sur "Personnaliser les colonnes" pour personnaliser vos paramètres d'affichage.
Nom de la colonne | Description |
Méthode | La méthode HTTP utilisée par la requête (GET, POST, PUT, etc) |
URL | Le nom de la ressource - L'URL complète est affichée lorsque vous survolez le nom. |
Domaine | Le domaine vers lequel vous envoyez la requête (ex : exemple.com). |
Status | Le status de la réponse HTTP (200, 301, 404, etc.), du cache ("depuis le cache") ou de l'erreur de la requête (ex : "Requête bloquées par le navigateur" si vous utilisez les fonctionnalités AdBlock ou Blocklist / Allowlist). |
Type | Le type de contenu associé à la requête (Stylesheet, Image, XHR, etc). |
Taille | La taille de la réponse (comme transférée dans le réseau, sera la taille de la ressource une fois compressée, si elle est compressée). Survolez la valeur pour plus de détails. |
Protocole | Le protocole (http/1.1, h2, etc.) |
Schéma | Le schéma de l'URL (http,https, wss, etc) |
Adresse externe | L'adresse IP du serveur (obtenue après la résolution DNS du domaine par Google DNS 8.8.8.8) |
Initiateur | La ressource et la ligne de code liée ayant initialement déclenché la requête (exemple : analytics.js: 28). Tout appel associé sera visible au survol de la valeur de l'initiateur. |
Durée | La durée totale entre l'envoi de la requête et la réception de la réponse complète. |
Priorité | Le niveau de priorité donnée à la requête par le navigateur web. |
Timings | La décomposition chronologique des différentes étapes de la communication requête/réponse. |
Utilisez le filtre URL pour afficher uniquement les requêtes contenant le texte choisi dans l'URL complète.
Vous pouvez également filtrer les demandes en fonction de leur type (Script, XHR, etc.).
Ces 2 types de filtres peuvent être utilisés ensemble ou indépendamment l'un de l'autre. La zone dans le coin inférieur gauche du Waterfall vous indiquera le nombre et le poids des éléments filtrés en comparaison du total des requêtes.
Vous pouvez cliquer sur n'importe quelle colonne pour trier les éléments du Waterfall selon la valeur de cette information. Le premier clic appliquera un tri par ordre croissant. Pour une vue par ordre décroissant, cliquez une deuxième fois.
Tip : Une bonne approche à l'étude de vos contenus tierces (qui dépendent de l'extérieur) est d'afficher les colonnes du domaine et de l'initiateur et d'utiliser la fonctionnalité de tri sur ces colonnes.
Carte des dépendances
La carte des dépendances vous aide à comprendre les dépendances entre les requêtes HTTP sur une page web.
Utilisez-la pour découvrir quel parti tiers est responsable de quelle requête, si l'un d'entre eux charge plus de données que prévu ou si un parti tiers inattendu est à l'œuvre.
- Plus le poids de la réponse est élevé, plus la taille du node sera grande.
- La couleur du node change chaque fois que le domaine change.