CLS : détails importants à connaître sur la métrique de Google

Google a annoncé une mise à jour de l'algorithme appelée Page Rank Experience qui mesurera les pages web en fonction de l'expérience de l'utilisateur. Quand cela va-t-il se produire ? En mai 2021…Une fois que ce sera le cas, AMP ne sera plus le critère pour figurer dans les Top Stories au sein des résultats de Google.

Google adore le UX...Noui. Il faut nuancer ce type de propos. Ce n'est pas 100% toujours le cas. Ce type de mesure ne deviendra jamais un signal prioritaire pour le référencement. Cela ne deviendra jamais un score magique qui va garantir que vous n'avez pas besoin d'un expert UX. Mais attention, cela ne signifie pas que vous devez ignorer votre score CLS. Il faut simplement reconnaître qu'il s'agit de l'un des nombreux éléments que Google prend en compte lors de l'évaluation de votre site web. Page Rank Experience, c'est l'ensemble des métriques évaluées par Google pour déterminer si un site est agréable à visiter. Avec le PRE, Google souhaite mettre en avant les sites qui proposent un contenu accessible et utilisable.

Si Google pense que les utilisateurs ont une mauvaise expérience de votre site web, votre classement en pâtira. Les études de Google ont montré que les visiteurs ont 24 % de chances en moins d'abandonner un site qui répond aux exigences des métriques Core Web Vitals.

Google utilise déjà comme facteurs de classement de nombreux facteurs existants tels que la mise à jour “mobile-friendly”, la mise à jour du temps de chargement des pages, l'amélioration du classement HTTPS, la pénalité contre les popups et autre interstitiels, etc.

Ce qui est mesuré par chaque métrique Core Web Vital :

• Largest contentful paint (LCP) : c’est la vitesse de votre page. À quelle vitesse votre site se charge-t-il ?
• Cumulative layout shift (CLS) : c’est la réponse à "Quelle est la stabilité visuelle de votre site web ?” Vous est-il déjà arrivé d'atterrir sur une page, de cliquer sur un bouton, et à la dernière seconde, il se déplace et vous touchez autre chose ? CLS vise ça.
• First input delay (FID) : Quelle est la vitesse d’interactivité ? Lorsque l'utilisateur clique sur quelque chose, combien de temps faut-il à votre site pour le traiter et lui fournir un résultat ?

Un bon score CLS est en-dessous de 0.1.

Il existe un rapport "Core Web Vitals" dans la Google Search Console. Il vous indiquera si toutes les URL que Google a dans son index sont bonnes ou doivent être améliorées. Pour le vérifier, utilisez la console de recherche et les outils Page Speed Insights. D'autres outils sont également disponibles :

Vous pouvez voir votre score CLS dans le résumé métrique en haut de votre audit Lighthouse

1. Dans le menu, allez à "more tools" et ensuite "rendering".
2. Allez à “layout shifts regions”.
3. Le contenu qui bouge  sera mis en évidence en bleu.
4. Il est utile de pouvoir voir quel contenu a été le plus déplacé pour résoudre ce problème.

Voici quelques autres outils que vous pouvez utiliser

• Vous pouvez également consulter le rapport sur l'expérience des utilisateurs de Chrome CrUX.
• Pour des données plus granulaires : il y a une API JavaScript dans Chromium. Vous pouvez calculer des taux comme les décalages de mise en page par minute.
• Ou obtenir un gif généré avec cet outil comme je l'ai fait pour cet article ci-dessus.

Tout d'abord, Google examine la zone de l'écran qui est affectée. C'est la zone d'impact. Ensuite, Google examine les éléments du DOM qui se sont déplacés d'un frame à un autre. Habituellement, ce sont les publicités qui perturbent la stabilité visuelle. Les publicités ne sont pas considérées comme des éléments décalés car Google ne veut pas pénaliser les nouveaux éléments. Le raisonnement est que c'est une chose courante qui se produit lors du rendu progressif.

S'il y a beaucoup d'éléments décalés dans le même frame ou si les éléments se déplacent à la fois horizontalement et verticalement, plusieurs zones d'impact peuvent émerger. Vous n'avez donc pas toujours un joli petit rectangle comme zone d'impact. La zone d'impact est évaluée par rapport au viewport pour fournir une normalisation entre les différentes tailles d'appareils et d'écrans. Cela donne un ratio appelé fraction d'impact : zone d'impact/taille de la fenêtre.

Si une chose bouge beaucoup, elle est plus distrayante que si elle bouge un peu. Google prend donc en compte la distance maximale parcourue par un élément sur la page sans nuire à l'expérience de l'utilisateur par frame individuel. Si on additionne le score à chaque frame, du début à la fin du chargement de la page, on obtient un score cumulé, d'où le nom Cumulative Layout Score.

• Le rendu peut changer (de manière asynchrone) en réponse à la saisie de l'utilisateur. La solution de Google a été de fournir une fenêtre d'entrée d'inclusion pour ignorer les changements dans la demi-seconde suivant l'entrée.
• Si vous animez une propriété liée à la mise en page avec du CSS (comme les position offsets), cela amène Google à relancer le moteur de mise en page du navigateur sur chaque frame. Comme chaque image produit un décalage de mise en page, le score cumulé des décalages de mise en page est énorme. La solution de Google est d'ignorer les modifications de la propriété transform. Transform n'influence pas la disposition environnante. Tant que votre carrousel est construit avec cela, votre score CLS est sain et sauf. Bonus : la propriété transform vous permet d'être plus efficace même si votre page contient beaucoup de scripts.

Autres points à prendre en compte :

• Images non dimensionnées : ajoutez des attributs de taille ou réservez l'espace nécessaire avec le ratio d'aspect CSS
• Polices de caractères qui chargent lentement : sur les connexions lentes, le texte peut se charger avant la police. Envisagez font-display:optional ou envisagez un outil de correspondance des styles de police pour votre fallback.