Les Core Web Vitals, mesures de l’expérience utilisateur

Les Core Web Vitals, mesures de l’expérience utilisateur

Introduction

Un beau site, avec de magnifiques illustrations, des typographies modernes et des animations 3D dans tous les sens - y’a pas à dire, ça en jette.

Malheureusement, une belle interface ne fait pas tout ; voire pire : elle peut même être perturbante dans la compréhension du site et de sa navigation, et ainsi perdre l’utilisateur dans son chemin à l’action. Et donc perdre de potentielles conversions pour votre entreprise. Dommage, non ?

Heureusement, “l’UX” - pour “User Experience” est là.

Ce pan du design web se focalise sur un objectif : aider l’utilisateur lors de son parcours au travers d’un produit ou service digital, en rendant ce parcours le plus simple et efficace possible.

Mais avant de voir dans un prochain article comment concrètement améliorer l’expérience utilisateur de votre site, nous allons voir comment l’analyser dans votre site existant.

Alors comment mesurer l’expérience utilisateur de votre site ?

Google a essayé de répondre à cette question en définissant des métriques qui évaluent cette expérience utilisateur : les Core Web Vitals.

Les Core Web Vitals, c’est quoi ?

En français, ça donne les “Signaux Web Essentiels”. Concrètement, ce sont 3 indicateurs qui correspondent à 3 critères représentatifs d’une expérience utilisateur de qualité :

  1. le “Largest Contentful Paint” (LCP) qui mesure la vitesse de chargement
  2. le “Cumulative Layout Shift” (CLS) qui mesure la stabilité de la mise en page
  3. le “First Input Delay” (FID) qui mesure les interactions utilisateur

En mars 2024, la métrique “Interaction to Next Paint” (INP), viendra remplacer le FID.

Découvrons-les ensemble !

Le Largest Contenful Paint (LCP)

Le Largest Contenful Paint mesure la vitesse de chargement perçue. Plus précisément, cette métrique indique le temps écoulé entre le début de chargement d’une page et l’affichage du plus grand élément (bloc d’image ou de texte) visible dans la fenêtre d’affichage.

Une expérience utilisateur qualitative du point de vue de la valeur LCP doit être de 2,5 secondes ou moins.

Quelques conseils pour améliorer le LCP :

  • Optimiser les images : compressez les images pour qu’elles ne soient pas trop lourdes.
  • Réduire la taille du code : réduisez la taille des fichiers CSS, JavaScript et autres ressources en éliminant les espaces inutiles et en utilisant la compression.
  • Utiliser la mise en cache : configurez correctement la mise en cache pour les ressources statiques afin de réduire les temps de chargement pour les visites ultérieures.

Le Cumulative Layout Shift (CLS)

Le CLS évalue la stabilité visuelle. Elle permet de mesurer la fréquence à laquelle les utilisateurs du site rencontrent des décalages de mise en page inattendus.

Ce doit être la métrique qui doit le plus vous parler car vous avez déjà du être face à ces situations. On vous donne des exemples pour que vous puissiez les visualiser.

Vous lisez un article de blog hyper intéressant (par exemple, le notre :p) et d’un coup, le texte se déplace et vous perdez le fil. Ou alors, vous êtes sur le point d’appuyer sur le bouton “retour” de la page mais juste avant que votre doit n’atterrisse, le bouton se déplace et vous finissez par cliquer sur “ajouter au panier”.

Alors, vous vous reconnaissez ? Je parie que oui.

En plus d’être pénible pour l’utilisateur, les propriétaires du site peuvent également en pâtir puisque les visiteurs sont plus enclins à quitter la page.

Mais à quoi sont dus ces mouvements inattendus ? Ils se produisent généralement parce que les ressources des pages ne sont pas chargées en même temps.

Une expérience utilisateur qualitative du point de vue de la valeur CLS doit être de 0,1 ou moins.

Quelques conseils pour améliorer le CLS :

  • Minimiser l'impact des scripts : assurez-vous que les scripts ne bloquent pas le rendu de la page et utilisez des attributs "async" ou "defer" pour charger les scripts de manière asynchrone.
  • Optimiser le code JavaScript : évitez les opérations qui demandent trop de ressources et réduisez la complexité du code JavaScript.
  • Utiliser des workers : utilisez les “Web Workers” pour déplacer des tâches lourdes vers un fil d’exécution distinct, ce qui peut libérer le fil d’exécution principal pour répondre plus rapidement aux interactions utilisateur.

Le First Input Delay (FID)

Le FID mesure la réactivité à la charge. Cette métrique quantifie le laps de temps entre la première interaction d'un utilisateur avec une page (par exemple, un clic sur un lien, l'appui sur un bouton) et le moment où le navigateur peut débuter le traitement des gestionnaires d'événements en réaction à cette interaction.

Le but du First Input Delay est d’évaluer l'expérience éprouvée par les utilisateurs lors de leurs tentatives d'interaction avec des pages qui ne réagissent pas.

Cet indicateur est important car la vitesse de chargement et la réactivité des pages sont décisifs dans les impressions qu’ont les utilisateurs lorsqu’ils utilisent le site. En effet, un site lent et qui ne répond pas aux requêtes du visiteur peut faire fuir ce dernier. Au contraire, un site réactif et qui charge vite peut fidéliser les utilisateurs et augmenter leur satisfaction.

