Le waterfall est une représentation du chargement des éléments de votre page web par le navigateur au cours du temps.

Ce graphique est une mine d'or en information : vous y trouverez le poids de chacune de vos ressources, le nombre de requêtes, la façon dont se charge les éléments de votre site, les temps de chargement et j'en passe !

Alors à vos maillots de bain rapports webpagetest, nous plongeons dans votre site, vous aidons à analyser votre waterfall et vous dévoilons les pistes d'amélioration selon les points faibles de votre site.

Qu’est-ce qu’un Waterfall ?

Comme nous le disions à l'instant, un Waterfall est une représentation du chargement des éléments par le navigateur au cours du temps.

Chaque ligne représente une ressource (Javascript, feuilles de style, images, etc.) de votre site web. Pour chaque ressource, une requête vers le serveur est envoyée et le serveur envoie au navigateur une réponse.

Les effets de HTTP/2 visibles sur le waterfall ?

HTTP/2 est le "nouveau" protocole du web, dont la spécification a été validée en Mai 2015.
Il permet de transférer les fichiers en une seule connexion (on parle de multiplexage). Les requêtes sont alors effectuées simultanément par le navigateur. On ne doit plus attendre la fin d’une requête pour en envoyer une autre, comme cela était le cas avec HTTP 1.1.

waterfall http1.1 vs http/2

Notez qu’un Waterfall varie entre une First View (première fois qu’un utilisateur se rend sur votre site web) et une Repeat View (l’utilisateur revient sur votre site web).
Prenons l’exemple de la home page de Leroy Merlin :

waterfall first view vs repeat view

Le Waterfall de la Repeat View est beaucoup moins long. Ce graphique est un bon indicateur pour voir comment vous utilisez les méthodes de cache.
En effet, plus il y a de requêtes cachées sur le navigateur, moins il y en aura à (re)télécharger lors d’une seconde visite.

Décrypter un Waterfall

