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 chargent 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 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 de votre site web (fichiers JavaScript, feuilles de style, images, etc.). Pour chaque ressource, une requête est envoyée vers le serveur et le serveur envoie au navigateur une réponse en retour.

La différence illustrée entre HTTP 1.1 et HTTP/2

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 sur la même connexion, comme cela était le cas avec HTTP 1.1.

waterfall http1.1 vs http/2

La First View vs la Repeat view

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

Nous voyons ici que le Waterfall de la Repeat View présente bien moins de lignes, donc bien moins de ressources téléchargées. Ce graphique est un bon indicateur pour analyser l'efficacité du cache.

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.

La lecture horizontale du Waterfall

  • 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 l’intégrité et l’authenticité du message.
  • Puis viennent les téléchargements de ressources : le bleu pour le code HTML, l'orange pour les fichiers JavaScript, le vert pour le CSS, le violet pour les images, le turquoise pour le flash, le rouge pour les fonts et le gris pour toutes les autres ressources.
    Chacune de ces indications est composée d'une partie claire et d'une partie foncée :

    La partie claire représente le Time To First Byte de ladite ressource tandis que la partie plus foncée correspond au téléchargement de la ressource elle-même.

Le Time To First Byte (ou TTFB)

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.

Et pour terminer :

  • Le rose pour l'exécution des JS
    Les fichiers JavaScript envahissent le web. Cela signifie également que l'exécution du JavaScript devient un goulot d'étranglement sérieux dans les navigateurs. Il est donc d'autant plus important d'y prêter attention.
    Source : HTTP Archive, sur la période du 1er juin 2012 au 1er juin 2017.

La lecture verticale du waterfall

  • La ligne verte représente le “Start Render” : il indique le moment où la page blanche laisse place aux premiers éléments de la page web.
  • La ligne jaune représente le “DOM Interactive” : il indique que le code HTML a fini d'être analysé et que la construction du DOM est terminée.
  • La ligne violette représente le “DOM Content Loaded” : il indique le moment où le DOM est prêt et où aucune feuille de style n'empêche l'exécution du JavaScript. Il est alors possible de construire la structure de la page.
  • La ligne bleue représente le “Document Complete” (ou “Load Time”) : il indique le moment où la totalité du traitement est terminée et le téléchargement de toutes les ressources sur la page (images, etc.) est terminé.
    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.
  • Le “Fully loaded” est le 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.
    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.

Vous avez beaucoup de requêtes à charger ?

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.

Vos ressources sont longues à charger ?

Vos JS, CSS, Flash, images, font, (etc.) sont longues à charger ?
Appliquez les principales bonnes pratiques pour réduire le poids des objets : compression des images, GZIP, minification des fichiers JS / CSS / HTML.

Vos Time To First Byte s'éternisent ?

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. Objectif : un waterfall réduit verticalement et horizontalement !

Vous souhaitez optimiser simplement votre site ?

Fasterize optimise à la volée votre site pour en réduire les temps de chargement. Votre waterfall se voit réduit horizontalement et verticalement.

VOUS AIMEREZ PEUT-ÊTRE AUSSI...