Changement de mise en page cumulatif (CLS)

Écrit par : avatar de l'auteur Komal Bothra
avatar de l'auteur Komal Bothra
Hé, je m'appelle Komal. J'écris du contenu qui parle avec le cœur et qui fait que WordPress fonctionne pour vous. Donnons vie à vos idées !
CLS-05-à l'échelle-1

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 !

Le poids de la page est la taille totale du fichier d'une page Web. Cela inclut tous les

Pour comprendre la surveillance d'un navigateur réel, il est essentiel de comprendre ce qu'est un navigateur. Un navigateur

Lorsque les utilisateurs visitent un site Web, leur navigateur envoie une requête au serveur du site Web. Le

Commencez avec Seahawk

Inscrivez-vous sur notre application pour consulter nos tarifs et bénéficier de réductions.