Cumulative Layout Shift (CLS)
À quel point les éléments de la page bougent pendant le chargement.
Définition
Le CLS mesure à quel point les éléments de la page bougent pendant le chargement. Vous commencez à lire, une image finit de charger, et le texte se décale sous vos yeux. Le seuil publié par Google sur web.dev est de 0,1.
Comment le décalage est-il calculé ?
Il combine la surface qui bouge et la distance parcourue.
Un petit élément qui se déplace beaucoup, ou un grand qui se déplace un peu, produisent tous deux un décalage. Seuls les mouvements non provoqués par le visiteur comptent : un menu qui s’ouvre après un clic n’est pas pénalisé, ce qui est logique puisque le lecteur s’y attend.
La mesure court pendant toute la visite, pas seulement au chargement. Un contenu injecté après plusieurs secondes compte aussi.
Le raccourci à éviter. Corriger le CLS uniquement sur ordinateur. Les décalages les plus lourds se produisent sur mobile, où l’écran est étroit : une image ou une bannière y occupe une part de surface bien plus grande, donc pèse davantage.
D’où viennent les décalages ?
Cinq causes couvrent presque tous les cas.
| Cause | Correction |
|---|---|
| Image sans largeur ni hauteur | déclarer les dimensions, le navigateur réserve la place |
| Publicité ou encart injecté | réserver un emplacement de taille fixe |
| Police web qui remplace la police de repli | choisir un repli de métriques proches |
| Bannière de consentement | la superposer plutôt que l’insérer dans le flux |
| Contenu chargé après coup | prévoir sa place avant qu’il n’arrive |
Le cas particulier de WordPress
WordPress déclare les dimensions des images qu’il gère lui-même.
Une image insérée par l’éditeur reçoit sa largeur et sa hauteur automatiquement. Les décalages viennent donc surtout d’ailleurs : images posées par un constructeur de page, éléments ajoutés par une extension, ou blocs injectés par un script tiers.
Questions fréquentes
Un score de 0 est-il atteignable ?
Oui, et c’est fréquent sur un site vitrine sans publicité ni contenu injecté. Le seuil de 0,1 laisse d’ailleurs de la marge pour des cas légitimes.
Le chargement différé provoque-t-il du décalage ?
Seulement si l’image n’a pas de dimensions déclarées. Avec ses dimensions, la place est réservée avant même que l’image n’arrive, et le report du chargement n’a aucun effet sur le CLS.
Pourquoi mon score varie-t-il d’une mesure à l’autre ?
Parce que le décalage dépend de l’ordre d’arrivée des ressources, qui change avec la connexion. C’est une raison de plus de se fier aux données relevées sur les visites réelles plutôt qu’à une mesure ponctuelle.
Sources
Et sur votre site ?
Une définition ne dit pas si vous êtes concerné.
L'audit gratuit répond dans votre cas : état technique, temps de chargement, et ce que Google voit réellement de vos pages. Un constat écrit, sans engagement et sans jargon.