Une expérience utilisateur qualitative du point de vue de la valeur FID doit être de 100 ms ou moins.

Quelques conseils pour améliorer le FID :

  • Définir des dimensions pour les éléments : spécifiez les dimensions des images et des éléments multimédias pour éviter les changements de disposition inattendus.
  • Pré-allouer de l'espace : utilisez des conteneurs avec des dimensions fixes pour les éléments qui vont être chargés de manière asynchrone afin d'éviter les déplacements inattendus.
  • Éviter les publicités intrusives : évitez l'utilisation de publicités qui pourraient provoquer des changements de mise en page soudains.
  • Chargement progressif des images : utilisez la propriété "loading" pour charger progressivement les images, ce qui peut réduire les déplacements inattendus lors du chargement.

L’Interaction to Next Paint (INP)

Comme mentionné plus haut, le FID sera remplacé en mars 2024 par l’INP.

L'INP mesure également la réactivité d’une page. Il surveille la latence de toutes les interactions de l'utilisateur avec la page et rapporte une valeur singulière qui représente la limite en dessous de laquelle la plupart, voire toutes, des interactions étaient plus rapides.

La différence entre l’INP et le FID réside dans le nombre d’interactions pris en compte pour la mesure de la réactivité de la page.Le FID s’intéresse seulement à la 1ère interaction de l’utilisateur avec le site alors que l’INP prend en compte toutes les interactions au cours du cycle de vie d’une page.

En examinant toutes les interactions par échantillonnage, l’INP peut évaluer de manière complète la réactivité. L’INP apparait donc comme un indicateur de réactivité global plus fiable que le FID.

Maintenant, vous savez quelles sont les métriques désignées par les Core Web Vitals. Mais que faire de ces informations ? Pourquoi faut-il que vous les preniez en compte ?

Pourquoi les Core Web Vitals sont importants ?

D’abord parce qu’ils vous permettent de mesurer et d’ajuster votre stratégie d’expérience utilisateur pour des visites de votre site plus qualitative. Offrir une expérience de navigation rapide et fluide séduira vos utilisateurs, les fidélisera et augmentera votre taux de rétention.

Ensuite, parce que ces Core Web Vitals sont pris en compte par l’algorithme SEO de Google. Autrement dit, plus votre site est performant d’un point de vue expérience utilisateur, plus il peut remonter dans les résultats de recherche. Et ça, c’est top pour votre référencement et votre visibilité.

Les Core Web Vitals ont donc un champs d’impact bien plus large qu’on pourrait croire. Il n’agit pas que sur l’expérience utilisateur mais permet aussi des répercussions positives sur les résultats commerciaux de l’entreprise.

Les bénéfices apportés par ces Core Web Vitals sont prouvés par des cas d’études mis en avant par Google web.dev :

  • En améliorant son LCP de 31%, Vodafone Italie a réussi à augmenter ses ventes de 8%.
  • En réduisant de 77% son CLS, GEDI a vu son taux de rebond réduit de 8%.

Mesurer, surveiller les indicateurs et ajuster votre site web en fonction est donc un investissement pour votre entreprise.

Justement, comment on mesure les Core Web Vitals ?

Comment mesurer les Core Web Vitals ?

Il existe des outils pour mesurer les Core Web Vitals comme :

  • Google Search Console
  • Google PageSpeed Insights
  • Web-Vitals Javascript library

Pour une implémentation efficace de ces Core Web Vitals :

  • Priorisez : sélectionnez une page qui génère un trafic significatif et qui  présente un taux de conversion élevé pour obtenir des résultats pertinents.
  • Faites de l’A/B test : faites une version optimisée et une autre non optimisée pour comparer les bénéfices des ajustements.
  • Surveillez : mesurez et pilotez vos métriques de façon continue pour éviter des baisses de qualité.

Conclusion

En résumé, les Core Web Vitals ne sont pas seulement des indicateurs techniques, mais aussi des guides précieux pour une bonne expérience utilisateur. En effet, en optimisant ces métriques, les utilisateurs des sites webs sont davantage satisfaits et fidélisés.

Prendre en compte les Core Web Vitals, c’est améliorer la performance de votre site tout en influençant positivement votre référencement sur les moteurs de recherche.

C’est aussi un avantage important puisqu’un site avec une bonne expérience utilisateur permet l’augmentation de ses ventes.

Enfin, c’est aussi un geste pour la planète car les nombreuses techniques pour améliorer les Core Web Vitals sont en fait des pratiques d’éco-conception de site internet. En effet, l'optimisation des images ou la réduction des scripts bloquants peuvent influencent positivement les Core Web Vitals. Ainsi, intégrer des principes d'éco-conception dans le processus de développement web devient non seulement une démarche environnementale responsable, mais également une stratégie efficace pour garantir des performances web optimales et une expérience utilisateur fluide.

N'oublions pas que ces métriques ne sont pas statiques et doivent être surveillées de manière continue, avec des outils tels que Google Search Console et Google PageSpeed Insights, pour s'assurer que votre site maintient constamment des normes élevées en matière d'expérience utilisateur.

En adoptant cette approche, vous transformerez votre site web en outil business performant, engageant et en phase avec les attentes des utilisateurs modernes.

Source : Google web.dev

://LE_BLOG

://LE_BLOG