Core Web Vitals : Changement de mise en page cumulatif - Qu'est-ce que c'est et comment l'améliorer pour le référencement

Avec la mise à jour de Google Page Experience maintenant déployée, les sites Web qui sont affinés ont de nouvelles opportunités de classement.

En particulier, les sites Web peuvent bénéficier d'une amélioration du classement sur la base de plusieurs nouvelles mesures de performance que Google appelle «les éléments vitaux du Web de base».

Les éléments vitaux Web de base sont un ensemble de fonctionnalités de page Web de base qui ont un impact sur l'expérience utilisateur. Ils jouent désormais un rôle dans le référencement stratégique et peuvent avoir un impact sur le classement des sites Web dans Google.

Google a défini trois éléments vitaux principaux pour le Web :

• La plus grande peinture de contenu (LCP)
• Premier délai d'entrée (FID)
• Décalage de mise en page cumulé (CLS)

Cet article fait partie de notre série sur la mise à jour de l'expérience de page de Google, et je le mets à jour pour refléter les dernières modifications de Google. Ici, je vais discuter du changement de disposition cumulatif, ou CLS :

• Qu'est-ce que le CLS ?
• Comment mesurer le CLS ?
• Quel est l'impact de CLS sur le référencement ?
• Comment puis-je améliorer mon score CLS ?

Qu'est-ce que le décalage de mise en page cumulé (CLS) ?

CLS mesure les changements de formatage d'une page Web après le rendu initial dans un navigateur, généralement par l'insertion dynamique de contenu au-dessus de ce qui est déjà affiché.

Il est généralement ennuyeux de cliquer sur un lien et de faire « bouger » ce lien, ce qui entraîne un clic vers un emplacement inattendu. Ce type d'instabilité du contenu d'une page Web crée une mauvaise expérience utilisateur.

Google discute de CLS ici :

Le changement de mise en page cumulé (CLS) est une mesure importante et centrée sur l'utilisateur pour mesurer la stabilité visuelle, car il permet de quantifier la fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus. Un CLS faible permet de garantir que la page est agréable.

Des changements de mise en page inattendus nuisent à l'expérience utilisateur. Un exemple est lorsqu'un bouton ou un lien se déplace sur la page Web, ce qui amène une personne à cliquer sur autre chose. Cela peut être très grave si cela signifie qu'ils ont accidentellement effectué un achat, comme vous pouvez le voir dans cette démo de Google :

Il est important de noter que Google précise que tous les changements de mise en page ne sont pas considérés comme mauvais :

Un changement de mise en page n'est mauvais que si l'utilisateur ne s'y attend pas. D'un autre côté, les changements de mise en page qui se produisent en réponse aux interactions de l'utilisateur (cliquer sur un lien, appuyer sur un bouton, taper dans un champ de recherche, etc.) sont généralement corrects, tant que le changement se produit suffisamment près de l'interaction pour que la relation soit clair pour l'utilisateur.

Les changements de disposition qui se produisent dans les 500 millisecondes suivant l'entrée de l'utilisateur auront l'indicateur hadRecentInput défini, de sorte qu'ils peuvent être exclus des calculs.

Comment le décalage de mise en page cumulé (CLS) est-il mesuré ?

Le CLS est mesuré par le total de tous les scores de changement de mise en page individuels pour chaque changement de mise en page inattendu qui se produit pendant la pire "fenêtre de session" d'une page vue.

Une fenêtre de session est une période de 5 secondes de décalages qui se produisent pendant qu'un utilisateur visite une page. Google recherche l'intervalle de 5 secondes qui a le plus de pénalités de décalage, et c'est le score pour cette page vue.

Pour calculer un score de changement de mise en page, Google multiplie la fraction d'impact et la fraction de distance . Je vais les décomposer.

La fraction d'impact est la quantité de zone de fenêtre occupée par un élément instable entre deux images.

Dans l'exemple ci-dessous, vous pouvez voir que l'élément occupe 50 % de la fenêtre d'origine, mais est ensuite déplacé vers le bas de 25 %. Entre les deux images, l'élément occupe 50 % plus 25 % de la fenêtre d'affichage, ce qui entraîne une fraction d'impact de 75 %.

Exemple de décalage de mise en page entre deux cadres, Google Developers

La fraction de distance est la distance parcourue par un élément instable. L'exemple ci-dessous montre que l'élément s'est déplacé de 25 % de la hauteur de la fenêtre.

Exemple de décalage de distance dans la fenêtre d'affichage, Google Developers

Donc, pour résumer : le CLS est mesuré par le score de changement de mise en page, qui est calculé de cette façon :

Fraction d'impact * fraction de distance = score de changement de disposition

En prenant les exemples ci-dessus, le calcul ressemblerait à ceci : 0,75 * 0,25 = 0,1875. Google indique qu'une page Web doit conserver un CLS inférieur à 0,1 sur toutes les pages ou pages vues de votre site. Cet exemple serait au-dessus de cet objectif, donc il marquerait mal.

Une illustration pour vous donner une idée plus claire de la façon dont CLS est noté : si tout ce qui se trouvait à l'intérieur de la fenêtre d'affichage se déplaçait hors de la fenêtre d'affichage dans une seule image, cela aurait un score de mise en page de 1,0. (Voir d'autres exemples sur GitHub.)

