Vous ouvrez un site, vous voulez cliquer sur un bouton et, au dernier moment, tout se décale parce qu’une publicité ou une image se charge au-dessus. Résultat : vous avez cliqué sur autre chose par erreur. Agaçant. C’est exactement ce problème que Google mesure avec le CLS : Cumulative Layout Shift.
Quelles valeurs de CLS sont bonnes ?
- Moins de 0,1 : bien. La page reste stable pendant le chargement.
- 0,1 à 0,25 : moyen. Les visiteurs le remarquent.
- Plus de 0,25 : mauvais. Agaçant, et Google pénalise votre positionnement.
Qu’est-ce qui provoque un CLS élevé ?
- Images sans dimensions : si votre HTML n’indique pas la taille d’une image, le navigateur laisse un espace vide et ne le remplit qu’une fois l’image chargée. Tout ce qui se trouve en dessous descend alors d’un coup.
- Publicités chargées après coup : fréquent sur les sites d’actualité, souvent le principal coupable.
- Polices chargées plus tard : le texte s’affiche d’abord dans une police système, puis bascule vers votre propre police. Si la taille diffère, le texte se décale.
- Vidéos ou iframes intégrées sans taille fixe
Que peut faire votre développeur web ?
Actions concrètes :
- Toujours indiquer
widthetheightpour les images et les iframes - Réserver l’espace des publicités avec une hauteur de conteneur fixe
- Utiliser
font-display: swapavec une bonne police de secours - Charger le contenu de la zone visible (above the fold) en premier et sans interruption
Pourquoi est-ce un facteur de classement ?
Google compte le CLS parmi les « Core Web Vitals ». Depuis 2021, il entre officiellement dans le classement. Entre deux sites au contenu identique, celui qui a un CLS de 0,05 l’emporte sur celui qui a un CLS de 0,4.