Comment le score est calculé
Chaque décalage reçoit un score égal à la fraction d'impact multipliée par la fraction de distance. La fraction d'impact correspond à la surface de la fenêtre occupée par les éléments instables, avant et après leur déplacement. La fraction de distance correspond au plus grand déplacement divisé par la plus grande dimension de la fenêtre.
Les décalages sont regroupés en fenêtres de session : une rafale de décalages espacés de moins d'une seconde, d'une durée totale de 5 secondes maximum. Le CLS d'une page est le score de la pire fenêtre de la visite.
Les décalages qui ne comptent pas
Un décalage qui survient dans les 500 millisecondes suivant un clic, un appui ou une frappe est considéré comme attendu et exclu du calcul : ouvrir un menu en accordéon ne pénalise pas la page. Le défilement et le zoom ne comptent pas comme des interactions. Enfin, les animations réalisées avec la propriété CSS transform ne provoquent pas de décalage de mise en page.
Les causes les plus fréquentes
- Images et iframes sans largeur ni hauteur déclarées.
- Emplacements publicitaires ou vidéos intégrées sans espace réservé.
- Bandeau de cookies ou barre promotionnelle inséré en haut de page, qui pousse le contenu vers le bas.
- Police web qui remplace la police de secours avec des dimensions différentes.
- Contenu injecté au-dessus d'un contenu déjà affiché, comme des avis chargés après coup.
Corriger le CLS
Déclarez systématiquement les dimensions des images ou un ratio d'aspect en CSS, réservez une hauteur minimale aux zones publicitaires et aux widgets, affichez les bandeaux en surimpression fixe plutôt qu'en insertion dans la page, ajustez les métriques de la police de secours pour qu'elle occupe la même place que la police finale, et animez les éléments avec transform plutôt qu'en modifiant leur position.
Pour reproduire le problème, simulez une connexion mobile lente dans les outils de développement de Chrome : le panneau Performance surligne chaque décalage et l'élément qui a bougé.