Dans cet article je souhaite te partager mon retour de veille sur les Core Web Vitals (Signaux Web Essentiels).
Je vais tenter de t'expliquer comment fonctionne les 3 indicateurs de performance qui en font partie, Ă savoir le LCP, le FID et le CLS.
Déjà pour commencer les Core Web Vitals sont un sous-ensemble des Web Vitals, qui est une initiative de Google qui vise à offrir des conseils/guides/outils de mesure pour les développeurs afin d'améliorer les performances des sites Web, et par conséquent l'expérience utilisateur.
On peut trouver dans les Core Web Vitals 3 KPI (indicateurs de performance) qui sont :
- le Largest Contentful Paint qui mesure le chargement
- le First Input Delay qui mesure l'interactivité
- et le Cumulative Layout Shift qui mesure la stabilité visuelle.
Ces 3 KPI sont user-centric, c'est à dire centrés sur l'utilisateur.
Car on peut avoir un site performant, mais qui propose quand même une mauvaise expérience utilisateur.
Le LCP (Largest Contentful Paint)
Le LCP va mesurer la vitesse de chargement perçue, en mesurant le temps que met la page pour afficher l'élément le plus gros du viewport.
Les éléments concernés sont les images, les vidéos, les éléments de type block avec du texte à l'intérieur.
Si on prend un exemple avec cet article :
Sur desktop, le LCP est l'image, sur mobile c'est le texte d'introduction.
La règle est simple mais plutôt pertinente : l'élément le plus gros est souvent l'élément qui contient des informations importantes pour l'utilisateur.
Les contenus d'une page ne s'affichent pas tous en mĂŞme temps, le navigateur peut donc identifier plusieurs LCP.
Si on reprend l'article en desktop de la capture, le premier LCP serait le texte d’introduction, une fois affiché, le navigateur détecte un autre LCP : l'image.
Google recommande un affichage du LCP en moins de 2,5 secondes.
Les 2,5 secondes c'est Ă partir du TTFB (time to first byte ou temps au premier octet) jusqu'Ă l'affichage complet du LCP.
Comment savoir quel élément est le LCP ?
Pour savoir quel élément est le LCP d’une page, il suffit de se rendre sur l’onglet performances de Chrome, recharger la page.
Le LCP apparaîtra dans la ligne "Durée", et "Web Vitals" :
Le FID (First Input Delay)
Le FID va mesurer la capacité d'un site à répondre aux interactions de l'utilisateur.
On reste dans de l'expérience utilisateur, est-ce que la page que j'ai demandé est utilisable ?
Est-ce que je peux cliquer sur ce bouton, lĂ tout de suite ?
Plus concrètement : le FID mesure le temps entre le moment où l'utilisateur interagit avec la page, en cliquant sur un bouton par exemple, et le moment où le navigateur va enclencher le process de réponse à cet évènement.
Lors du chargement d'une page, le navigateur est "occupé" à traiter les différentes requêtes. Si l'utilisateur fait une action pendant que le navigateur est occupé à traiter les différentes requêtes, il y a aura un délai d'attente. Ce délai c'est le FID.
Ce délai prend fin au moment où le navigateur peut répondre à la requête utilisateur. Il n'y a pas dans ce délai le temps d'exécution d'un script JS qui serait exécuté au moment de la requête utilisateur. C'est vraiment le moment où le navigateur répond.
Voici une capture pour mieux comprendre. Si une interaction utilisateur arrive pendant que le main thread du navigateur est occupé, le navigateur ne peut pas répondre à cette interaction, il y a donc un délai d'attente.
Un bon FID doit être inférieur à 100ms. Il ne peut pas être mesuré avec Lighthouse car il faut de vraies données utilisateur. C'est donc possible de consulter le FID d'un site sur PageSpeed Insights.
Il y a un côté aléatoire au FID, on l'a vu : il y a un délai si le "user input" arrive pendant que le navigateur est occupé.
Si le "user input" arrive entre deux tâches du main thread, le navigateur pourra répondre. On peut le voir sur le schéma plus haut, le main thread n'est pas tout le temps occupé.
Le CLS (Cumulative Layout Shift)
Le CLS va mesurer la stabilité visuelle d'une page Web. Pour comprendre c'est très simple, on à tous déjà voulu cliquer sur un bouton, et au moment exact où on clique, une bannière de pub pop juste au dessus et décale le positionnement du bouton.
Résultat on clique par accident sur la pub et on se retrouve avec un nouvel onglet ouvert, c'est très énervant, surtout sur mobile. Un bon CLS doit être inférieur ou égal à 0,1, voyons ensemble comment ce score est calculé.
La formule est la suivante : impact fraction * distance fraction.
L'impact fraction c'est l'instabilité d'un élément du viewport. Si un élément mesure 50% de hauteur du viewport, et qu'il se déplace vers le bas de 25% (de la hauteur du viewport toujours), alors on fait l'union de ces deux valeurs, 50% + 25%, on obtient donc 75%. Cela nous donne un impact fraction de 0,75.
Ensuite la distance fraction, c'est la distance de déplacement de l'élément relative au viewport.
Dans notre exemple c'est 25%, donc notre distance fraction est de 0,25.
Cela nous donne : 0,75 * 0,25 = 0.1875.
Notre CLS est donc trop élevé !
Un très bon moyen de résoudre les problèmes d'instabilité est de mettre une width et une height sur les images. Comme ça le navigateur sait quelle taille il doit allouer aux images. Il n'a pas à attendre de lire le CSS.
Voila j'espère que tu as appris des choses, n'hésites pas à me dire ce que tu penses de ces KPI, est-ce que tu y faisais déjà attention sur tes sites Web ?
Si tu veux plus d'infos sur le sujet tu trouveras ton bonheur sur ce site. C'est ici que j'ai trouvé toutes les infos pour faire cet article !
Si cet article t'as plu, tu peux le partager pour m'aider à donner plus de visibilité à mon travail. 🥰
Seb.
