Le Cumulative Layout Shift (CLS) est une métrique des Core Web Vitals de Google qui mesure un événement crucial de l’expérience utilisateur. Devenu un facteur de classement en 2021, il est essentiel de comprendre ce qu’il est et comment l’optimiser.
Qu’est-ce que le Cumulative Layout Shift ?
Le CLS est le déplacement inattendu des éléments d’une page web pendant qu’un utilisateur défile ou interagit avec elle. Parmi les éléments susceptibles de provoquer un décalage figurent 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 les pages qui se déplacent peuvent entraîner une mauvaise expérience utilisateur. Un mauvais score CLS (supérieur à 0,1) indique des problèmes de codage pouvant être résolus.
Quelles sont les causes des problèmes de CLS ?
Il existe quatre raisons principales pour lesquelles des décalages de mise en page surviennent :
- Images sans dimensions.
- Publicités, éléments intégrés et iframes sans dimensions.
- Contenu injecté dynamiquement.
- Polices Web provoquant FOIT/FOUT.
- Animations CSS ou JavaScript.
Images sans dimensions
Les navigateurs ne peuvent pas déterminer les dimensions d’une image avant de les télécharger. Par conséquent, lorsqu’ils rencontrent une balise , ils ne peuvent pas allouer d’espace pour l’image. 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 provoque le déplacement d’autres éléments de la page.
En fournissant des attributs de largeur et de hauteur dans la balise , vous informez le navigateur du rapport d’aspect de l’image, permettant au navigateur d’allouer la bonne quantité d’espace dans la mise en page avant que l’image ne soit entièrement téléchargée, évitant ainsi les décalages inattendus de mise en page.
Les publicités peuvent causer du CLS
Si vous chargez des publicités AdSense dans le contenu ou en haut des articles sans un style et des paramètres appropriés, la mise en page peut être perturbée. Cela est délicat à gérer car les tailles des publicités peuvent varier. Par exemple, une publicité peut mesurer 970×250 ou 970×90, et si vous allouez un espace de 970×90, une publicité de 970×250 pourrait provoquer un déplacement.
À l’inverse, si vous prévoyez un espace de 970×250 et qu’une publicité de 970×90 charge, il y aura beaucoup d’espace blanc autour, ce qui nuira à l’esthétique de la page.
C’est un compromis : soit vous chargez des publicités de la même taille pour bénéficier d’un inventaire accru et de CPM plus élevés, soit vous chargez des publicités de tailles variées au détriment de l’expérience utilisateur ou de la métrique CLS.
Contenu injecté dynamiquement
Il s’agit de contenu injecté dans la page web. Par exemple, des tweets insérés dans le contenu d’un article peuvent avoir une hauteur arbitraire en fonction de la longueur du contenu du tweet, ce qui provoquera un décalage de mise en page.
Pour atténuer ce problème, vous pouvez appliquer une propriété CSS de hauteur minimale moyenne au parent div du tweet car il est impossible de connaître la hauteur exacte du tweet avant qu’il ne soit chargé, mais nous pouvons pré-allouer de l’espace.
Une autre méthode consiste à appliquer une règle CSS au div parent contenant le tweet pour fixer la hauteur :
#tweet-div {
max-height: 300px;
overflow: auto;
}
Cependant, cela fera apparaître une barre de défilement, et les utilisateurs devront faire défiler pour voir le tweet, ce qui pourrait ne pas être optimal pour l’expérience utilisateur.
Polices Web
Les polices web téléchargées peuvent provoquer ce que l’on appelle un flash de texte invisible (FOIT). Une solution consiste à précharger les polices :
<link rel="preload" href="https://www.example.com/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
et à utiliser la propriété CSS font-display: swap; sur la règle @font-face.
@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 demandez au navigateur d’utiliser la police système jusqu’à ce que les polices web soient chargées. Dès que les polices web sont prêtes, le navigateur les remplace par les polices système.
Animations CSS ou JavaScript
Lorsque vous animez la hauteur des éléments HTML via CSS ou JS, par exemple en élevant et réduisant un élément verticalement, cela pousse le contenu vers le bas, provoquant un décalage de mise en page. Pour éviter cela, utilisez les transformations CSS en allouant de l’espace pour l’élément animé.
Comment le Cumulative Layout Shift est-il calculé ?
Cette métrique est le produit de deux valeurs : « Impact Fraction » et « Distance Fraction ».
CLS = (Impact Fraction) × (Distance Fraction)
Impact Fraction
Impact fraction 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 mobile. Lorsqu’un élément se déplace et se déplace ensuite, l’espace total que l’élément occupe, du lieu qu’il occupait initialement à sa position finale après le rendu de la page, est calculé.
L’exemple utilisé par Google est un élément qui occupe 50 % de la fenêtre d’affichage et qui descend ensuite de 25 %. Lorsqu’on les additionne, la valeur de 75 % est appelée Impact Fraction, exprimée avec un score de 0,75.
Distance Fraction
La Distance Fraction est la quantité d’espace que l’élément de la page a déplacée de la position initiale à la position finale. Dans l’exemple ci-dessus, l’élément de la page s’est déplacé de 25 %. Le score CLS est ensuite calculé en multipliant l’Impact Fraction par la Distance Fraction :
0,75 x 0,25 = 0,1875
La compréhension du Cumulative Layout Shift est essentielle, bien qu’il ne soit pas nécessaire de savoir comment faire les calculs soi-même. Cependant, comprendre ce que cela signifie et comment cela fonctionne est crucial, car cela fait partie des Core Web Vitals, facteur de classement.
