Si vous êtes un habitué de la performance Web, vous avez sûrement remarqué à quelques reprises des graphiques tel que celui affiché un peu plus bas. Les graphiques en cascade « waterfall chart » sont utilisés pour diagnostiquer les problèmes de performance.

Si votre site WordPress est lent que vous souhaitez optimiser sa vitesse de chargement, vous devriez avoir au minimum une compréhension élémentaire des graphiques en cascade.

Qu’est-ce qu’un graphique en cascade?

Un graphique en cascade est un diagramme qui représente les données qui sont générées de façon cumulative et séquentielle. Un graphique en cascade spécifique à la performance vous permet de voir les requêtes qui se produisent entre un navigateur et un serveur pour permettre à l’utilisateur de visualiser une page Web.

Chaque requête, qu’elle soit HTML, Images, CSS, JavaScript ou bien une redirection sont représentés par leur propre ligne dans le graphique. Le graphique indique le moment où chaque ressource est appeler à partir du serveur jusqu’à son téléchargement et son rendu dans le navigateur.

Pratiquement tous les outils de mesure de la performance génèrent des graphiques en cascade. Si vous êtes un nouveau à cette notion, vous pouvez créer votre propre graphique très facilement en entrant une URL dans GTMetrix. Certains autres outils comme Pingdom vous donnent ce graphique plus rapidement, mais ils ont toutefois un peu moins précis.

Comprendre un graphique en cascade

• Start Render : Indique que le contenu commence à s’afficher dans le navigateur de l’utilisateur. Attention, cela ne signifie pas que le contenu affiché est important ou qu’il s’agit simplement de publicité.
• Document complete : Le temps nécessaire pour la plupart des éléments de la page à s’afficher dans le navigateur. Aussi connu comme “Load Time” ou temps de chargement. Cette donnée est calculée en mesurant le temps que prend l’événement “window.onload()” à être déclenché. Elle est utilisée comme unité de mesure grossière de la performance d’un site. Ce n’est pas nécessairement un indicateur fiable pour connaitre le moment où une page devient utile.
• Fully loaded : Représente le moment où toutes les ressources de la page, y compris les ressources externes qui ne sont pas visibles, ont chargé et que le processus est terminé.

DNS Lookup

Cette requête permet de résoudre l’adresse IP liée au nom de domaine demandé pour s’y connecter.

Comment optimiser cet élément : Vous ne pouvez pas faire grand-chose pour optimiser les requêtes DNS et il ne devrait pas y avoir de problème sur la plupart des sites.

TCP connection

Cette barre indique le temps de connexion TCP/IP afin de lancer le téléchargement de chaque fichier. Il est difficile d’accélérer la connexion TCP. Vous contrôlez toutefois le nombre de connexions.

Comment optimiser cet élément : Si chaque requête de votre tableau possède une barre orange, c’est que vous avez un problème. Vous pouvez résoudre ce problème en poussant vos développeurs à utiliser ce qu’on appelle keep-alive afin de réduire le nombre de connexions TCP.

Negociation SSL

Je ne veux pas entrer dans les détails ici. Sachez seulement que les requêtes TLS obligent des aller-retour serveur supplémentaires. Ce qui prend forcément du temps.

Comment optimiser cet élément : Le même principe que les connexions TCP s’appliquent ici. Si chaque requête de votre tableau possède une barre violette, c’est que vous avez un problème. Vous pouvez résoudre ce problème en poussant vos développeurs à utiliser ce qu’on appelle des connexions persistantes afin de réduire le nombre de négociations TLS.

Time to first byte ( TTFB )

Probablement la donnée la plus importante pour votre SEO. Le TTFB est une mesure qui est utilisée comme indicateur de la réactivité du serveur. Cela correspond au temps avant la réception du premier octet pour une requête.

Comment optimiser cet élément : Plusieurs facteurs peuvent affecter le TTFB. La connexion Internet de l’utilisateur. La charge de travail que votre serveur doit effectuer avant de répondre à la requête et la distance entre le serveur et l’utilisateur.

Content download

Représente le temps qu’il faut pour chaque ressource de la page avant d’être complètement téléchargé.

Comment optimiser cet élément : Si votre site possède trop de longues barres bleues, vous devez réduire la taille des ressources par la minification et la compression.

Recommandations

1. Implémenter une solution de caching. Cette solution est absolument obligatoire pour améliorer la réactivité de votre site. WP Rocket est de loin la meilleure extension pour effectuer ces actions.
2. Utiliser un CDN pour rapprocher les ressources de l’utilisateur. L’hébergeur Kinsta vous fourni gratuitement un CDN pour tout votre site.
3. Réduire le nombre de ressources. En effet, vous devriez concaténer vos ressources CSS / JavaScript. Possiblement utiliser les sprites d’images.

Conclusion

N’hésitez pas à utiliser les graphiques en cascade pour diagnostiquer les problèmes de performance de votre site et concentrez-vous sur les éléments suivants:

• La ligne verticale “Star render” doit être affichée le plus rapidement possible
• Réduire le nombre de lignes
• Réduire le nombre de barres oranges (TCP Conection)
• Réduire le nombre de barres violettes (SSL Negociation)
• Réduire la longueur des barres vertes (TTFB)
• Réduire la longueur des barres bleues (Content download)