Plus vous avez d'éléments sur votre page qui se déplacent dans la fenêtre d'affichage, plus votre score pourrait être mauvais.

Objectif de score CLS de Google

Vous pouvez en savoir plus sur le score de changement de mise en page ici et sur la façon dont Google définit ses seuils ici.

Quel est l'impact du Cumulative Layout Shift (CLS) sur le référencement ?

Comme pour les autres éléments essentiels du Web, CLS aide à garantir que l'expérience de la page est fluide pour vos visiteurs, à la fois sur mobile et sur ordinateur.

Un bon score de changement de mise en page peut aider à garantir que les utilisateurs ne soient pas frustrés par votre page Web, ne cliquent pas accidentellement et ne soient pas redirigés vers une autre page, et ne fassent pas un achat par erreur. Une bonne expérience utilisateur vous aide à atteindre tous les résultats que nous aimons voir dans le référencement : classements, trafic, conversions et revenus.

Selon les recherches de Screaming Frog, les URL en position 1 des résultats de recherche avaient 10 % plus de chances de réussir l'évaluation des éléments vitaux Web de base que les URL en position 9. Bien entendu, ces données reflétaient des pages existantes, qui n'avaient peut-être pas été ajustées pour se conformer aux éléments vitaux du Web de base - avant que ces facteurs ne s'appliquent aux algorithmes de classement.

En ce qui concerne le CLS, moins de la moitié (46 %) des URL mobiles et moins de la moitié (47 %) des URL de bureau avaient de « bons » scores CLS. Le score CLS moyen était de 0,29 sur mobile et de 0,25 sur ordinateur. En d'autres termes, il y a place à l'amélioration du CLS sur la plupart des sites .

Screaming Frog a segmenté les taux de réussite par position et a constaté une baisse du pourcentage de «bonnes» URL à mesure que vous descendez dans les positions sur la page des résultats de recherche. L'exemple suivant concerne les résultats mobiles, mais ils ont également représenté graphiquement les données pour le bureau.

"Combien de sites réussissent l'évaluation Core Web Vitals ?", shoutingfrog.co.uk

Comment puis-je améliorer mon score Cumulative Layout Shift (CLS) ?

Google propose des outils de laboratoire et des outils de terrain pour vous aider à mesurer, puis à optimiser, votre score CLS. Pour CLS, les outils de laboratoire peuvent ne pas être aussi utiles que les données réelles capturées dans la nature pour vos pages Web.

Les outils fournis incluent :

• Rapport d'expérience utilisateur Chrome (champ)
• PageSpeed ​​Insights (laboratoire et terrain)
• Search Console (rapport Core Web Vitals) (champ)
• Outils de développement Chrome (laboratoire)
• Phare (laboratoire)
• WebPageTest (laboratoire)
• WaterFaller.dev (laboratoire)

Une autre façon de mesurer le CLS utilise la bibliothèque JavaScript web-vitals. Vous pouvez en savoir plus à ce sujet ici.

Les causes courantes des changements de mise en page incluent :

• Images sans dimensions
• Annonces, vidéo et autres objets intégrés ou iframes sans dimensions
• Contenu injecté dynamiquement
• CSS à chargement tardif où les styles sont appliqués après le chargement d'autres éléments
• Polices Web provoquant des clignotements de texte invisible ou sans style
• Éléments de la page qui attendent que d'autres éléments soient chargés sur le réseau avant d'apparaître
• Animation d'éléments par "hauteur" et "largeur" ​​au lieu de "transform : scale()" de CSS
• Animation d'éléments par "top", "right", "bottom" ou "left" au lieu de "transform: translate()" de CSS

Les principes de base qui amélioreront CLS incluent :

1. Utilisez toujours les attributs de taille pour les images, vidéos et autres éléments intégrés ou iframes. Si un élément est chargé dynamiquement, utilisez CSS pour styliser tous les éléments du conteneur avec la même taille ou le même rapport hauteur/largeur avant le chargement du contenu. Ensuite, lorsque le contenu est chargé dans ces éléments de conteneur, la page ne se déplacera pas.
2. N'insérez jamais de contenu dynamiquement au-dessus du contenu existant.
3. Si vous utilisez CSS pour animer des éléments, préférez les animations « transformées ».

Et regardez cette vidéo sur CLS de Google Chrome Developers sur YouTube :

Vous voulez des informations plus détaillées? Regardez notre webinaire à la demande 3 conseils d'experts pour améliorer les éléments vitaux Web de base, y compris les questions et réponses étendues à la fin.

Lisez toute notre série d'expériences de page pour plus d'informations sur cette mise à jour du classement :

1. Qu'est-ce que la mise à jour de l'expérience de la page ?
2. Comment créer un site adapté aux mobiles
3. Interstitiels intrusifs et pourquoi ils sont mauvais pour le référencement
4. HTTPS pour les utilisateurs et le classement
5. Présentation de Core Web Vitals
6. Core Web Vitals : LCP (Largest Contentful Paint)
7. Core Web Vitals : FID (premier délai d'entrée)
8. Core Web Vitals : CLS (changement de mise en page cumulé)