Cumulative Layout Shift (CLS) est une mesure Google Core Web Vitals qui mesure un événement d'expérience utilisateur.
CLS est devenu un facteur de classement en 2021 et cela signifie qu'il est important de comprendre ce que c'est et comment l'optimiser.
Qu'est-ce que le décalage de mise en page cumulatif ?
CLS est le déplacement inattendu des éléments d'une page Web pendant qu'un utilisateur fait défiler ou interagit sur la page.
Les types d’éléments qui ont tendance à provoquer un décalage sont les polices, les images, les vidéos, les formulaires de contact, les boutons et d’autres types de contenu.
Il est important de minimiser le CLS, car les pages qui se déplacent peuvent entraîner une mauvaise expérience utilisateur.
Un score CLS faible (inférieur à > 0,1) indique des problèmes de codage qui peuvent être résolus.
Quelles sont les causes des problèmes CLS ?
Il y a quatre raisons pour lesquelles le décalage cumulatif de mise en page se produit :
- Images sans dimensions.
- Annonces, intégrations et iframes sans dimensions.
- Contenu injecté dynamiquement.
- Polices Web provoquant des erreurs FOIT/FOUT.
- Animations CSS ou JavaScript.
Les images et les vidéos doivent avoir les dimensions de hauteur et de largeur déclarées dans le code HTML. Pour les images responsives, assurez-vous que les différentes tailles d'image pour les différentes fenêtres d'affichage utilisent le même rapport hauteur/largeur.
Examinons chacun de ces facteurs pour comprendre comment ils contribuent au CLS.
Images sans dimensions
Les navigateurs ne peuvent pas déterminer les dimensions de l'image avant de la télécharger. Par conséquent, lorsqu'ils rencontrent une
Une fois l'image téléchargée, le navigateur doit recalculer la mise en page et allouer de l'espace pour que l'image s'adapte, ce qui entraîne le déplacement d'autres éléments de la page.
En fournissant des attributs de largeur et de hauteur dans le tag, vous informez le navigateur du rapport hauteur/largeur de l'image. Cela permet au navigateur d'allouer la quantité d'espace appropriée dans la mise en page avant que l'image ne soit entièrement téléchargée et évite tout décalage de mise en page inattendu.
Les publicités peuvent provoquer le syndrome de fatigue chronique
Si vous chargez des annonces AdSense dans le contenu ou le classement au-dessus des articles sans style ni paramètres appropriés, la mise en page peut changer.
Ce cas est un peu délicat à gérer car les tailles d'annonces peuvent être différentes. Par exemple, il peut s'agir d'une annonce 970×250 ou 970×90, et si vous allouez un espace 970×90, il se peut qu'une annonce 970×250 soit chargée et qu'un décalage se produise.
En revanche, si vous allouez une annonce de 970 × 250 et qu’elle charge une bannière de 970 × 90, il y aura beaucoup d’espace blanc autour d’elle, ce qui donnera un aspect médiocre à la page.
Il s'agit d'un compromis : soit vous chargez des annonces de la même taille et bénéficiez d'un inventaire accru et de CPM plus élevés, soit vous chargez des annonces de tailles multiples au détriment de l'expérience utilisateur ou de la métrique CLS.
Contenu injecté dynamiquement
Il s’agit du contenu injecté dans la page Web.
Par exemple, les publications sur X (anciennement Twitter), qui chargent le contenu d'un article, peuvent avoir une hauteur arbitraire en fonction de la longueur du contenu de la publication, ce qui entraîne un décalage de la mise en page.
Bien sûr, ceux-ci se trouvent généralement en dessous du pli et ne comptent pas dans le chargement initial de la page, mais si l'utilisateur fait défiler suffisamment vite pour atteindre le point où le message X est placé et qu'il n'est pas encore chargé, cela provoquera un changement de mise en page et contribuera à votre métrique CLS.
Une façon d’atténuer ce changement est de donner la propriété CSS de hauteur minimale moyenne à la balise div parent du tweet, car il est impossible de connaître la hauteur du message du tweet avant son chargement afin que nous puissions pré-allouer de l’espace.
Une autre façon de résoudre ce problème est d’appliquer une règle CSS à la balise div parent contenant le tweet pour corriger la hauteur.
#tweet-div {
max-height: 300px;
overflow: auto;
}Cependant, cela entraînera l'apparition d'une barre de défilement et les utilisateurs devront faire défiler la page pour afficher le tweet, ce qui n'est peut-être pas le meilleur choix pour l'expérience utilisateur.
Si aucune des méthodes suggérées ne fonctionne, vous pouvez prendre une capture d’écran du tweet et créer un lien vers celui-ci.
Polices de caractères basées sur le Web
Les polices Web téléchargées peuvent provoquer ce que l'on appelle un Flash de texte invisible (FOIT).
Une façon d'éviter cela est d'utiliser des polices préchargées
et en utilisant font-display: swap; propriété css sur @font-face à la règle.
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url('https://www.example.com/fonts/inter.woff2') format('woff2');
}Avec ces règles, vous chargez les polices Web le plus rapidement possible et indiquez au navigateur d'utiliser la police système jusqu'à ce qu'il charge les polices Web. Dès que le navigateur a terminé de charger les polices, il échange les polices système avec les polices Web chargées.
Cependant, vous pouvez toujours avoir un effet appelé Flash of Unstyled Text (FOUT), qui est impossible à éviter lors de l'utilisation de polices non système, car le chargement des polices Web prend un certain temps et les polices système s'affichent pendant ce temps.
Dans la vidéo ci-dessous, vous pouvez voir comment la police du titre est modifiée en provoquant un décalage.
La visibilité de FOUT dépend de la vitesse de connexion de l'utilisateur si le mécanisme de chargement de police recommandé est implémenté.
Si la connexion de l'utilisateur est suffisamment rapide, les polices Web peuvent se charger assez rapidement et éliminer l'effet FOUT notable.
Par conséquent, utiliser des polices système chaque fois que cela est possible est une excellente approche, mais cela n'est pas toujours possible en raison des directives de style de la marque ou d'exigences de conception spécifiques.
Animations CSS ou JavaScript
Lors de l'animation de la hauteur des éléments HTML via CSS ou JS, par exemple, un élément est agrandi verticalement et rétréci en poussant le contenu vers le bas, ce qui provoque un décalage de mise en page.
Pour éviter cela, utilisez des transformations CSS en allouant de l'espace à l'élément animé. Vous pouvez voir la différence entre une animation CSS, qui provoque un décalage vers la gauche, et la même animation, qui utilise une transformation CSS.
Comment le décalage cumulé de la disposition est calculé
Il s’agit du produit de deux mesures/événements appelés « Fraction d’impact » et « Fraction de distance ».
CLS = ( Impact Fraction)×( Distance Fraction)
Fraction d'impact
La fraction d'impact mesure l'espace occupé par un élément instable dans la fenêtre d'affichage.
Une fenêtre d'affichage est ce que vous voyez sur l'écran du mobile.
Lorsqu'un élément est téléchargé puis déplacé, l'espace total qu'il occupe, depuis l'emplacement qu'il occupait dans la fenêtre d'affichage lors de son premier rendu jusqu'à l'emplacement final lors du rendu de la page.
L'exemple utilisé par Google est un élément qui occupe 50 % de la fenêtre d'affichage et qui descend ensuite de 25 % supplémentaires.
Une fois additionnées, les 75 % de la valeur sont appelés fraction d'impact et sont exprimés sous la forme d'un score de 0,75.
Fraction de distance
La deuxième mesure est appelée fraction de distance. La fraction de distance correspond à la quantité d'espace que l'élément de page a parcouru depuis sa position d'origine jusqu'à sa position finale.
Dans l'exemple ci-dessus, l'élément de page s'est déplacé de 25 %.
Le score cumulé de disposition est désormais calculé en multipliant la fraction d'impact par la fraction de distance :
0,75 x 0,25 = 0,1875
Le calcul implique quelques calculs mathématiques supplémentaires et d'autres considérations. Ce qu'il faut retenir de tout cela, c'est que le score est un moyen de mesurer un facteur important de l'expérience utilisateur.
Voici un exemple de vidéo illustrant visuellement ce que sont les facteurs d’impact et de distance :
Comprendre le décalage cumulatif de la disposition
Il est important de comprendre le décalage de disposition cumulé, mais il n'est pas nécessaire de savoir comment effectuer les calculs vous-même.
Cependant, il est essentiel de comprendre ce que cela signifie et comment cela fonctionne, car cela fait désormais partie du facteur de classement Core Web Vitals.
Plus de ressources :
