CLS

Cette sensation agaçante de cliquer sur un bouton qui se dérobe au dernier moment parce qu’une image vient de se charger juste au-dessus : le Cumulative Layout Shift chiffre précisément ce genre de déplacements imprévus survenus pendant l’affichage d’une page.

Une des trois métriques Core Web Vitals

Google intègre le CLS dans son classement des résultats de recherche aux côtés du LCP et de l’INP. Sur un site WordPress, les causes les plus fréquentes sont des images sans dimensions définies, des publicités insérées dynamiquement, des polices web qui changent la mise en page une fois chargées, ou des bannières de cookies ajoutées après coup en haut de page.

Exemple

<img
  src="photo-produit.jpg"
  width="800"
  height="600"
  alt="Photo du produit"
>

Préciser width et height permet au navigateur de réserver l’espace exact de l’image avant même qu’elle ne soit téléchargée, évitant tout déplacement du contenu environnant.

Bon à savoir

• Un score CLS inférieur à 0,1 est considéré comme bon par Google ; au-delà de 0,25, l’expérience est jugée mauvaise.
• La propriété CSS aspect-ratio permet de réserver l’espace d’un média même sans connaître ses dimensions exactes à l’avance.
• Contrairement au LCP ou au TTFB, le CLS cumule les déplacements sur toute la durée de vie de la page, y compris après une interaction de l’utilisateur, pas seulement au chargement initial.