Le Décalage Cumulatif de la Mise en Page (CLS) est une métrique essentielle de Google Core Web Vitals qui mesure un événement d’expérience utilisateur. Devenu un facteur de classement en 2021, il est crucial de comprendre ce qu’est le CLS et comment optimiser cette métrique pour améliorer l’expérience utilisateur et les classements SEO.
Qu’est-ce que le Décalage Cumulatif de la Mise en Page ?
Le CLS représente les déplacements imprévus des éléments de la page web lorsque l’utilisateur fait défiler ou interagit avec la page. Les éléments qui provoquent généralement un décalage incluent les polices, les images, les vidéos, les formulaires de contact, les boutons et d’autres types de contenu. Minimiser le CLS est crucial car ces déplacements peuvent détériorer l’expérience utilisateur.
Les Causes des Problèmes de CLS
Il existe quatre principales raisons pour lesquelles le CLS se produit :
- Images sans dimensions.
- Publicités, inclusions et iframes sans dimensions.
- Contenu injecté dynamiquement.
- Polices Web causant FOIT/FOUT.
- Animations CSS ou JavaScript.
Images sans Dimensions
Les navigateurs ne peuvent pas déterminer les dimensions des images avant de les télécharger. Par conséquent, le navigateur ne peut pas allouer d’espace pour l’image en rencontrant une balise <img>. Une fois l’image téléchargée, le navigateur doit recalculer la mise en page et allouer de l’espace pour l’image, provoquant le déplacement des autres éléments sur la page.
En fournissant des attributs de largeur et de hauteur dans la balise <img>, vous informez le navigateur du rapport d’aspect de l’image, ce qui lui permet d’allouer la quantité correcte d’espace dans la mise en page avant que l’image ne soit entièrement téléchargée, évitant ainsi des décalages imprévus.
Les Publicités peuvent Provoquer des Problèmes de CLS
Le chargement de publicités Adsense dans le contenu ou sur le leaderboard en haut des articles sans un style et des réglages appropriés peut entraîner un décalage de la mise en page. Les tailles de publicité peuvent varier, et sans espace correctement alloué, cela peut conduire à une mauvaise expérience utilisateur.
Contenu Injecté Dynamiquement
Il s’agit du contenu qui est injecté dans la page web, comme les publications sur X (anciennement Twitter) qui se chargent dans le contenu d’un article. Assigner une hauteur minimale moyenne via CSS à la balise div parente du tweet est une solution pour atténuer ce problème, car il est impossible de connaître la hauteur du tweet avant son chargement.
Polices Web
Les polices web téléchargées peuvent provoquer un Flash de Texte Invisible (FOIT). Pour prévenir cela, il est recommandé d’utiliser des préchargements de polices et la propriété CSS font-display: swap;. Cela permet de charger les polices web aussi rapidement que possible et de dire au navigateur d’utiliser les polices système jusqu’à ce que les polices web soient chargées. Toutefois, il peut encore y avoir un Flash de Texte Non Stylisé (FOUT), qui est inévitable lors de l’utilisation de polices non système.
Animations CSS ou JavaScript
Lors de l’animation de la hauteur des éléments HTML via CSS ou JS, il est conseillé d’utiliser des transformations CSS pour allouer l’espace pour l’élément animé. Cela permet de prévenir les décalages de mise en page lors des animations.
Comment le Déplacement Cumulatif de la Mise en Page est Calculé
Le CLS est le produit de deux métriques/événements : le Fraction d’Impact et le Fraction de Distance.
Fraction d’Impact : mesure l’espace qu’un élément instable occupe dans la fenêtre de visualisation. Lorsque l’élément change de position, l’espace total qu’il occupe est ajouté pour donner la fraction d’impact.
Fraction de Distance : mesure la quantité d’espace que l’élément de la page a déplacé de la position initiale à la position finale. Le score CLS est obtenu en multipliant la fraction d’impact par la fraction de distance.
Comprendre et optimiser le CLS est essentiel car il fait désormais partie des facteurs de classement des Core Web Vitals. La mise en œuvre des techniques mentionnées permet d’assurer une expérience utilisateur fluide et d’améliorer les performances SEO globales de votre site.
