Le 5 mai dernier, Google via web.dev a publié ses recommandations en matière de mesure qualité de l’expérience utilisateur : Web Vitals, mesures essentielles pour un site “sain”. Il est sur qu’avec la multitude des indicateurs de Web Performance, le néophyte a de quoi s’y perdre avec tout un tas d’acronymes anglophiles à la clef. Dès lors, comme souvent, les développeurs de Google cherchent à vulgariser leur message en cherchant les indicateurs les plus pertinents. Mais qu’en est-il vraiment ?
LCP, FID et CLS
Retenez bien ces 3 acronymes vous allez les voir partout d’ici quelques mois.
LCP : Largest Contentful Paint
Soit la plus grande peinture contenante. Nous vous en avions déjà parlé en septembre 2019. Pour rappel, le Largest Contentful Paint mesure la vitesse de livraison (chargement + affichage) du plus grand élément de contenu utile à l’écran. Selon Google, il doit être mesuré sous la barre des 2,5 secondes suivant le début du chargement de la page pour fournir une bonne expérience utilisateur.
FID : First Input Delay
Celui-ci n’est pas un petit nouveau, même si on lui préfère le TTI ( le Time To Interactive), il mesure le temps de réaction de la page. C’est-à-dire, à partir de combien de temps, l’utilisateur peut interagir avec la page. Ce que Google résume par la mesure de l’interactivité. Là aussi, Google annonce sa recommandation avec un FID des pages web qui doit être inférieur à 100 millisecondes.
CLS : Cumulative Layout Shift
Plus obscur, ce second indicateur des Web Vitals mesure les décalages de mise en page successifs, afin d’obtenir une mesure de la stabilité visuelle. Pour offrir une bonne expérience utilisateur, les pages web doivent conserver un CLS inférieur à 0,1.
Le postulat de Google est que les décalages soudains, les mouvements inattendus d’un contenu de la page perturbent l’expérience utilisateur. Or c’est au chargement de la page que ces décalages se produisent le plus souvent. Cet indicateur cherche à nous sensibiliser à l’optimisation non seulement du temps de chargement mais aussi de la stabilité de l’interface. N’avez-vous jamais cliqué sur un bouton au moment où celui-ci était décalé suite à l’apparition d’une image ? C’est frustrant hein ?
Calcul du score CLS
“0,1 quoi” vous me direz ! Et vous auriez raison… Je vais essayer d’expliquer le calcul de cet indicateur. Pour calculer le score de décalage de la disposition, le navigateur examine la taille de la fenêtre et le mouvement des éléments instables dans cette fenêtre entre deux images rendues. Le score CLS est le produit de deux mesures de ce mouvement : la fraction d’impact et la fraction de distance. Restez-bien concentrés dans le fond j’en vois qui paniquent !
La fraction d’impact mesure l’impact des éléments instables sur la zone de la fenêtre d’affichage entre deux images. Prenons un exemple : si un élément occupe 50% de la hauteur du viewport (la fenêtre d’affichage) et que pendant le chargement il se retrouve décaler de 25% vers le bas, la zone impactée par le changement est donc 75% de la hauteur de l’écran, soit une fraction d’impact de 0.75.
La fraction de distance mesure la distance que les éléments instables ont parcouru par rapport à la fenêtre. Reprenons notre exemple ci-dessus : si un élément se déplace d’une distance égale à 25% de la hauteur de viewport cela donne une fraction de distance 0,25.
Le CLS est calculé par la multiplication de ces 2 chiffres : CLS = fraction d’impact * fraction de distance. Dans notre exemple, on obtiendrait un score de 0,1875.
Notez bien, que cela s’applique aux 2 dimensions, le CLS s’applique au changement de disposition aussi bien dans la hauteur que dans la largeur.
Comment mesurer les Web Vitals : LCP, FID et CLS ?
C’est bien le problème, il n’y a pas à ce jour de testeur en ligne. Même web.dev ne les mesure pas encore… Les rapports de web.dev sont basé sur Lighthouse 5.6.0 or ce n’est qu’à la version 6.0 (actuellement en bêta) que Lighthouse remontera ces indicateurs et en profitera pour revoir la façon dont il attribue une note de performance. Et pour le coup, on remarque que le système de notation change du tout au tout.
- Exit FMP au profit de LCP,
- Exit FCI au profit TBT,
- et la balance du poids des 5 indicateurs dans le score total est donc revue, notamment la part du SpeedIndex revue à la baisse !
On risque d’avoir des scores un peu différents quand ces indicateurs seront en place.
Google annonce tout de même que le LCP et le CLS seront disponibles bientôt sur ses principaux outils de test à savoir : le Rapport d’expérience utilisateur, PageSpeed Insights et la Search Console. Le FID lui est déjà disponible.Pour nous autres développeurs, Google nous fournit une bibliothèque JavaScript nommé web-vitals pour retourner ces indicateurs depuis vos pages web via des logs ou même en les envoyant directement dans vos statistiques google analytics.
Enfin, il existe une extension Web Vitals pour Chrome mais en version alpha… avec donc des résultats à prendre avec précautions.
Mise à jour du 15/05/2020 : par contre, l’outil Web Page Test retourne déjà les indicateurs LCP et CLS. En testant notre site avec un CLS de 0,001, on est plutôt pas mal !
Web vitals essentielles mais pas les seules…
On notera que Google n’oublie pas de préciser :
Bien que les Core Web Vitals soient les mesures essentielles
pour comprendre et offrir une expérience utilisateur exceptionnelle,
il existe également d’autres mesures essentielles.
C’était bien la peine de nous faire croire qu’il suffirait de suivre que les 3 indicateurs Web vitals… Si on s’en réfère à la liste complète, on obtient donc :
- LCP : Largest Contentful Paint,
- FID : First Input Delay,
- CLS : Cumulative Layout Shift,
- TTFB : Time to First Byte,
- FCP : First Contentful Paint,
- TBT : Total Blocking Time
- et TTI : Time to Interactive.
Auquel j’ajouterais le SpeedIndex et le temps de chargement total. Bref, chacun a son utilité pour diagnostiquer un problème précis.
Dans le même temps de cette annonce, on apprend que Google effectue la deuxième mise à jour de l’année de son algorithme de recherche. Mon petit doigt me dit que si ces trois mesures sur vos sites sont meilleures que celles des sites web de vos concurrents, cela pourrait vous donner un petit avantage de positionnement. En tout cas notre agence web rennes a hâte de vérifier ça. En tout cas si vous êtes en phase de création de site internet, pensez à ces indicateurs avant sa mise en ligne.
Sources : web.dev/vitals/,web.dev/cls/, abondance.com
