CLS : stabilité visuelle, dimensions et cache de retour

CLS : la stabilité visuelle, le correcteur le moins cher

1. Ce que CLS mesure

   CLS — Cumulative Layout Shift — est la somme des scores de déplacement de chaque élément visible qui bouge sans raison pendant la visite. Le score est nul à l'identique et augmente avec chaque décalage.

   Ce qui compte et ce qui ne compte pas

   • Seuls les déplacements non attendus sont comptés. Un accordéon que l'utilisateur ouvre fait partie de l'interaction, pas du CLS.
   • La mesure couvre toute la visite, pas seulement le chargement. Un contenu inséré une minute plus tard — une publicité, un module chargé en différé — dégrade le score.
   • Le calcul exclut les 500 ms suivant une interaction : ce qui bouge juste après un clic est considéré comme la conséquence de l'action, pas un défaut.

   Pourquoi un décalage coûte cher

   Ce que CLS mesure n'est pas un détail esthétique. Un élément qui se déplace lorsque l'utilisateur vise un bouton fait manquer le clic : le curseur se trouvait sur le bouton, le bouton a glissé, le clic est parti ailleurs. Sur une liste de résultats, un décalage en pleine lecture fait perdre la ligne. Le CLS est la métrique qui traduit directement un problème d'accessibilité et de confiance en nombre.

   Le lien avec le cours d'accessibilité est direct : les deux corrections sont les mêmes — réserver la place des contenus avant leur arrivée.

   Une métrique déjà à bien des sites

   Contrairement au LCP et à l'INP, le CLS est la moins défaillante des trois : la documentation situe environ trois quarts des origines au vert. Le module ne s'en félicite pas — il en tire la conclusion utile : c'est la métrique où l'effort est le plus rentable, donc celle qu'il ne faut pas laisser se dégrader.

2. La correction principale : réserver la place

   La cause numéro un de décalage : un contenu sans dimensions. Le navigateur ne peut pas lui réserver de place, il l'insère à hauteur nulle, puis le contenu arrive et pousse tout le reste vers le bas.

   L'image sans dimensions, et pourquoi c'est si fréquent

   La documentation donne un chiffre : 66 % des pages contiennent au moins une image sans taille déclarée. Avec une hauteur initiale de 0 pixel, chaque image de ce type provoque un décalage quand elle se charge.

   La correction tient en deux attributs par image :

   • width et height en attributs HTML, ce qui permet au navigateur de calculer le ratio avant le téléchargement ;
   • ou les propriétés CSS équivalentes, avec aspect-ratio si la largeur est dynamique.

   Ce n'est pas un correctif de performance au sens strict : c'est une déclaration de dimensions. Le navigateur peut alors réserver la place exacte.

   Le cas des images dans un conteneur flexible

   En CSS Grid ou Flexbox, la largeur peut dépendre du conteneur, ce qui empêche d'écrire une largeur fixe en pixels. La solution est aspect-ratio : on donne le ratio, le navigateur calcule la hauteur. Fonctionnellement disponible et applicable aux éléments non-images également — un encart vidéo ou une carte peut ainsi réserver sa place.

   Les autres contenus qui décalent

   • Les bannières et bandeaux imposés par-dessus le contenu — consentement, promotion. La place doit être réservée, pas seulement la position.
   • Les polices qui décalent la mise en page au moment de leur chargement. Le correctif consiste à ajuster la taille de la police de remplacement, à l'avance, pour qu'elle occupe la même place.
   • Le contenu injecté au-dessus de ce qui existe : un message d'erreur, un avertissement, un résultat de recherche.
   • Les iframes et composants tiers : un composant instable peut être exclu explicitement du calcul.

3. Le cache de retour arrière : une correction gratuite

   Le bfcache — back/forward cache — conserve une page en mémoire lorsqu'on la quitte, et la recharge instantanément au retour depuis l'historique. Ce n'est pas une optimisation de performance ordinaire : c'est une page qui ne se charge pas.

   Ce que le bfcache change pour le CLS

   Deux effets, tous deux importants. D'abord, la page revenue est identique à celle quittée : aucun décalage n'est possible. Ensuite — et la documentation le dit explicitement — l'introduction du bfcache en 2022 a été la plus grosse amélioration de CLS observée cette année-là. Une part importante du « progrès » du CLS sur le web vient de là, pas d'un travail de mise en page.

   Pourquoi une page est ineligible

   • Un en-tête de cache interdisant la conservation — notamment no-store, très répandu pour des raisons de sécurité mal comprises.
   • Un gestionnaire unload — l'événement est obsolète et son seul effet pratique est d'inéligibilité au bfcache.
   • Une connexion ouverte non terminée, certaines API non compatibles.

   L'arbitrage à connaître

   Le bfcache conserve la page en mémoire, sur l'appareil de l'utilisateur. La question de sécurité est donc réelle si la page contient des données sensibles après déconnexion. Le module ne tranche pas à la place du projet : il indique que l'arbitrage existe, que la raison la plus fréquente de l'exclure est une précaution de sécurité rarement justifiée par l'analyse réelle, et que la décision doit être prise par écrit.

   Comment vérifier

   DevTools dispose d'un testeur de bfcache, et l'API « Not Restored Reasons » permet de détecter les motifs d'inéligibilité en terrain — donc auprès des vrais utilisateurs, pas seulement en laboratoire. C'est la seule méthode qui donne le motif réel.

4. Animations, transitions et propriétés qui provoquent une mise en page

   Une animation ne provoque pas forcément de décalage — mais une animation qui déplace un élément en provoquant une mise en page en provoque un à chaque image.

   La liste des propriétés : la règle

   Les propriétés CSS se répartissent en trois catégories, et seules les deux dernières dégradient la mise en page ou la peinture :

   • Sans effet de mise en page — transform, opacity. Ces deux propriétés sont traitées sur le GPU et n'obligent pas le navigateur à recalculer la position des autres éléments.
   • Avec effet de peinture — color, box-shadow, background.
   • Avec effet de mise en page — width, height, top, margin, font-size. Animer celles-ci force le recalcul de la mise en page de la page entière, à chaque image.

   La traduction concrète

   Une diapositive qui glisse avec left doit utiliser transform: translateX(). Un agrandissement doit passer par scale(). Un fondu est déjà optimal. La différence de performance est parfois d'un ordre de grandeur, et le gain d'accessibilité suit : ces transformations transform-only s'animent aussi selon la préférence de mouvement réduit, alors qu'un déplacement par left est plus difficile à neutraliser.

   Le respect de la préférence de mouvement réduit

   La règle prefers-reduced-motion désactive ces animations pour les utilisateurs qui l'ont demandé — cette préférence existe parce que les animations provoquent des nausées et des vertiges réels chez certaines personnes. C'est le même correctif qui sert la performance, l'accessibilité et le confort.

   Les composants instables, exclus du calcul

   Un composant instable par nature — un carrousel, une barre de progression animée, un composant tiers — peut être explicitement exclu du calcul du CLS. L'attribut content-visibility ou la propriété dédiée permettent de le déclarer. C'est un outil légitime pour les éléments qui ne peuvent pas être stabilisés, à condition de ne pas l'utiliser pour masquer une instabilité évitable.