La méthode CLS est utilisée pour mesurer le degré de décalage ou de déplacement du contenu de la page Web tout au long du cycle de vie du cycle de rendu de la page ou, en d'autres termes, pour mesurer la stabilité de l'apparence visuelle du site Web.
Il y a probablement de nombreuses fois dans votre vie où vous avez pu constater à quel point il est frustrant de pouvoir cliquer sur un élément dans un menu et de cliquer accidentellement sur une publicité, qui vous amène ensuite à un site Web tiers, et combien il est frustrant lorsque le contenu de la page Web change au milieu d'une interaction. Bien entendu, les changements de disposition sont également une nuisance pour les utilisateurs. Cependant, ils sont également capables de causer des problèmes plus importants aux éditeurs Web, notamment des taux de rebond élevés et des violations de leurs politiques publicitaires dues à des clics accidentels dus à des changements de mise en page.
De plus, étant donné que Google considère CLS comme l'un des trois « Core Web Vitals », un faible score CLS peut affecter négativement le score global de Core Web Vitals, ce qui entraîne l'obtention d'une note d'échec pour l'utilisateur. Dans le cadre des récents changements apportés à l'algorithme de recherche de Google, les sites qui reçoivent une note de passage à l'évaluation de base de Web Vitals sont mieux classés dans les résultats de recherche.
Il existe une corrélation directe entre l'amélioration du score CLS, l'amélioration de l'expérience utilisateur globale, l'amélioration potentielle du classement Google et l'augmentation du trafic organique de Google.
Comment le changement de mise en page cumulatif est-il mesuré ?
Lorsqu'un élément visible dans la fenêtre décale sa position de départ pour une raison quelconque, ce décalage sera enregistré. Par conséquent, il serait considéré comme instable s’il changeait de position de départ. Il est important de noter qu'il n'est possible de créer un changement de mise en page que si un élément visible se déplace vers un autre endroit sur la page en raison de quelque chose qui se passe sur cette page, et non si un nouvel élément ou un élément existant s'agrandit ou se rétrécit.
Un score CLS se compose de deux mesures spécifiques conçues pour suivre les changements de configuration : les fractions d’impact et les fractions de distance. Ces deux mesures sont utilisées pour déterminer le score CLS. La fraction d'impact mesure la manière dont les éléments instables affectent la fenêtre d'affichage entre deux images en combinant l'élément d'origine et le décalage sous forme d'un rapport pouvant être comparé à la zone visible totale de la fenêtre entre les deux images. Dans le cas d'un élément instable qui se déplace horizontalement ou verticalement, la fraction de distance représente la distance parcourue par cet élément dans la fenêtre (horizontalement ou verticalement).
Comment pouvez-vous améliorer votre score CLS ?
Pour réduire les éléments instables/comportements de changement, voici quelques recommandations :
- Différentes pages Web peuvent recevoir d'autres scores CLS en fonction de la structure de votre site. Par exemple, les scores CLS des pages d’articles peuvent être supérieurs à ceux de la page d’accueil. Par conséquent, la première étape consiste à mesurer les scores CLS de tous les modèles de pages principaux de votre site.
- Les images et les vidéos doivent toujours avoir des attributs de largeur et de hauteur. Créez des images réactives avec des proportions définies.
- Alternativement, des boîtes de proportions CSS peuvent être utilisées pour réserver l'espace nécessaire aux éléments. Pendant le processus de chargement, cela garantit que le navigateur alloue la quantité d'espace appropriée dans le document.
- La diffusion d'annonces peut contribuer de manière significative au changement de mise en page si les emplacements ne sont pas correctement optimisés.
- N'injectez pas de contenu dynamique au-dessus du contenu déjà chargé, sauf en réponse aux interactions de l'utilisateur, auquel cas la mise en page changera.
Accélérez les performances de WordPress avec nos services d'optimisation de site !
