Créé à l’initiative de Google, Core Web Vitals permet d’optimiser la vitesse de chargement et l’expérience utilisateur (UX) sur tous les sites. Il ne s’agit pas du premier projet du géant de Mountain View pour atteindre ces objectifs. En effet, il s’agit du dernier-né d’une longue liste de technologies mises en place au cours de ces dernières années (Mobile-Friendly Test, PageSpeed Insights, Lighthouse, Chrome UX Report, le format AMP, le site web.dev).
En 2020, pendant l’annonce officielle de Core Web Vitals, Google a reconnu qu’il a planché sur plusieurs paramètres. Les solutions présentées ne permettaient pas aux néophytes de déceler rapidement les problèmes d’UX et d’optimisation de performance WPO (Web Front-End Optimization). Ainsi, ils ne parviennent pas à trouver les solutions. C’est pour cette raison que le Core Web Vitals a été créé. Il s’agit d’un sous-ensemble d’éléments vitaux d’une page web ou d’un site internet.
Google souhaite intégrer des critères de performance web dans les algorithmes pour faciliter le classement des résultats de recherche. Les développeurs pourront obtenir de meilleurs scores sur le long terme grâce aux outils proposés et à une méthode simple à 3 étapes.
Première étape : évaluation de la santé du site et identification des points critiques
Les indicateurs Core Web Vitals permettent de vérifier les performances du site : Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS) ont été fabriqués sur la base de données collectées auprès d’internautes réels qui utilisent votre site. Mais avant l’optimisation des KPI, il faut faire un audit de performances :
– Évaluez la santé du site en utilisant le tableau de bord crUX ;
– Identifiez les pages qu’il faut améliorer avec la Search Console ;
-Réalisez une analyse approfondie des pages bien définies en recourant au PageSpeed Insights.
Consultez le dashboard qui se trouve sur les données du Chrome UX Report (CrUX) pour voir l’état des lieux des performances de votre site internet. Vous y verrez les indicateurs Core Web Vitals (LCP, FID, CLS) et d’autres KPI de performance (TTFB, FCP, etc.). Vous pouvez également visualiser des données archivées pour connaitre l’évolution des scores.
Deuxième étape : éliminez les bugs et améliorez les indicateurs Core Web Vitals
Une fois que vous avez achevé l’audit et que vous avez une vision générale de l’état de santé de votre site internet, vous connaissez désormais les pages web sur lesquelles vous devez travailler. Si vous souhaitez réaliser un audit sur une page ou un template, utilisez Lighthouse. Avec l’extension Web Vitals, vous pouvez découvrir les Core Web Vitals en temps réel. Testez l’impact des évolutions techniques avec le Chrome DevTools. Les développeurs peuvent utiliser les outils de développement de Chrome pour déceler les éventuels problèmes et comprendre les scores CWV. Il est possible de lancer des tests pour suivre les évolutions techniques et de vérifier si les indicateurs se sont bien améliorés.
Troisième étape : surveillance des performances pour ne pas régresser
Après l’audit du site et les optimisations techniques pour obtenir de meilleurs scores, vous devez recourir à des outils pour éviter les régressions. Utilisez les outils CrUX (API, Big Query, Web-vitals.js, API PSI) pour automatiser la collecte de données auprès des utilisateurs réels.
Vous pouvez également concevoir des tableaux de bord et paramétrer des alertes. Avec Lighthouse-CI, vous pouvez automatiser les tests en laboratoire afin d’éviter les régressions sur les Core Web Vitals lorsque d’autres développements sont réalisés.
L’outil open source Web Vitals Report vous permet d’obtenir des rapports de performances que vous pouvez aussi mettre en place en envoyant les données collectées avec le script web-vitals.js vers Google Analytics.
Vous êtes à la recherche d’un développeur web pour l’optimisation des performances de votre site internet ? Contactez-moi