En quelques mois, le principal site d'actualités britannique a réussi à améliorer son CLS au 75e percentile de 250 %, passant de 0,25 à 0,1.
Le défi de la stabilité visuelle
Les changements de mise en page peuvent être très perturbateurs. Chez Telegraph Media Group (TMG), la stabilité visuelle est particulièrement importante, car les lecteurs utilisent principalement nos applications pour lire les actualités. Si la mise en page change pendant la lecture d'un article, le lecteur risque de perdre sa place. Cela peut être une expérience frustrante et distrayante.
D'un point de vue technique, il peut être difficile de s'assurer que les pages ne bougent pas et n'interrompent pas le lecteur, en particulier lorsque des zones de votre application sont chargées de manière asynchrone et ajoutées à la page de manière dynamique.
Chez TMG, plusieurs équipes contribuent au code côté client:
- Ingénierie de base. Implémentation de solutions tierces pour alimenter des domaines tels que les recommandations de contenu et les commentaires.
- Marketing. Exécuter des tests A/B pour évaluer l'interaction de nos lecteurs avec les nouvelles fonctionnalités ou modifications
- Publicité. Gérer les demandes d'annonces et les enchères préalables
- Rédaction Intégration de code dans des articles tels que des tweets ou des vidéos, ainsi que dans des widgets personnalisés (par exemple, un outil de suivi des cas de coronavirus).
Il peut être difficile de s'assurer que chacune de ces équipes ne provoque pas de chocs dans la mise en page de la page. En utilisant la métrique Déplacement de mise en page cumulé pour mesurer la fréquence à laquelle cela se produit pour nos lecteurs, les équipes ont obtenu plus d'informations sur l'expérience utilisateur réelle et un objectif clair à atteindre. Le CLS du 75e percentile est ainsi passé de 0,25 à 0,1, et le bucket de réussite est passé de 57% à 72%.
250%
Amélioration du CLS au 75e centile
15 %
Plus d'utilisateurs avec un bon score CLS
Nos débuts
Grâce aux tableaux de bord CRUX, nous avons pu établir que nos pages étaient déplacées plus que nous le souhaitions.
Nous souhaitions idéalement qu'au moins 75% de nos lecteurs aient une "bonne" expérience. Nous avons donc commencé à identifier les causes de l'instabilité de la mise en page.
Comment nous avons mesuré les changements de mise en page
Nous avons utilisé une combinaison de Chrome DevTools et de WebPageTest pour identifier l'origine du décalage de la mise en page. Dans DevTools, nous avons utilisé la section "Expérience" de l'onglet Performances pour mettre en évidence les instances individuelles de changement de mise en page et leur contribution au score global.
WebPageTest met en évidence l'endroit où le changement de mise en page se produit dans la vue chronologique lorsque l'option "Mettre en surbrillance les changements de mise en page" est sélectionnée.
Après avoir examiné chaque décalage dans nos modèles les plus consultés, nous avons établi une liste d'idées pour les améliorer.
Réduire les décalages de mise en page
Nous nous sommes concentrés sur quatre domaines dans lesquels nous pouvions réduire les décalages de mise en page : - les annonces - les images - les en-têtes - les éléments intégrés
Annonces
Les annonces sont chargées après la peinture initiale via JavaScript. La hauteur n'était pas réservée pour certains des conteneurs dans lesquels ils ont été chargés.
Bien que nous ne connaissions pas la hauteur exacte, nous pouvons réserver de l'espace en utilisant la taille d'annonce la plus courante chargée dans l'espace publicitaire.
Dans certains cas, nous avons mal évalué la hauteur moyenne de l'annonce. Pour les lecteurs de tablette, l'emplacement se réduisait.
Nous avons revu la fente et ajusté la hauteur pour utiliser la taille la plus courante.
Images
De nombreuses images du site Web sont chargées de manière différée et leur espace est réservé.
Cependant, aucune zone n'était réservée dans le conteneur pour les images intégrées en haut des articles, et aucun attribut de largeur et de hauteur n'était associé aux balises. Cela entraînait un décalage de la mise en page lors du chargement.
L'ajout simple des attributs de largeur et de hauteur aux images a permis d'éviter tout décalage de la mise en page.
En-tête
L'en-tête se trouvait sous le contenu dans le balisage et était positionné en haut à l'aide du CSS. L'idée initiale était de donner la priorité au chargement du contenu avant la navigation. Toutefois, cela a entraîné un décalage momentané de la page.
En déplaçant l'en-tête en haut du balisage, la page s'affiche sans ce décalage.
Intégrations
Certains des éléments intégrés fréquemment utilisés ont un format défini. (par exemple, des vidéos YouTube) ; Pendant le chargement du lecteur, nous extrayons la miniature de YouTube et l'utilisons comme espace réservé pendant le chargement de la vidéo.
Mesurer l'impact
Nous avons pu mesurer l'impact au niveau des fonctionnalités assez facilement à l'aide des outils mentionnés au début de l'article. Cependant, nous souhaitions mesurer le CLS au niveau du modèle et du site. De manière synthétique, nous avons utilisé SpeedCurve pour valider les modifications en préproduction et en production.
Nous pouvons ensuite valider les résultats dans nos données RUM (fournies par mPulse) une fois que le code est passé en production.
Vérifier les données RUM nous permet d'avoir un bon niveau de confiance quant à l'impact positif des modifications que nous apportons sur nos lecteurs.
Les chiffres finaux que nous avons examinés concernent les données RUM collectées par Google. Cela est particulièrement pertinent maintenant, car ils auront bientôt un impact sur le classement des pages. Pour commencer, nous avons utilisé le rapport sur l'expérience utilisateur Chrome, à la fois dans les données mensuelles au niveau de l'origine disponibles via le tableau de bord CrUX, et en interrogeant BigQuery pour récupérer les données historiques de p75. De cette façon, nous avons pu constater facilement que pour tout le trafic mesuré par CrUX, notre CLS au 75e percentile est passé de 0,25 à 0,1, soit une amélioration de 250 %, et que notre bucket de réussite est passé de 57% à 72%.
De plus, nous avons pu utiliser l'API Chrome UX Report et créer des tableaux de bord internes divisés en modèles.
Éviter les régressions CLS
Un aspect important de l'amélioration des performances consiste à éviter les régressions. Nous avons configuré des budgets de performances de base pour nos métriques clés et y avons inclus le CLS.
Si le test dépasse le budget, un message est envoyé à un canal Slack afin que nous puissions déterminer la cause. Nous avons également configuré des rapports hebdomadaires afin que, même si les modèles restent dans le budget, nous soyons informés de toute modification ayant un impact négatif.
Nous prévoyons également d'étendre nos budgets pour utiliser les données RUM ainsi que les données synthétiques, en utilisant mPulse pour définir à la fois des alertes statiques et potentiellement une détection d'anomalies, ce qui nous avertirait de toute modification inhabituelle.
Il est important que nous abordions les nouvelles fonctionnalités en gardant à l'esprit le CLS. De nombreuses modifications que j'ai mentionnées sont celles que nous avons dû corriger après leur publication auprès de nos lecteurs. La stabilité de la mise en page sera prise en compte dans la conception de la solution de toute nouvelle fonctionnalité à l'avenir afin d'éviter tout décalage de mise en page inattendu dès le départ.
Conclusion
Les améliorations que nous avons apportées jusqu'à présent étaient assez faciles à implémenter et ont eu un impact significatif. De nombreuses modifications que j'ai décrites dans cet article n'ont pas pris beaucoup de temps à être implémentées et ont été appliquées à tous les modèles les plus couramment utilisés. Elles ont donc eu un impact positif généralisé pour nos lecteurs.
Il reste encore des aspects du site à améliorer. Nous étudions comment exécuter davantage de logique côté client côté serveur, ce qui améliorera encore la CLS. Nous continuerons de suivre et de surveiller nos métriques afin de les améliorer en permanence et de fournir à nos lecteurs la meilleure expérience utilisateur possible.