Waterfall

Le waterfall (en cascade) est une représentation graphique utilisée dans les outils de performance web, comme Google Chrome DevTools ou WebPageTest, pour montrer la chronologie des requêtes réseau et le chargement des ressources d’une page web (scripts, images, CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. , etc.). Chaque ressource est affichée sous forme de barre horizontale dans un graphique, où la longueur de la barre représente le temps que la ressource a mis à être téléchargée et traitée par le navigateur. L’ensemble des requêtes forme un diagramme en cascade, d’où son nom de « waterfall ».

Les principales sections d’un waterfall incluent :

• DNS Le DNS (Domain Name System) est un système qui traduit les noms de domaine lisibles par l'homme (comme www.example.com) en adresses IP (comme 192.0.2.1), permettant aux navigateurs de localiser et d'accéder aux sites web. Lookup : Temps pour résoudre le nom de domaine en adresse IP.
• Initial Connection : Temps pour établir une connexion TCP Le TCP (Transmission Control Protocol) est un protocole de communication qui assure la transmission fiable et ordonnée des données sur un réseau, garantissant que les paquets arrivent sans erreurs et dans le bon ordre. .
• SSL Le SSL (Secure Sockets Layer) est un protocole de sécurité qui chiffre les données échangées entre un navigateur et un serveur, garantissant la confidentialité et l'intégrité des informations lors des communications en ligne. / TLS Le TLS (Transport Layer Security) est un protocole de sécurité qui chiffre les communications sur Internet, garantissant la confidentialité et l'intégrité des données entre un client et un serveur. Handshake Le handshake est un processus d’échange initial entre deux systèmes ou appareils pour établir une connexion sécurisée, souvent utilisé dans les protocoles réseau pour s'assurer que les parties communiquent correctement. : Si le site est sécurisé, cela montre le temps pour négocier le chiffrement SSL/TLS.
• Time to First Byte ( TTFB Le TTFB (Time to First Byte) est une métrique qui mesure le temps écoulé entre l'envoi d'une requête par un navigateur et la réception du premier octet de réponse du serveur, reflétant la réactivité du serveur. ) : Délai avant que le premier octet Un octet est une unité de mesure en informatique équivalente à 8 bits. Il est utilisé pour quantifier la taille des données numériques, comme les fichiers ou la mémoire. de réponse ne soit reçu.
• Content Download : Temps nécessaire pour télécharger la ressource.

Le diagramme en cascade aide à :

• Identifier les goulots d’étranglement : Repérer les ressources qui ralentissent le chargement global de la page.
• Optimiser les performances : Réduire le nombre de requêtes HTTP Le HTTP (HyperText Transfer Protocol) est un protocole utilisé pour transférer des données sur le web, permettant la communication entre un navigateur et un serveur pour afficher des pages web. , compresser les fichiers ou utiliser des techniques comme le caching.
• Visualiser les dépendances : Voir comment les différentes ressources d’une page se chargent les unes après les autres ou en parallèle.

Le waterfall est un outil précieux pour les développeurs et les experts en performance web qui cherchent à optimiser le temps de chargement des pages et à améliorer l’ expérience utilisateur L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. .