La méthode CLS permet d'évaluer dans quelle mesure le contenu d'une page web se déplace ou bouge tout au long du cycle de rendu de la page, ou, en d'autres termes, de mesurer la stabilité de l'aspect visuel du site web.
Il vous est probablement arrivé à plusieurs reprises dans votre vie de constater à quel point il est frustrant de pouvoir cliquer sur un élément d'un menu et de cliquer accidentellement sur une publicité, qui vous amène ensuite sur un site Web tiers, et à quel point il est frustrant de voir le contenu de la page Web se déplacer au milieu d'une interaction. Bien sûr, les changements de mise en page sont aussi une gêne pour les utilisateurs. Cependant, ils sont également capables de causer des problèmes plus importants pour les éditeurs web, notamment des taux de rebond élevés et des violations de leurs politiques publicitaires en raison de clics accidentels dus à des décalages de mise en page.
En outre, comme Google considère que le NSI est l'un des trois "Core Web Vitals", un score faible pour le NSI peut avoir une incidence négative sur le score global des "Core Web Vitals", l'utilisateur recevant alors une mauvaise note. Dans le cadre des récents changements apportés à l'algorithme de recherche de Google, les sites qui obtiennent une note satisfaisante à l'évaluation des indicateurs Web de base 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 globale de l'utilisateur, l'amélioration potentielle du classement dans Google et l'augmentation du trafic organique dans Google.
Comment mesure-t-on le décalage cumulatif de la mise en page ?
Lorsqu'un élément visible dans la fenêtre d'affichage change de position de départ pour une raison quelconque, ce changement est enregistré. Par conséquent, il sera considéré comme instable s'il change sa position de départ. Il est important de noter qu'il n'est possible de créer un décalage de mise en page que si un élément visible se déplace à un endroit différent de la page en raison d'un événement sur cette page, et non si un nouvel élément ou un élément existant grandit ou rétrécit.
Un score CLS se compose de deux mesures spécifiques conçues pour suivre les changements de disposition : 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 façon dont les éléments instables affectent la fenêtre entre deux images en combinant l'élément d'origine et le décalage dans un rapport qui peut ê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 à laquelle cet élément s'est déplacé dans la fenêtre (horizontalement ou verticalement).
Comment pouvez-vous améliorer votre score CLS ?
Pour réduire les éléments instables/le comportement de décalage, voici quelques recommandations :
- Des pages web différentes peuvent recevoir des scores CLS différents selon la structure de votre site. Par exemple, les scores CLS des pages d'articles peuvent être plus élevés que 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 primaires 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 rapports d'aspect définis.
- Il est également possible d'utiliser des cases de rapport d'aspect CSS pour réserver l'espace nécessaire aux éléments. Pendant le processus de chargement, cela permet de s'assurer 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 disposition si les placements ne sont pas optimisés de manière appropriée.
- 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 sera modifiée.
Accélérez les performances de WordPress avec nos services d'optimisation de site!
