Test Cumulative Layout Shift (CLS)
Le test Cumulative Layout Shift de SEOptimer affiche le CLS de votre page par rapport aux seuils de Google, en utilisant les propres données de terrain de Google provenant de visiteurs réels.
Auditez n’importe quel site en quelques secondes
+ Des outils SEO / GEO complets pour chaque fonctionnalité
Effectuez plus de 100 vérifications sur votre site concernant le SEO on-page, l’utilisabilité, les performances, les réseaux sociaux et les liens. Désormais avec le GEO dans chaque rapport. SEOptimer propose également la recherche de mots-clés, le suivi du classement, l’analyse des backlinks et un crawler complet du site.
À propos du Cumulative Layout Shift
Qu’est-ce que le Cumulative Layout Shift ?
Le Cumulative Layout Shift mesure les déplacements de la page pendant son chargement. Chaque fois qu’un élément visible change brusquement de position sans que le visiteur en soit à l’origine, ce déplacement est comptabilisé, et les scores s’accumulent.
C’est la métrique dont le symptôme est le plus familier : vous essayez d’appuyer sur un lien, mais appuyez sur autre chose parce qu’une publicité ou une image s’est chargée au-dessus et a décalé la page vers le bas.
Contrairement aux deux autres, elle ne se mesure pas en temps. Il s’agit d’un ratio qui décrit la proportion de l’écran qui s’est déplacée et l’ampleur du déplacement, ce qui explique pourquoi les valeurs sont faibles et pourquoi un score de 0,1 représente déjà un déplacement visible.
Qu’est-ce qu’un bon CLS ?
Google considère qu’une valeur inférieure ou égale à 0,1 est bonne, qu’une valeur comprise entre 0,1 et 0,25 nécessite une amélioration, et que toute valeur supérieure à 0,25 est mauvaise, au 75e percentile des chargements réels de pages.
Les décalages qu’un visiteur provoque lui-même ne sont pas comptabilisés. Ouvrir un accordéon ou fermer une bannière déplace légitimement la page, et seuls les déplacements survenant dans la demi-seconde suivant une interaction sont exemptés, ce qui correspond approximativement à la période pendant laquelle une personne attribue le déplacement à sa propre action.
C’est généralement le plus facile à obtenir des trois. Alors que le LCP et l’INP nécessitent des optimisations des performances, la plupart des décalages de mise en page sont corrigés en réservant de l’espace, ce qui consiste à modifier le balisage plutôt que l’architecture.
Causes habituelles des décalages de mise en page
- Les images et les vidéos sans attributs de largeur et de hauteur, de sorte qu’aucun espace n’est réservé avant leur chargement.
- Publicités et contenus intégrés insérés dans un conteneur dont la taille n’était pas définie.
- Polices web qui se chargent avec une taille différente de celle de la police de remplacement et provoquent une redistribution du texte.
- Bannières, avis et bandeaux de cookies injectés au-dessus du contenu existant.
- Contenu inséré par un script après le rendu initial de la page.
Le point commun à tous ces cas est le suivant : un élément arrive tardivement et occupe un espace qui n’avait pas été réservé. Tout ce qui se trouve en dessous est repoussé vers le bas, et l’élément que le visiteur s’apprêtait à toucher se déplace.
Comment l’améliorer
- Définissez une largeur et une hauteur pour chaque image et vidéo afin que le navigateur réserve l’espace nécessaire.
- Donnez aux emplacements publicitaires et aux contenus intégrés une taille minimale fixe, même lorsqu’ils sont vides.
- Préchargez les polices principales et faites correspondre les métriques de secours afin que leur remplacement ne provoque pas de réorganisation de la page.
- Insérez les bannières et les notifications sous le contenu existant, ou superposez-les plutôt que de le repousser.
- Réservez de l’espace pour tout élément qu’un script ajoutera ultérieurement.
- Surveillez ce point sur mobile, où une colonne étroite transforme un léger décalage en un déplacement important.
Ce que cet outil vérifie
Le test CLS lit les données de terrain de Google pour la page — des mesures recueillies auprès de visiteurs réels utilisant Chrome — et indique où elle se situe par rapport aux seuils ci-dessus.
Si aucun résultat ne s’affiche, la page ne reçoit pas suffisamment de trafic pour que Google fournisse des données. En attendant, le décalage de mise en page est le seul indicateur que vous pouvez vérifier de manière fiable manuellement : chargez la page sur un téléphone, avec une connexion lente, et observez les éléments qui se déplacent.
Pour les deux autres métriques, ou pour les trois ensemble, utilisez les Test des Core Web Vitals.
Pour aller plus loin
La plupart des décalages de mise en page sont dus aux images et aux ressources chargées tardivement. Vérifiez les optimisation des images de la page, son poids avec le contrôle taille du fichier de la page web, et son comportement sur un téléphone avec le test responsive sur mobile.
Boîte à outils SEO complète avec plus de 55 outils
Vérifiez les titres, les méta-descriptions, les en-têtes, les données structurées Schema, les Core Web Vitals, le SSL et le fichier robots.txt. Générez des balises méta, des sitemaps et des règles .htaccess, minifiez vos fichiers CSS, JS et HTML, et rédigez du contenu grâce à nos outils de rédaction IA — instantanément et gratuitement.
Lectures complémentaires
Voir plus
Core Web Vitals : Comment sont-ils cruciaux pour le référencement ?
Vous devez optimiser vos pages Web pour offrir une expérience utilisateur sans faille. Mais comment pouvez-vous mesurer la qualité de l'expé...
SEOptimer's Core Web Vitals Checks
What are Core Web Vitals?
Google launched the Core Web Vitals (CWV) initiative in 2020 - "essential metrics for a healthy site". T...
Page Speed : ce que c’est et comment elle influe sur le SEO
Définition
Le terme « Page Speed » fait référence au temps que prend le téléchargement de votre contenu multimédia ou de votre page Web d...
Webpage Size - Why is it important? And how do you optimize it?
What is Webpage Size?
The term webpage size in the SEO world refers to the downloaded file size of a given web page.
The...