CLS (Cumulative Layout Shift)

Le Cumulative Layout Shift (CLS) est l'un des trois Core Web Vitals qui mesure la stabilité visuelle d'une page web. Il quantifie l'ampleur et la fréquence des déplacements inattendus d'éléments de mise en page (textes, images, boutons) qui se produisent pendant le chargement de la page, sans action de l'utilisateur. Un CLS élevé crée une expérience frustrante où l'internaute clique sur un lien qui se déplace au dernier moment, déclenchant une action non souhaitée.

Le score CLS est calculé comme la somme des scores d'impact (fraction de la fenêtre affectée × distance de déplacement) de chaque décalage de mise en page inattendu. Un score inférieur à 0,1 est "Bon", entre 0,1 et 0,25 il est "À améliorer", au-delà de 0,25 il est "Mauvais". Les causes typiques d'un CLS élevé sont : images et vidéos sans dimensions explicites (width/height), contenu injecté dynamiquement au-dessus du contenu existant (publicités, bandeaux), polices web causant un FOUT/FOIT, et animations de mise en page CSS non optimisées.

Les solutions pour réduire le CLS sont relativement directes : toujours spécifier les attributs width et height sur les balises img et video, réserver de l'espace pour les publicités via des blocs min-height, utiliser font-display: optional ou swap pour les polices web, éviter l'injection de contenu au-dessus du fold, et préférer les animations CSS transform/opacity (qui ne déclenchent pas de reflow) aux animations modifiant la mise en page.