Comment les optimisations CLS ont permis à Yahoo! JAPAN News a augmenté de 15 % le nombre de pages vues par session

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.

Tomoki Kiraku
Tomoki Kiraku

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.

Le rapport Core Web Vitals de la Google Search Console indique un CLS élevé pour la page d'informations des articles.
Rapport Core Web Vitals de la Google Search Console.
Lighthouse évite d'avoir un audit de décalage de mise en page important montrant les éléments DOm qui contribuent le plus au CLS sur la page.
L'audit Lighthouse "Éviter les décalages de mise en page importants" indique les éléments qui contribuent au score CLS et dans quelle mesure.

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.

Page "Détails de l'article" avec des rectangles bleus superposés sur l'image du héros et le texte
Décalages de mise en page visualisés.

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.

Captures d'écran de la page d'informations de l'article montrant une comparaison côte à côte avant et après le décalage de mise en page.
Décalage de mise en page sur la page d'informations de l'article.

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.

Captures d'écran de la page d'informations de l'article montrant une comparaison côte à côte avant et après l'optimisation CLS.
Gauche: espace vide réservé pour l'image en haut de la page ; droite: image héros chargée dans l'espace réservé sans décalage de mise en page.

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.

Rapport de la Search Console montrant une baisse significative du nombre de pages présentant des problèmes de performances.
Search Console après les améliorations

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.

Libellé de page rapide dans Chrome sur Android.
Libellé "Page rapide" dans Chrome sur 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.