CLS (Cumulative Layout Shift) mesure à quel point la mise en page change de manière inattendue lorsque les utilisateurs consultent votre page Web. Un changement de mise en page, ou un changement de contenu, se produit chaque fois que quelque chose sur la page change visiblement de position dans le cadre. les images se chargent lentement et les pop-ups modifient le contenu de votre page. Voici un exemple :
Pourquoi le CLS est-il important ?
tout à coup, de nouveaux éléments tels que des bannières publicitaires apparaissent, poussant le contenu que vous essayez de lire. Frustrant, n’est-ce pas ? C’est explique en partie pourquoi CLS est l’un des signaux d’expérience de page globale de Google. Aux côtés des deux autres Core Web Vitals : First Input Delay (FID) et Largest Contentful Paint (LCP). Le fait d’avoir plusieurs changements de contenu sur une page entraînera un mauvais score CLS. Une expérience de page idéale est une page avec un CLS minimal. Et de mauvaises performances pour Core Web Vitals peuvent affecter vos performances dans les classements Google.
Définir un bon ou un mauvais CLS
Google définit officiellement les scores CLS dans les plages suivantes :
- « Bon » CLS : inférieur à 0,10
- CLS « à améliorer » : entre 0,10 et 0,25
- CLS « médiocre » : supérieur à 0,25
Comment vérifier Google CLS
« EnsuiteConfigurez un projet dans l’outil et exécutez votre premier crawl « Cela ouvrira le rapport de performance Core Web Vitals pour votre site Web. Faites défiler vers le bas et vous verrez vos données CLS. Et des recommandations d’améliorations.
Qu’est-ce qui cause un mauvais CLS ?
Plusieurs choses peuvent provoquer des changements de mise en page. Les coupables les plus courants sont les suivants :
- Images sans dimensions
- Annonces, intégrations et iframes sans dimensions
- Contenu injecté dynamiquement
- Polices Web provoquant FOIT/FOUT (flash de texte invisible et flash de texte sans style)
Toutes ces causes résident dans le code de votre page. Et il est facile de les identifier en seulement quelques minutes d’inspection.
Comment inspecter les changements de disposition
« Cela générera un rapport de performance Lighthouse pour votre site Web Cela ouvrira l’onglet « Performance ». Parcourez la piste « Expérience » ou la notation des changements de disposition (LS) dans la piste « Web Vitals » pour savoir quand les changements se sont produits.
Comment corriger et éviter les changements de mise en page
Votre développeur peut optimiser votre CLS de plusieurs manières. Voici quelques conseils pour vous aider à démarrer :
Surveiller le CLS avec Semrush
L’outil d’audit de site de Semrush vous permet de suivre vos performances pour Google CLS. Avec les autres Core Web Vitals. L’outil enregistrera même vos données historiques dans le rapport spécial Core Web Vitals. Cela vous permet d’inspecter vos Core Web Vitals, d’apporter des modifications, puis de relancer l’audit pour voir comment vos scores se sont améliorés. Vous trouverez également un rapport complet sur les performances avec plus d’informations sur la façon d’améliorer la vitesse de chargement globale des pages de votre site Web, ainsi que d’autres conseils d’optimisation.