Un layout shift est un changement inattendu de la disposition des éléments d'une page web. C'est l'exemple typique de la bannière publicitaire qui apparaît postérieurement au chargement de la page : en apparaissant, la bannière décale le contenu initialement chargé, vers le haut ou vers le bas, pour se faire de la place. Ces changements de mise en page nuisent à l'expérience utilisateur (UX) sur le site web. C'est dans cet enjeu que Google permet de les mesurer : le résultat de cette mesure indique le Cumulative Layout Shift (CLS). Un bon CLS signifie que le contenu de la page est stable. Si le Cumulative Layout Shift est médiocre, l'améliorer augmente la performance du site : l'UX et le SEO en bénéficient.
Qu'est-ce que le Cumulative Layout Shift ?
Le Cumulative Layout Shift est une mesure qui évalue la stabilité visuelle d'une page web. Quand la place des éléments change de manière inattendue pendant que le visiteur consulte la page, alors qu'il n'a pas interagi avec son contenu, le CLS se dégrade. Le CLS fait partie des Core Web Vitals de Google.
Quelles sont les causes d'un layout shift ?
Des layout shifts peuvent survenir quand les éléments d'une page ne sont pas chargés simultanément. Cette situation est récurrente, notamment car la technique du lazy loading est répandue. Si un espace de taille adaptée n'est pas réservé à chaque élément, le chargement différé d'un élément peut décaler les éléments déjà affichés.
Les principales causes d'un layout shift sont :
- Une image aux dimensions inconnues. Quand le navigateur n'est pas renseigné, il ne peut pas réserver sa place à l'image. Si l'image se charge en différé, elle décale le contenu de la page pour trouver sa place.
- Une police d'écriture. Si la police utilisée n'est pas prise en charge par le navigateur, il doit la charger ou la remplacer avant d'afficher le texte. Pendant ce laps de temps, aucun espace n'est prêt à accueillir le paragraphe : quand le texte s'affiche, la mise en page change.
- Un contenu dynamique tiers. Les contenus dynamiques en provenance de tiers, et majoritairement les publicités, peuvent être responsables de layout shifts : la publicité est chargée en différé, et prend la place d'un contenu qu'elle déplace. Un widget tel qu'une vidéo YouTube ou un plan interactif peut également être en cause. Les ressources importées sont chargées postérieurement, et dimensionnées dynamiquement, sans qu'un espace adapté leur ait été assigné.
Anticiper un layout shift pose des difficultés, car le site web ne fonctionne pas de manière identique côté développeur et côté utilisateur. Du contenu personnalisé en fonction des cookies de l'utilisateur affiche en effet une mise en page distincte d'un utilisateur à un autre. Sur un ordinateur et sur un mobile, en outre, le rendu est différent car les dimensions des éléments de la page doivent s'adapter à la taille de l'écran.
Pourquoi le Cumulative Layout Shift est important ?
Le Cumulative Layout Shift est une mesure essentielle à surveiller pour offrir une bonne expérience utilisateur. Or l'UX influence largement le référencement naturel d'un site. Le CLS, par conséquent, est également important pour le SEO. C'est à ces égards que Google fait du Cumulative Layout Shift un Core Web Vital.
Pour l'expérience utilisateur
En matière d'UX, avoir un bon CLS est important pour éviter une rupture dans le parcours utilisateur, et notamment certains comportements de la page non souhaités par le visiteur. Un bon CLS en outre assure une expérience agréable à l'œil : le contenu ne bouge pas. Illustrations :
- Un visiteur interrompu dans sa lecture d'un contenu le temps du saut de mise en page est agacé.
- Cliquer sur une publicité qui apparaît de manière intempestive, et être redirigé sur une autre page, est bon pour les revenus publicitaires mais mauvais pour l'expérience utilisateur.
- Quand le visiteur clique sur le mauvais bouton à cause d'un layout shift, les conséquences sont désagréables. Cliquer involontairement sur un bouton de confirmation de commande, par exemple, est particulièrement déplaisant.
Pour le référencement naturel
En matière de SEO, le décalage cumulatif de mise en page est un précieux indicateur de performance. Le CLS permet en effet de comprendre et d'améliorer le classement d'une page dans les résultats Google. Cela s'observe à deux niveaux :
- Un mauvais score met l'UX en jeu : les internautes délaissent la page web en conséquence. Progressivement, l'autorité du site baisse et, indirectement, son référencement naturel se dégrade. Améliorer son score permet de rectifier la situation.
- Le score du Cumulative Layout Shift se répercute directement sur les performances SEO. Google en effet se fonde sur le CLS pour récompenser ou pénaliser un site : c'est un Core Web Vitals, au même titre que le Largest Content Painful (LCP) qui vise à réduire le chargement du site, entre autres.
Maintenir un bon CLS contribue à générer, en continu, un trafic important sur le site web.
Comment mesurer le Cumulative Layout Shift ?
Pour faciliter la tâche des éditeurs de sites web, et parce que le CLS est un Core Web Vital, Google fournit des outils pour mesurer le décalage cumulatif de mise en page. PageSpeed Insights et l'extension Google Chrome Lighthouse calculent automatiquement le Cumulative Layout Shift, sur ordinateur et sur mobile.
Des outils tels que Chrome DevTools, Google Search Console et Chrome UX Report permettent également de mesurer le Cumulative Layout Shift, et d'approfondir l'analyse du score.
La mesure est effectuée pour une page web, c'est-à-dire une URL, sur tous les éléments de la page, à chaque fois que la page est chargée par un visiteur. La stabilité est ainsi mesurée de manière globale, eu égard aux enjeux d'UX. C'est pour cela qu'on parle de décalage cumulatif de mise en page : c'est le cumul des décalages sur une page, à l'occasion d'une visite, qui est calculé. Les décalages de mise en page provoqués par le visiteur, bien entendu, ne sont pas pris en compte. Quand les éléments se décalent parce qu'un visiteur clique sur « En savoir plus » pour dérouler un descriptif produit, par exemple, cela n'entre pas dans le calcul du Cumulative Layout Shift.
À noter que pour calculer le CLS, Google utilise les notions de « Impact Fraction » et « Distance Fraction » : Cumulative Layout Shift = Impact Fraction x Distance Fraction. L'Impact Fraction est le pourcentage d'espace occupé par l'élément instable à l'écran, la Distance Fraction est la distance parcourue par l'élément pendant le layout shift, exprimée en pourcentage de taille d'écran. Exemple de calcul sur une page composée d'un seul élément : l'élément occupe 30 % de l'écran et se déplace de 10 % (il parcourt 1 cm sur l'écran de 10 cm), le CLS est égal à 0,3 x 0,1 = 0,03.
Qu'est-ce qu'un bon Cumulative Layout Shift ?
Le Cumulative Layout Shift est bon s'il est inférieur à 0,1 pour au moins 75 % des visites de la page. Les outils de mesure de Google indiquent le score global, et détaillent le score par pourcentage de visites. Plus le CLS est faible, meilleur il est. Un CLS élevé peut être amélioré.
Comment améliorer son Cumulative Layout Shift ?
Utiliser un CMS
Un bon CMS intègre les recommandations de Google pour guider le créateur du site web dans la construction d'un site performant. Les bonnes pratiques à adopter sont suggérées, et l'accès aux outils de mesure et de diagnostic du Cumulative Layout Shift est facilité. Les principaux leviers d'amélioration peuvent en outre être détectés.
Attribuer une taille aux images et aux vidéos
Les attributs de taille et les propriétés CSS permettent d'indiquer au navigateur les dimensions et la position des éléments d'une page. Ainsi, le navigateur peut réserver l'espace approprié aux médias : le risque de layout shift disparaît sur ces éléments, le Cumulative Layout Shift est amélioré.
Utiliser des polices standard
Pour éviter les décalages de mise en page liés à l'utilisation d'une police d'écriture non prise en charge, il est judicieux d'utiliser des polices standard, ou polices « web safe ». Cela contribue à réduire le Cumulative Layout Shift, et donc à l'améliorer.
Arbitrer entre revenus publicitaires et expérience utilisateur
Faire apparaître une publicité de manière impromptue, de manière à ce que le visiteur clique dessus involontairement, est un procédé utilisé pour augmenter ses revenus publicitaires. Mais le résultat est de courte durée. Les visiteurs se lassent et évitent le site qui propose ainsi une UX médiocre.
Proposer de la publicité n'est pas pénalisant. Mais il est recommandé de bien spécifier la taille et la position de l'espace publicitaire, avec CSS, pour limiter les décalages de mise en page. Éviter les pop-ups et utiliser des pop-in sans nuire à la navigation, en outre, améliore l'UX même si la pratique n'influe pas sur le score CLS.
Limiter les contenus hors de contrôle
Quand des ressources externes sont importées par des tiers, il peut s'avérer délicat d'en contrôler l'affichage. Qu'il s'agisse d'une publicité publiée par un annonceur ou d'une publication de réseau social, la maîtrise de la taille du contenu n'est pas garantie. Limiter les contenus dynamiques hors de contrôle permet de réduire le Cumulative Layout Shift, pour l'améliorer.
Pour aller plus loin dans votre stratégie web, évaluez votre site internet avec l'outil Website Grader, ou découvrez le logiciel CMS de Hubspot.
