Les Core Web Vitals feront partie des critères de classement de l’algorithme de Google dès le mois de mai 2021 (mise à jour « Google Page expérience » avec des critères orientés UX). Bien que cet update n’aura probablement pas un impact majeur sur les positions, ces métriques méritent une attention particulière, ne serait-ce que pour soigner l’expérience utilisateur. Après avoir passé en revue le LCP (Largest Contentful Paint) dans notre article du mois dernier, nous allons aborder aujourd'hui un autre KPI des Core Web Vitals, à savoir le CLS : Cumulative Layout Shift.

L'indicateur CLS n’est pas relatif au temps de chargement initial de la page comme le LCP, mais plutôt à l’impact que peuvent avoir les différents mouvements des éléments dans une page sur l’UX. Nous allons décrypter dans cet article comment ce KPI fonctionne, sa méthode de calcul, ainsi que les optimisations possibles pour l’améliorer, sans oublier les différents outils pour identifier les éléments qui peuvent nuire à un bon CLS.

Principe du CLS

Le CLS est une métrique orientée utilisateur qui mesure l’ensemble des mouvements qui peuvent intervenir pendant la durée de vie d’une page. Chaque changement de position est mesuré via une formule que nous allons détailler, et la somme de toutes ces mesures indique le CLS global de la page. Un Bon CLS doit être inférieur à 0,1.

Figure 1 - Echelle de mesure du score CLS

Il n’est pas rare d’avoir un contenu affiché à l’écran et que ce dernier se décale subitement, horizontalement ou verticalement, à la suite de l’apparition d’une publicité (ou d’une image par exemple). La mesure de la stabilité visuelle d’une page via le CLS a pour objectif de limiter les mauvaises expériences sur une page, en permettant aux utilisateurs de pouvoir parcourir les contenus d’un site, sans que certains éléments inattendus décalent le contenu. Un mauvais CLS pourrait ainsi dégrader la navigation de l’internaute, et augmenter le taux de rebond. Voici un exemple :

Figure 2 - Augmentation du CLS à cause de publicités - Source : https://nicj.net/

Le décalage des éléments dans une page peut également amener les utilisateurs à cliquer sur un mauvais élément par rapport à leur intention initiale, comme le présente cet autre exemple :

[Cet article est disponible sous sa forme complète pour les abonnés du site Réacteur. Pour en savoir plus : https://www.reacteur.com/2021/04/core-web-vitals-focus-sur-le-cls.html]

Core Web Vitals : focus sur le CLS

Un article écrit par Aymeric Bouillat, Consultant SEO senior chez Novalem.