Auditer son site : comprendre les metrics de performance web

Aujourd’hui, nous savons tous comment naviguer sur le web. Cependant, vous êtes vous jamais demandé ce qui se passe “derrière la machine” quand on accède à un site web ?

Pour la plupart des utilisateurs, c’est plutôt obscure (à la limite du “magique” pour certains) et compliqué. Et effectivement, ce n’est pas si facile à comprendre quand on débute.

Quand on clic sur un site web, toutes les actions provoquées peuvent-être découpées en 2 grandes parties :

- La demande et la récupération des données du serveur ;
- L'affichage de ces données en pixels visibles sur l'écran d'un utilisateur.

La première partie -elle-même découpée en plusieurs étapes- dépend de beaucoup de variables, dont la rapidité de votre hébergeur, l’organisation de votre base de donnée et l’utilisation d’un DNS. L’indicateur qu’il faut surveiller est le Time to First Byte (TTFB).

La seconde partie constitue le reste du “chemin critique”. A savoir, du premier octet reçu du serveur à l’affichage finale sur vos écrans. Plusieurs indicateurs vous permettent de mesurer sa performance : le First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) et le Total Blocking Time (TBT). Pas de panique, nous verrons tout ça quelques lignes plus loin !

Le Time to First Byte est le temps écoulé entre l'envoi d'une requête HTTP par le navigateur et la réception du premier octet de la réponse du serveur. Autrement dit : il mesure le temps entre une action de votre part (un clic par exemple) et le début de la conséquence de cette action. 

Un TTFB faible indique un serveur rapide et une bonne optimisation de la chaîne de requêtes, ce qui est crucial pour améliorer le classement SEO et l'expérience utilisateur.

Le TTFB se décompose en trois grandes phases :

1. Temps de traitement de la requête - le temps nécessaire au navigateur pour créer la requête et l'envoyer au serveur.

2. Temps de transit - le temps que met la requête pour atteindre le serveur (qui peut être influencé par la distance géographique).

3. Temps de réponse du serveur - le temps que prend le serveur pour traiter la requête et commencer à renvoyer des données.

Le chemin critique fait référence à la séquence d'étapes nécessaires pour convertir le code HTML, CSS, et JavaScript d'une page web en pixels visibles sur l'écran d'un utilisateur. Plus ce chemin est court, plus la page se charge rapidement. C'est une étape cruciale pour améliorer les métriques telles que le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).

Le chemin critique commence dès que le navigateur reçoit les premiers octets de HTML du serveur. Il doit d'abord parser le HTML pour construire le DOM (Document Object Model), puis le CSS pour construire le CSSOM (CSS Object Model). Si du JavaScript est présent, il peut bloquer cette construction en attendant d'être exécuté. Une fois le DOM et le CSSOM construits, ils sont combinés pour créer le Render Tree, qui est ensuite utilisé pour dessiner la page.

Le First Contentful Paint mesure le temps écoulé entre le moment où le navigateur commence à charger la page et le moment où un premier élément de contenu (texte, image, etc.) est affiché à l’écran. Il s'agit d'un indicateur clé pour évaluer la rapidité avec laquelle une page devient interactive pour l'utilisateur.

Le FCP est influencé par plusieurs facteurs, notamment la rapidité du serveur (TTFB), l'optimisation des ressources critiques (CSS, JavaScript), et la gestion des priorités de rendu. Le navigateur commence par afficher les éléments qui ne nécessitent pas l'attente de scripts ou de feuilles de style non critiques.

Le Largest Contentful Paint mesure le temps nécessaire pour que le plus grand élément de contenu visible dans la fenêtre d'affichage (image, vidéo, bloc de texte) soit complètement chargé. Cette métrique est essentielle pour comprendre quand le contenu principal de la page est effectivement visible pour l'utilisateur.

Le LCP est généralement impacté par les temps de chargement des images de grande taille, des vidéos, et certains blocs de texte. Un LCP rapide est un indicateur que la page est utilisable dans un délai raisonnable, ce qui améliore l'expérience utilisateur.

Le Cumulative Layout Shift mesure l'instabilité visuelle des éléments d'une page pendant son chargement. Il s'agit d'un indicateur qui évalue la fréquence à laquelle des éléments de la page changent de position de manière inattendue pendant le chargement.

Un mauvais CLS se produit lorsque des images, des annonces ou des iframes sont chargés de manière asynchrone sans dimensions définies, ce qui entraîne des décalages de mise en page.

Le Total Blocking Time mesure le temps total pendant lequel la page est bloquée et ne répond pas aux interactions de l'utilisateur (clics, frappes au clavier, etc.) entre le First Contentful Paint (FCP) et le Time to Interactive (TTI). Le TBT est crucial pour comprendre la réactivité de votre page et, par conséquent, son impact sur l'expérience utilisateur.

Le TBT se produit lorsqu'un long processus de script (exécution JavaScript) empêche le thread principal du navigateur de répondre à l'utilisateur. Les scripts longs (>50 ms) peuvent bloquer ce thread, rendant le site non interactif pendant ce temps. Une faible valeur de TBT signifie que la page reste réactive, même pendant le chargement, ce qui est essentiel pour offrir une expérience fluide.

Les Core Web Vitals de Google sont bien plus que de simples métriques techniques : ils sont au cœur de ce qui rend une page web rapide, réactive et agréable pour les utilisateurs.

En comprenant et en optimisant ces indicateurs, vous pouvez non seulement améliorer la performance de votre site, mais aussi offrir une meilleure expérience à vos utilisateurs.

L'optimisation de ces métriques n'est pas seulement bénéfique pour le référencement, mais elle contribue également à un web plus accessible et plus éco-responsable. En réduisant les temps de chargement et en minimisant les ressources utilisées, vous faites un pas de plus vers un internet plus durable.

N'oubliez pas : un site performant est un site qui retient les utilisateurs, améliore l'engagement et, en fin de compte, favorise la croissance. Les Core Web Vitals sont votre guide pour atteindre ces objectifs de manière efficace et durable.

Sources