Google a modifié la mesure Cumulative Layout Shift de Core Web Vitals

Google a apporté des modifications à la façon dont il calcule le CLS, Cumulative Layout Shift, qui est une mesure des Core Web Vitals. Fenêtre de session spécifiquement maximale avec 1 seconde d’écart, plafonnée à 5 secondes.

a modifié la mesure Cumulative Layout Shift de Core Web Vitals

Avez-vous déjà visité un site Web et étiez sur le point de cliquer sur un lien vers un article, puis ... la mise en page se déplace soudainement, une publicité apparaît, et en quelque sorte au lieu de cliquer sur l’article que vous vouliez lire, vous cliquez sur l’annonce inutile ?

Ce mouvement soudain sur la page est appelé “Layout Shift” ou changement de mise en page.

Cumulative Layout Shift (CLS) est donc une mesure Core Web Vitals calculée en résumant tous les changements de mise en page qui ne sont pas causés par l’interaction utilisateur. CLS examine la proportion du viewport qui a été touchée par les changements de disposition et la distance de déplacement des éléments qui ont été déplacés.

Il s’agit donc d'une mesure qui vérifie la stabilité visuelle de la page pendant son chargement.



Qu’est-ce qu’un bon score CLS ?


Un score CLS peut être aussi bas que 0 pour les pages entièrement statiques et augmente plus les changements de layout se produisent sur la page.

Plus votre score est bas, plus votre layout est stable. Les scores CLS officiels utilisés par les outils de performance de Google sont les suivants :

  • Bon – CLS en dessous de 0,1

  • Besoin d'amélioration – CLS entre 0,1 et 0,25

  • Pauvre – CLS au-dessus de 0,25


Google vous recommandait de garder votre score CLS en dessous de 0,1.

Nous avons reçu beaucoup de commentaires très utiles et après avoir terminé l’analyse à grande échelle, nous avons finalisé le changement que nous prévoyons d’apporter à la mesure: fenêtre de session maximale avec 1 seconde d’écart, plafonné à 5 secondes.


Google a déclaré qu’il a décidé d’aller de l’avant avec les fenêtres plus petites, plafonnées, maximum.

Cela peut avoir un impact sur vos scores CLS dans les Core Web Vitals. Voici un peu à quoi cela ressemble :
 

Cela peut avoir un impact sur vos scores CLS dans les principaux Core Web Vitals



Pourquoi 5 secondes ?


Google dit avoir évalué plusieurs tailles de fenêtres et trouvé deux choses :

  • Pour les fenêtres réduites, des chargements de page plus lents et des réponses plus lentes aux interactions utilisateur pourraient briser les changements de Layouts Shift en plusieurs fenêtres et améliorer le score.

    Nous voulions garder la fenêtre assez grande pour qu’elle ne récompense pas les ralentissements !

  • Il y a quelques pages avec un flux continu de petits changements de layouts shift. Par exemple, une page de score sportif qui se déplace un peu à chaque mise à jour de score.

    Ces changements sont ennuyeux, mais ils ne deviennent pas plus ennuyeux au fur et à mesure que le temps passe. Nous voulions donc nous assurer que la fenêtre était plafonnée pour ce type de changements de layout.


Avec ces deux choses à l’esprit, en comparant une variété de tailles de fenêtres sur de nombreuses pages Web du monde réel, Google dit avoir conclu que 5 secondes serait une bonne limite à la taille de la fenêtre.


Comment cela affecte-t-il le score CLS de ma page ?


Google déclare dans son post :

Étant donné que cette mise à jour plafonne le CLS d’une page, aucune page n’aura un score pire à la suite de ce changement. Et d’après notre analyse, 55% des origines ne verront pas du tout de changement dans le CLS au 75e percentile.

C’est parce que leurs pages n’ont actuellement pas de layout shifts ou décalages de mise en page ou les layouts qu’ils ont sont déjà confinés à une seule fenêtre de session.

Le reste des origines verra des scores améliorés au 75e percentile avec ce changement. La plupart ne verra qu’une légère amélioration, mais environ 3% verront leurs scores s’améliorer, qu’il s'agisse de « besoins d’amélioration » ou d’un score « médiocre » ou d’un score « bon ».

Ces pages ont tendance à utiliser des défileurs infinis ou ont de nombreux layouts lents de l’interface utilisateur, comme décrit dans notre post précédent.


Google dit qu’il mettra bientôt à jour ses outils pour utiliser la nouvelle définition métrique !

D’ici là, vous pouvez essayer la version mise à jour de CLS sur n’importe quel site en utilisant l’exemple JavaScript des implémentations ou la fourche de l’extension Web Vitals.