Core Web Vitals : la méthode de Google pour optimiser les performances Web

Depuis plusieurs années, Google incite les développeurs à proposer des sites web rapides, qui offrent une expérience utilisateur fluide et appréciée des internautes. Cette volonté s’est traduite par la mise à jour de Page Experience, le 16 juin 2021. Objectif : Intégrer des critères de performance web dans les algorithmes utilisés pour classer les résultats de recherche. Pour aider les développeurs à obtenir de bons scores dans la durée, Google propose des outils et une méthode claire en 3 étapes.

Étape 1 – Évaluer la santé du site et identifier les points chauds

Google note que les indicateurs Core Web Vitals (LCP, FID et CLS) sont construits à partir de données enregistrées d’utilisateurs très réels de votre site Web. Avant d’optimiser ces KPI, vous devez auditer leurs performances.

Vous pouvez obtenir un aperçu des performances de votre site avec le tableau de bord basé sur les données du rapport Chrome UX (CrUX). Affiche les indicateurs Core Web Vitals (LCP, FID, CLS), sur ordinateur et mobile, ainsi que d’autres KPI de performance (FCP, TTFB, etc.). Les données historiques sont accessibles pour visualiser l’évolution des scores.

Capture d’écran d’un rapport CrUX © Google

La Search Console propose également un inventaire des performances Web. Découvrez le nombre de pages web à améliorer, sur mobile et desktop, et identifiez les types de pages (templates) qui nécessitent une optimisation.

PageSpeed ​​​​​​Insights va encore plus loin, avec CrUX et les données de laboratoire obtenues via Lighthouse. L’outil conçu par Google est utile pour repérer et comprendre les éléments techniques qui posent problème et dégradent votre score Core Web Vitals.

Étape 2 – Déboguer et optimiser les métriques Core Web Vitals

L’audit est terminé, vous avez maintenant un aperçu de la santé de votre site, vous avez identifié les types de pages qui nécessitent votre attention.

Utilisez Lighthouse pour auditer au niveau de la page ou du modèle Utilisez l’extension Web Vitals pour en savoir plus sur Core Web Vitals en temps réel Utilisez Chrome DevTools (F12) pour tester l’impact des évolutions techniques

Google recommande de séparer les optimisations rapides, qui doivent être faites immédiatement pour des gains initiaux, de celles qui méritent un travail plus conséquent.

Avec Lighthouse, découvrez des opportunités passionnantes. L’outil peut détecter les éléments qui bloquent le chargement et dégradent les métriques Core Web Vitals. Pour chaque problème identifié, une documentation technique est fournie pour aider les développeurs à améliorer leur code.

L’extension Chrome permet de tester rapidement une page web, mais attention : l’outil effectue une analyse du bureau. Pour obtenir des données mobiles, vous devez passer en mode d’émulation mobile. L’analyse n’est pas aussi détaillée qu’avec les données CrUX.

Enfin, les outils de développement de Chrome aident les développeurs à plusieurs niveaux. L’onglet Performances affiche un graphique en cascade qui représente le chargement de votre page. Aide à identifier les problèmes et à comprendre les scores CWV. Vous pouvez tester les évolutions techniques réalisées avant de les mettre en production pour vérifier qu’elles améliorent réellement les indicateurs. De plus, il est recommandé d’activer la fonctionnalité Layout Change Regions (trouvée dans le menu de commandes, accessible avec le raccourci DevTools Ctrl + Maj + P). Vous pourrez visualiser des captures d’écran prises lors du téléchargement et identifier les éléments qui augmentent votre CLS.

Des captures d’écran aident à comprendre le CLS © BDM

Étape 3 : Surveillez vos performances et évitez les régressions

Vous avez audité votre site et procédé à des optimisations techniques pour améliorer votre score. Vous devez maintenant vous assurer qu’ils ont eu un impact et mettre en place des outils pour empêcher les régressions dans vos prochains déploiements.

Automatisez la récupération de données utilisateur réelles, concevez des tableaux de bord et configurez des alertes avec les outils CrUX (API, Big Query), l’API PSI et web-vitals.js. Utilisez Lighthouse-CI pour automatiser les tests de laboratoire et éviter les régressions dans Core Web Vitals causées par d’autres développements.

Vous pouvez envoyer les données obtenues avec le script web-vitals.js à Google Analytics pour mettre en place des rapports de performances utiles, comme ici avec l’outil open source Web Vitals Report. ©Google Chrome sur GitHub

Google note qu’après optimisation des performances, la plupart des sites Web ont connu des régressions dans les six mois. Il est important de mettre en place des outils pour éviter la dégradation des Core Web Vitals et maintenir un haut niveau de performance. Google met à disposition de nombreux outils pour suivre les indicateurs. CrUX sur Big Query propose des données mensuelles agrégées, les API CrUX et PageSpeed ​​Insights rapportent les données des 28 derniers jours, le script web-vitals.js fournit des données en temps réel. L’intégration de ce type d’outil, qui permet le suivi des performances réelles (RUM, Real User Measurement), est fortement recommandée pour maintenir de bons scores Core Web Vitals.

Vous pouvez voir les détails de la méthode Web Vitals Loop proposée par Google sur le site .dev. Pour aller plus loin, nous vous proposons la lecture de ces contenus :