Waterfall / Timeline

Une waterfall (cascade en français - également appelée timeline), est la représentation chronologique du trafic réseau associé au chargement d’une page web, avec l’ensemble des requêtes HTTP émises par le navigateur et des réponses HTTP associées.

Vue d'ensemble de la timeline/waterfall

Au-delà des informations temporelles (aussi bien sur l’établissement des connexions réseaux que sur le transfert des données), on y retrouve des éléments utiles voire indispensables à la bonne compréhension du chargement de la page, comme par exemple le poids des différentes ressources, les statuts HTTP ou encore les en-têtes HTTP envoyés sur chaque requête et réponse.

Dareboost propose dans ses rapports d’analyse, ses rapports de comparaison, mais aussi les rapports d’étape de ses parcours utilisateurs, une waterfall interactive qui vous permettra de répondre à tous les cas d’utilisation même les plus avancés.

Présentation générale

Par défaut, vous retrouverez séquentiellement la liste des requêtes HTTP, avec pour chacune :

  • la méthode (le plus souvent GET ou POST)
  • l’URL, ou plus exactement le nom de la ressource concernée avec l’URL complète qui est affichée lors du survol du nom.
  • le Statut (200, 301, 404, etc.)
  • le poids de la réponse
  • son placement sur un axe de temps, avec une décomposition des différentes étapes entre établissement de la connexion et réception de la réponse.

Concernant ce dernier point, vous pouvez survoler 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 :

Infobulle de la requête
  • DNS Lookup : délai nécessaire à la résolution DNS. À noter ici que Dareboost utilise le serveur DNS 8.8.8.8 (Google).
  • Connecting : temps nécessaire à l’établissement de la connexion TCP (et éventuellement SSL), pré-requis à la communication HTTP.
  • Waiting : délai entre l’émission de la requête HTTP et la début de la réception de la réponse.
  • Receiving : délai entre le début et la fin de la réception de la réponse.

Afin de reproduire de manière réaliste le contexte d’un internaute, Dareboost injecte de la latence sur toutes ces étapes, à l’exception du DNS Lookup. Tous les délais observés sont donc dépendants de la nature de la connexion configurée pour vos tests. C’est d’autant plus vrai pour l’étape Connecting, qui subira la latence sur la connexion TCP et sur la connexion SSL (si applicable).

On notera par ailleurs que les étapes DNS Lookup et Connecting ne seront pas systématiquement présentes. La résolution DNS est nécessaire une seule fois par domaine, et la connexion TCP (et SSL si applicable) ne sera nécessaire que si une connexion TCP existante n’est pas utilisée.

Pour en savoir plus sur une requête/réponse donnée, vous pouvez cliquer sur la ligne concernée :

Détails des en-têtes HTTP

Vous pourrez ainsi retrouver l’URL complète de la requête, l’adresse IP correspondante, puis les entêtes HTTP de la requête et enfin de la réponse.

Personnalisation de la waterfall : les informations disponibles

Plusieurs informations sont directement disponibles dans les colonnes dans la waterfall. Il vous est possible de les personnaliser à tout moment en faisant un clic-droit (ou bien en cliquant sur l’icône de configuration située à gauche des noms des colonnes) pour afficher le configurateur.

Paramètres des colonnes de la Waterfall/Timeline

Vous pouvez activer / désactiver les informations à afficher selon vos besoins, puis fermer la fenêtre de configuration.

Vos préférences d’affichage seront conservées pour vos utilisations ultérieures de la waterfall, et ce même si vous visualisez un rapport différent.

Voici un rapide descriptif de chaque colonne disponible sur la waterfall :

  • Method : méthode HTTP utilisée par la requête (GET, POST, PUT, etc)
  • Url : nom de la ressource (ex: script.js). Url complète affichée au survol.
  • Domain : domaine vers lequel la requête est envoyée (ex: example.com)
  • Status : statut de la réponse HTTP (200, 301, 404, etc), du cache (“from cache”) ou encore de l’erreur sur le requête (“Request blocked by the browser” par exemple si vous utilisez notre option Adblock ou nos Blacklist / Whitelist).
  • Type : type de contenu lié à la requête (Stylesheet, Image, XHR, etc)
  • Size : taille de la réponse (sur le réseau, donc nous affichons la taille compressée si la ressource l’est). Des détails sont disponibles au survol.
  • Protocol : protocole (http/1.1, h2, etc)
  • Scheme : schéma (http,https, wss, etc)
  • Remote Address : adresse IP du serveur (obtenue après résolution DNS du domaine. À noter que Dareboost utilise le serveur DNS 8.8.8.8 de Google).
  • Initiator : ressource et ligne de code à l’origine du déclenchement de la requête (exemple: analytics.js: 28). L’éventuelle pile d’appels associée sera disponible au survol de la valeur de l'Initiator.
  • Time : délai total entre l’émission de la requête et la récupération de la réponse complète
  • Priority : priorité accordée à la requête par le navigateur.
  • Timings : représentation chronologique des différentes étapes de la communication requête/réponse.

Filtrer et trier

La fonctionnalité de filtre est disponible juste au dessus de la timeline elle-même. Elle vous permettra de saisir un texte pour ne filtrer que les requêtes dont l’URL complète contiennent la chaîne recherchée.

Il vous est également possible d’activer un autre filtre pour recherche les requêtes selon le type de contenu : All, Document, Stylesheet, Script, Image, Media, Font, XHR, WebSocket, Other.

Filtres de la Waterfall/Timeline

Ces 2 types de filtres peuvent s’utiliser indépendamment aussi bien que de manière combinée. La zone en bas à gauche de la waterfall vous indiquera le nombre et le poids que représentent les éléments filtrés par rapport à l’ensemble.

Vous pouvez cliquer sur n'importe quel nom de colonne pour trier les éléments de la waterfall en fonction de la valeur de cette information. Un premier clic appliquera un tri ascendant. Cliquez une deuxième fois pour obtenir un tri descendant.

À SAVOIR
Une bonne technique pour étudier vos contenus de provenant de partis tiers (dépendances externes) consiste à afficher les colonnes Domain et Initiator puis à utiliser les fonctionnalités de tri sur ces colonnes.

Revenir au sommaire