L'optimisation du CLS de 0,2 a entraîné une augmentation de 15% du nombre de pages vues par session, une augmentation de 13% de la durée des sessions et une diminution de 1,72 point de pourcentage du taux de rebond.
Centre d'aide Yahoo! JAPAN est l'une des plus grandes entreprises de médias au Japon, avec plus de 79 milliards de pages vues par mois. La plate-forme d'actualités Yahoo! JAPAN News compte plus de 22 milliards de pages vues par mois et une équipe d'ingénieurs se consacre à l'amélioration de l'expérience utilisateur.
En surveillant en permanence les métriques Core Web Vitals, l'équipe a mis en corrélation l'amélioration du score CLS (Cumulative Layout Shift) avec une augmentation de 15 % du nombre de pages vues par session et de 13% de la durée des sessions.
0.2
Amélioration du CLS
15,1%
Plus de pages vues par session
13,3 %
Session plus longue
Le déplacement du contenu d'une page entraîne souvent des clics accidentels, une désorientation sur la page et, au final, une frustration pour l'utilisateur. Les utilisateurs frustrés ont tendance à ne pas rester longtemps. Pour satisfaire les utilisateurs, la mise en page doit rester stable tout au long du cycle de vie du parcours utilisateur. Pour Yahoo! JAPON Cette amélioration a eu un impact positif significatif sur les métriques d'engagement stratégiques.
Pour obtenir des détails techniques sur l'amélioration du CLS, consultez la documentation Yahoo! post de l'équipe d'ingénieurs Actualités japonaises.
Identifier le problème
Surveiller les Core Web Vitals, y compris le CLS, est essentiel pour détecter les problèmes et identifier leur origine. Chez Yahoo! JAPAN News, la Search Console proposait un excellent aperçu des groupes de pages présentant des problèmes de performances, et Lighthouse a permis d'identifier des opportunités pour chaque page afin d'améliorer l'expérience sur la page. Grâce à ces outils, ils ont découvert que la page d'informations de l'article avait un CLS faible.
Il est important de garder à l'esprit la partie cumulée du décalage de mise en page cumulatif. Le score est calculé tout au long du cycle de vie de la page. En situation réelle, le score peut inclure des variations qui se produisent à la suite d'interactions de l'utilisateur (par exemple, faire défiler une page ou appuyer sur un bouton). Pour collecter les scores CLS à partir des données de terrain, l'équipe a intégré les rapports de la bibliothèque JavaScript web-vitals.
L'équipe a utilisé les outils pour les développeurs Chrome afin d'identifier les éléments qui provoquaient des changements de mise en page sur la page. Dans les outils de développement, les régions de décalage de mise en page permettent de visualiser les éléments qui contribuent au CLS en les mettant en surbrillance à l'aide d'un rectangle bleu chaque fois qu'un décalage de mise en page se produit.
Il a découvert qu'un décalage de mise en page se produisait après le chargement de l'image héros en haut de l'article pour la première vue.
Dans l'exemple ci-dessus, lorsque le chargement de l'image est terminé, le texte est poussé vers le bas (le changement de position est indiqué par la ligne rouge).
Améliorer le CLS des images
Pour les images de taille fixe, il est possible d'éviter les décalages de mise en page en spécifiant les attributs width et height dans l'élément img et en utilisant la propriété CSS aspect-ratio disponible dans les navigateurs récents. Toutefois, Yahoo! JAPAN News devait prendre en charge non seulement les navigateurs récents, mais également ceux installés dans des systèmes d'exploitation relativement anciens tels qu'iOS 9.
Il a utilisé des zones de format, une méthode qui utilise le balisage pour réserver l'espace sur la page avant le chargement de l'image. Cette méthode nécessite de connaître à l'avance le format de l'image, qu'il a pu obtenir à partir de l'API backend.
Résultats
Le nombre d'URL présentant des performances médiocres dans la Search Console a diminué de 98% et le CLS dans les données de laboratoire est passé d'environ 0,2 à 0. Plus important encore, plusieurs améliorations corrélées des métriques commerciales ont été apportées.
Lorsque Yahoo! JAPAN News a comparé les métriques d'engagement utilisateur avant et après l'optimisation du CLS, et a constaté plusieurs améliorations:
15,1%
Plus de pages vues par session
13,3 %
Session plus longue
1,72%*
Taux de rebond moins élevé (*points de pourcentage)
En améliorant le CLS et les autres métriques Core Web Vitals, Yahoo! JAPAN News a également obtenu le libellé"Page rapide" dans le menu contextuel de Chrome pour Android.
Les décalages de mise en page sont frustrants et dissuadent les utilisateurs de lire plus de pages, mais cela peut être amélioré en utilisant les outils appropriés, en identifiant les problèmes et en appliquant les bonnes pratiques. Améliorer le CLS est l'occasion de développer votre activité.
Pour en savoir plus, consultez la documentation Yahoo! de l'équipe d'ingénieurs Yahoo! Japan.