En y regardant d’un peu plus près, on peut savoir bien des choses sur le chargement d’une page web.
Chacune des barres de couleur représente une activité différente :

  • Le vert foncé pour la résolution DNS
    Cette première étape permet de relier nom de domaine et adresse IP : le navigateur doit savoir où chercher l’information.
  • L’orange pour la connexion TCP
    TCP (Transport Control Protocol) est le protocole qui permet d’assurer la communication entre le serveur et le navigateur.
    Le navigateur doit établir une ou plusieurs connexions TCP avec les serveurs auxquels il s’adresse et cette connexion peut prendre du temps. Ainsi, plus les connexions sont nombreuses, plus le site est long à charger.
    Jusqu’à présent la connexion TCP pouvait donc être un point faible de la performance d’un site.Mais avec l’arrivée de HTTP/2, une seule connexion TCP peut être utilisée pour envoyer et recevoir de multiples requêtes HTTP. Il n’est plus nécessaire d’ouvrir plusieurs connexions TCP.
  • Le violet pour la connexion TLS (anciennement SSL)
    Le TLS (Transport Layer Security) ou anciennement SSL (Secure Sockets Layer) permet d’envoyer des ressources via une connexion sécurisée. L’information transmise reste ainsi confidentielle et n’est donc pas accessible par une tierce partie. De plus, la sécurisation assure de l’intégrité et de l’authenticité du message.
  • Le vert clair pour le Time To First Byte
    Le Time To First Byte est le temps de chargement du premier octet ou plus concrètement, le temps que met le serveur à envoyer le premier octet.Le TTFB est un élément important aussi pour le référencement comme l’explique Webrankinfo : “Le TTFB est très important pour le référencement naturel puisqu'il conditionne l'accès au HTML. En effet, le robot Googlebot alloue un "quota" pour visiter chaque site web (sans doute un délai, ou peut-être d'autres métriques). S'il ne parvient pas à parcourir votre site dans ce quota : tant pis pour vous, certaines de vos pages risquent de ne pas être actualisées, voire ne pas être indexées !

    Plusieurs éléments peuvent ralentir ce TTFB. Si certains sont des impondérables, comme la qualité de connexion de l’utilisateur, d’autres peuvent être optimisés : le temps de réponse du serveur ou encore la distance entre le serveur et l’utilisateur.

  • Le bleu pour le téléchargement du contenu
    Ces barres bleues représentent le temps nécessaire au chargement du contenu en lui-même, depuis le serveur vers le navigateur.Ici un gain important peut être réalisé en rapprochant le contenu via un CDN ou en réduisant le poids de chaque objet ( en appliquant la compression d’image ou encore la minification par exemple).

Qu’en est-il des lignes verticales du waterfall ?

Lignes verticales Waterfall
  • La ligne verte représente le “Start Render” : il s’agit du moment où la page blanche laisse place aux premiers éléments de la page web.
  • La ligne bleue représente le “Document Complete” (ou “Load Time”) : cet événement est déclenché en même temps que le “window.onload()”. Il a longtemps été la valeur de référence de la webperf mais il ne l’est plus. En effet, il ne permet pas de déterminer le moment où une page web devient utile. Un utilisateur peut commencer à interagir avec la page avant cet événement.
  • La ligne jaune représente le “Fully loaded” : il s’agit du moment où la totalité des ressources d’une page web (dont les ressources externes non visibles) a été chargée.
Les limites du Waterfall
Si on peut lire beaucoup d’information dans un Waterfall, ce graphique connaît malgré tout ses limites.
En effet, le Speed Index n’apparaît pas, bien qu’il soit un bon indicateur en termes d’expérience utilisateur.Le Speed Index permet de mesurer le rythme auquel les éléments au-dessus de la ligne de flottaison s’affichent (comme le démontre l’image ci-dessous).

Speed Index

Cette métrique est directement liée à la perception de vitesse d’un utilisateur.

Soignez votre Waterfall

Maintenant que vous comprenez mieux ce Waterfall, intéressez-vous à la longueur des barres et leur nombre.

Beaucoup de barres orange ?

Cela peut signifier deux choses :

  1. Vous avez trop de ressources réparties sur des serveurs différents et au moins une connexion doit donc être établie vers chacun de ces serveurs.
    Dans ce cas, la solution consiste alors à regrouper le plus de ressources possible sur un seul serveur afin de limiter le nombre de connexions TCP.
  2. Vos requêtes sont envoyées via des connexions TCP différentes, les unes après les autres.
    Vous pouvez alors appliquer le keep-alive qui permet d’utiliser une seule et même connexion TCP pour plusieurs ressources.
Sans le keep-alive :

no keep-alive

Avec le keep-alive :

Keep alive on

(source image : KeyCDN)
Et sinon ? La parallélisation des requêtes est prévue dans HTTP/2.

Beaucoup de barres bleues et vertes claires ?

La concaténation, l’inlining (intégration des petites images directement dans le code HTML de la page) et le lazyloading (seules les images au-dessus de la ligne de flottaison sont chargées, les images restantes étant chargées lorsqu'on commence à scroller) vous aideront à y remédier.

Des barres bleues trop longues ?

Appliquez les principales bonnes pratiques pour réduire le poids des objets : compression des images, GZIP, minification des fichiers JS / CSS / HTML.

Des barres vertes claires trop longues ?

Un CDN devrait pouvoir vous arranger cela.
Pour en savoir plus sur les CDN, je vous invite à lire “11 questions / réponses sur les CDN”.

Ces quelques éléments devraient vous aider à mieux comprendre votre Waterfall. Rappelez-vous, lorsque vous observez le Waterfall de votre site, vous voulez voir 4 choses :

  1. Le moins de ligne possible
  2. Le moins de barres bleues et orange possible
  3. Des barres vertes claires horizontales aussi peu nombreuses que courtes
  4. Et une barre verte verticale le plus à gauche possible.

Votre site web est-il performant ?

Comment se positionne-t-il par rapport à celui de vos concurrents ?

VOUS AIMEREZ PEUT-ÊTRE AUSSI...

Les 7 choses à savoir sur la migration vers HTTPS HTTPS continue de faire couler beaucoup d’encre. Nombreuses sont les informations qui ont circulé sur le sujet : certaines sont vraies, d’autres moins...
Le top 10 des sites e-commerce de l’animaler... Le top 10 des sites e-commerce de l'ameublement