Le Cumulative Layout Shift (CLS) est une métrique mesurant l’instabilité du contenu, obtenue en additionnant les changements de mise en page qui se produisent au-delà des 500 premières millisecondes du chargement de la page. Elle examine la quantité de contenu qui se déplace dans l’écran de l’utilisateur ainsi que la distance à laquelle les éléments concernés ont été déplacés.

Imaginez que vous lisez un article, et qu’au milieu de ce dernier des éléments se déplacent soudainement sur la page, vous obligeant à retrouver l’endroit où vous vous êtes arrêté. C’est très courant sur le web, qu’il s’agisse de la lecture « passive » d’un article ou que vous essayiez d’interagir avec la page en cliquant sur un bouton qui ne se trouve plus là au « clic ». De telles expériences sont visuellement déstabilisantes et frustrantes et surviennent lorsque des éléments déjà visibles sont contraints de se déplacer parce qu’un autre élément a été soudainement chargé dans la page, ou redimensionné.

Voici les principales causes de CLS et comment y remédier. (@LeBonCoin  : sois attentif, ça commence)

Images sans dimensions

Lorsque le Responsive Web Design a été introduit, les développeurs ont commencé à zapper la largeur et la hauteur et se sont mis à utiliser le CSS pour redimensionner les images à la place :

img {
width : 100 % ; /* ou max-width : 100 % ; */
height : auto ;
}

Avec cette approche l’espace ne sera alloué à l’image qu’une fois qu’elle sera importée et que le navigateur pourra en déterminer les dimensions. A chaque fois qu’une image s’affiche, la page se dimensionne, allouant la place nécessaire à l’image  : pof, le texte se déplace d’autant et nous voilà perdu.

Parmi les bonnes pratiques récentes, signalons l’utilisation de l’aspect ratio  :

img {
aspect-ratio : attr(width) / attr(height) ;
}

S’agissant des images responsives, « srcset » va définir un ensemble d’une même image dans plusieurs tailles, le navigateur choisissant la taille la plus adaptée.