Performance
CLS (Cumulative Layout Shift), c'est quoi ?
Le CLS (Cumulative Layout Shift) mesure combien les éléments d'une page se déplacent visuellement pendant son chargement. Un score sous 0,1 est bon selon Google. Au-delà, vos visiteurs cliquent au mauvais endroit ou perdent leur place de lecture.
Le CLS est l'un des trois Core Web Vitals de Google. Il calcule la somme de tous les déplacements visuels inattendus sur une page pendant qu'elle charge. Typiquement : une publicité qui s'insère et pousse le texte vers le bas, une image qui apparaît et décale un bouton, ou une police qui se charge et modifie la mise en page. Plus le score est proche de zéro, plus la page est stable.
L'analogie simple
Imaginez que vous lisez un article dans un journal et que quelqu'un glisse soudainement une publicité en pleine page entre deux paragraphes, faisant sauter tout le texte vers le bas. Vous perdez votre endroit. Ou pire, vous étiez sur le point de cliquer sur un bouton, mais il a bougé juste avant et vous avez cliqué sur autre chose. C'est exactement ce que mesure le CLS : combien de fois votre page joue ce mauvais tour à vos visiteurs.
Pourquoi Google s'en préoccupe
Google a intégré le CLS comme signal de classement pour une raison précise : les pages instables ruinent l'expérience utilisateur. Un visiteur qui rate son clic ou qui perd sa place de lecture part frustré, sans revenir. Google collecte ces données en temps réel via Chrome et pénalise les sites dont le CLS dépasse 0,1. Les sites e-commerce sont particulièrement touchés, car un mauvais CLS peut faire cliquer les utilisateurs sur un mauvais produit ou déclencher un achat non voulu.
Ce que ça change pour votre site
Un CLS supérieur à 0,25 (catégorie médiocre) est fréquent sur les sites avec des publicités, des cookies banners mal positionnés, ou des images sans dimensions définies. Ce type de page génère un taux de rebond 22 pour cent plus élevé en moyenne. Pour un artisan ou une PME qui reçoit des demandes de contact par son site, chaque visiteur qui part à cause d'un décalage visuel est un devis potentiel perdu.
Sur mes sites
Comment Guillaume Creation le garantit
Sur mes sites
inférieur à 0,02 sur tous les projets
Moyenne française
plus de 50 pour cent des sites français dépassent le seuil de 0,1
Source : CrUX / web.dev rapport terrain
Questions fréquentes
Comment voir si mon site a un problème de CLS ?
Testez votre site sur pagespeed.web.dev. La section Core Web Vitals vous donne le score CLS avec une couleur (vert, orange ou rouge) et des captures d'écran des éléments qui bougent sur votre page.
Le bandeau de cookies peut-il dégrader mon CLS ?
Oui, si votre bandeau cookies apparaît après le chargement de la page et pousse le contenu principal vers le bas, il génère du CLS. La solution est de réserver l'espace du bandeau dès le début du chargement, ou de l'afficher en overlay fixe sans déplacer le reste du contenu.
Est-ce que les images de mon site influencent le CLS ?
Directement. Une image sans dimensions width et height définies dans le code HTML se charge sans que le navigateur sache combien d'espace lui réserver. Elle s'insère d'un coup et pousse tout le contenu suivant. Déclarer les dimensions de toutes les images est l'une des corrections CLS les plus efficaces.
Pour les curieux : le détail technique
Le score CLS est calculé comme la somme des scores d'instabilité pour chaque déplacement inattendu. Chaque déplacement est évalué selon sa taille (fraction de la fenêtre d'affichage concernée) multipliée par la distance de déplacement. Seuils : bon sous 0,1, à améliorer entre 0,1 et 0,25, mauvais au-delà de 0,25. Causes principales : images sans attributs width/height, publicités ou iframes sans espace réservé, contenu injecté dynamiquement au-dessus du contenu existant, polices web avec FOUT (Flash of Unstyled Text).
Sources de référence
Termes liés
Performance
Core Web Vitals, c'est quoi ?
Les Core Web Vitals sont trois indicateurs de vitesse et de confort que Google mesure sur chaque site. Si vous êtes dans le rouge, vous perdez des places dans les résultats Google.
Performance
LCP (Largest Contentful Paint), c'est quoi ?
Le LCP (Largest Contentful Paint) mesure le temps que met le plus grand élément visible d'une page à s'afficher. Google considère qu'un LCP sous 2,5 secondes est bon. Au-delà, la page est pénalisée dans les résultats de recherche.
Performance
INP (Interaction to Next Paint), c'est quoi ?
L'INP (Interaction to Next Paint) mesure le délai entre une action d'un visiteur (clic, frappe au clavier, tap) et la réaction visible à l'écran. Google considère qu'un INP sous 200 millisecondes est bon. Au-delà, le site paraît lent et peu réactif.
Performance
Score Lighthouse, c'est quoi ?
Lighthouse est l'outil gratuit de Google qui donne une note sur 100 à n'importe quel site web. C'est le contrôle technique de votre site.
Ce standard est garanti sur mes sites.
Les trois offres Essentiel, Business et Signature garantissent les standards techniques du top 3 pour cent et top 1 pour cent des sites français. Rien n'est en option.