CLS

Un texte qui saute au moment où on commence à le lire, un bouton qui se dérobe sous le doigt parce qu'une publicité vient de s'afficher au-dessus : ce sont des décalages de mise en page. Le Cumulative Layout Shift les mesure. Contrairement au LCP et à l'INP, les deux autres Core Web Vitals, ce n'est pas une durée mais un score sans unité.

Comment le score est calculé

Chaque décalage reçoit un score égal au produit de deux fractions. La fraction d'impact correspond à la part de la fenêtre occupée par les éléments instables, sur l'image d'avant et l'image d'après réunies. La fraction de distance correspond à la distance parcourue, rapportée à la plus grande dimension de la fenêtre.

Exemple repris de la documentation de Google : un élément occupe la moitié de la fenêtre et descend de 25 % de sa hauteur. Sur les deux images, il couvre au total 75 % de la fenêtre, d'où une fraction d'impact de 0,75. La fraction de distance vaut 0,25. Le décalage obtient donc un score de 0,75 × 0,25, soit 0,1875.

Les décalages sont ensuite regroupés en sessions. Une session réunit des décalages qui se suivent à moins d'une seconde d'intervalle, sur cinq secondes au maximum. Le CLS d'une page est le score de la session la plus forte, pas la somme de tous les décalages de la visite.

Les seuils

CLS	Évaluation
0,1 ou moins	Bon
De 0,1 à 0,25	À améliorer
Plus de 0,25	Mauvais

La valeur retenue est le 75e centile des visites, sur mobile et sur ordinateur séparément.

Décalages attendus et inattendus

Seuls les décalages inattendus comptent. Ceux qui surviennent dans les 500 millisecondes qui suivent un clic, un appui ou une frappe au clavier sont exclus : l'internaute s'attend à ce que la page réagisse, par exemple quand il ouvre un menu accordéon. Le défilement, le glisser et le zoom à deux doigts ne comptent pas comme des actions de ce type.

Les causes fréquentes et leurs corrections

• Images et vidéos sans dimensions : indiquer les attributs width et height, ou réserver l'espace avec la propriété CSS aspect-ratio.
• Publicités, contenus intégrés et blocs chargés tardivement : réserver leur emplacement avec min-height, et conserver cet espace même si rien ne s'affiche, car le retirer provoque aussi un décalage.
• Polices web plus grandes ou plus petites que la police de secours : utiliser font-display: optional, rapprocher la police de secours avec size-adjust, précharger les polices importantes.
• Éléments insérés par script au-dessus du contenu existant, comme une bannière ajoutée après coup.
• Animations qui modifient top, left, width ou height : animer plutôt avec transform, qui ne déclenche pas de nouvelle mise en page.

L'image sans dimensions reste le cas le plus simple à corriger. Il suffit de déclarer sa taille d'origine dans le HTML :

<img src="atelier.jpg" width="640" height="360" alt="Atelier de menuiserie">

Une règle CSS comme img { width: 100%; height: auto; } la laisse ensuite s'adapter à la largeur de son conteneur. Le navigateur connaît son ratio avant même de l'avoir téléchargée, et réserve la bonne hauteur.

Mesurer le CLS

Les données de terrain se consultent dans PageSpeed Insights et dans le rapport Core Web Vitals de la Google Search Console. Les outils de laboratoire, comme Lighthouse, ne voient en général que les décalages du chargement initial, alors que le CLS de terrain couvre toute la durée de vie de la page, défilement compris. Les deux valeurs peuvent donc différer fortement. Une page éligible au cache amont-aval du navigateur (bfcache) évite aussi des décalages : au retour sur la page, celle-ci est restaurée déjà chargée.

Google rappelle qu'une bonne expérience de page, CLS compris, ne garantit pas les premières positions : la pertinence du contenu passe d'abord. Un CLS faible reste un gage de confort pour le lecteur et évite les clics involontaires.