CLS (Cumulative Layout Shift)

Le CLS est une métrique des Core Web Vitals qui mesure la stabilité visuelle d’une page web tout au long de son cycle de vie.

Définition

Le Cumulative Layout Shift (CLS) quantifie la fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus. Il calcule le score total de tous les "sauts" de contenu (comme un bouton qui descend soudainement à cause du chargement d’une image). Pour offrir une bonne expérience, un site doit viser un score inférieur à 0,1.

Pourquoi c’est important ?

• Impact direct sur la visibilité SEO : Google utilise le CLS comme critère de classement. Un mauvais score peut dégrader le positionnement global de vos pages.
• Améliore l’expérience utilisateur : Empêche les erreurs frustrantes, comme cliquer par erreur sur le mauvais lien parce que le contenu a bougé au dernier moment.
• Facilite l’indexation et la compréhension : Une structure stable permet aux moteurs de mieux interpréter la hiérarchie visuelle et l’importance des éléments de la page.

Bonnes pratiques

• Appliquer la recommandation : Spécifier systématiquement les attributs width et height pour les images et les vidéos afin que le navigateur réserve l’espace nécessaire avant le téléchargement.
• Mesurer l’impact : Utiliser l’outil Layout Shift Region dans les outils de développement Chrome ou consulter le rapport "Signaux Web Essentiels" de la Search Console.
• Documenter les actions : Lister les polices d’écriture (Web Fonts) utilisant font-display: swap et les emplacements publicitaires pour lesquels une hauteur minimale a été réservée en CSS.