Décalage cumulatif de mise en page (CLS)

Décalage cumulatif de mise en page

La métrique Cumulative Layout Shift (CLS) mesure la stabilité globale de la mise en page de votre site. Un site dont la mise en page se modifie de manière inattendue pendant le chargement peut entraîner des erreurs accidentelles de l'utilisateur et le distraire.

Le décalage cumulatif de mise en page (CLS) se produit lorsque des éléments sont déplacés après avoir été initialement rendus par le DOM. Dans cet exemple, un bouton a été affiché à l'écran après le bloc de texte, provoquant le déplacement vers le bas de ce dernier. Une combinaison d'impact et de distance est prise en compte lors du calcul du CLS.

Exemple de décalage cumulatif de mise en page

Les éléments qui changent de position lorsque de nouveaux éléments s'affichent à l'écran affectent le CLS.

Le score individuel de décalage de mise en page de chaque élément n'est comptabilisé dans le CLS que si un mouvement inattendu se produit. Si un nouvel élément est ajouté au DOM ou si un élément existant change de taille, cela ne compte pas comme un décalage de mise en page si les éléments chargés conservent leur position.

Pour aller plus loin