Core Web Vitals : la méthode de Google pour optimiser ses 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 par les internautes. Cette volonté s’est traduite par la mise à jour Page Experience, le 16 juin 2021. Objectif : intégrer des critères de performance web au sein des algorithmes permettant de classer les résultats de recherche. Pour aider les développeurs à obtenir de bons scores sur 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 critiques

Google rappelle que les indicateurs Core Web Vitals (LCP, FID et CLS) sont construits à partir de données enregistrées auprès d’utilisateurs bien réels de votre site internet. Avant d’optimiser ces KPI, vous devez réaliser un audit de ses performances.

• Utilisez le tableau de bord CrUX pour évaluer la santé de votre site
• Utilisez la Search Console pour identifier les pages qui requiert de l’attention
• Utilisez PageSpeed Insights pour approfondir votre analyse des pages spécifiques

Vous pouvez obtenir un état des lieux des performances de votre site grâce au dashboard basé sur les données du Chrome UX Report (CrUX). Il affiche les indicateurs Core Web Vitals (LCP, FID, CLS), sur desktop et mobile, ainsi que d’autres KPI de performance (FCP, TTFB…). Des données historiques sont accessibles pour visualiser l’évolution des scores.

La Search Console propose également un état des lieux des performances web. Découvrez le nombre de pages web à améliorer, sur mobile et sur desktop, et identifiez les types de pages (templates) qui requièrent des optimisations.

PageSpeed Insights permet d’aller plus loin, grâce aux données CrUX et 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ébuguer et optimiser les indicateurs Core Web Vitals

L’audit est terminé, vous avez désormais une vue globale de l’état de santé de votre site, vous avez repéré les types de pages qui requièrent votre attention.

• Utilisez Lighthouse pour réaliser un audit au niveau d’une page ou d’un template
• Utilisez l’extension Web Vitals pour connaître les Core Web Vitals en temps réel
• Utilisez les Chrome DevTools (F12) pour tester l’impact des évolutions techniques

Google recommande de séparer les optimisations rapides, à réaliser immédiatement pour obtenir de premiers gains, de celles qui méritent des travaux plus conséquents.

Avec Lighthouse, vous découvrez des opportunités intéressantes. L’outil est en mesure de repérer les éléments qui bloquent le chargement et dégradent les indicateurs Core Web Vitals. Pour chaque problème repéré, une documentation technique est proposée pour aider les développeurs à améliorer leur code.

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

Enfin, les outils de développement de Chrome aident les développeurs à plusieurs niveaux. L’onglet Performance permet d’afficher un graphique en cascade représentant le chargement de votre page. Il 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 afin de vérifier qu’elles permettent bien d’améliorer les indicateurs. Aussi, il est conseillé d’activer la fonctionnalité Layout Shift Regions (à rechercher depuis le menu de commande, accessible avec le raccourci DevTools Ctrl+Shift+P). Vous pourrez ainsi afficher des captures d’écran réalisées lors du chargement et repérer les éléments qui incrémentent votre CLS.

Étape 3 : surveiller ses performances et éviter les régressions

Vous avez audité votre site et réalisé des optimisations techniques afin d’améliorer votre score. Désormais, vous devez vous assurer qu’elles ont eu un impact et mettre en place des outils pour éviter les régressions lors de vos prochains déploiements.

• Automatisez l’obtention de données issues d’utilisateurs réels, concevez des tableaux de bords et paramétrez des alertes grâce aux outils CrUX (API, Big Query), l’API PSI et web-vitals.js.
• Utilisez Ligthouse-CI pour automatiser les tests en laboratoire et prévenir les régressions sur les Core Web Vitals causées par d’autres développements.

Google remarque qu’après avoir optimisé leurs performances, la plupart des sites web ont connu des régressions dans les six mois suivants. Il est important de mettre en place des outils pour éviter la dégradation des Core Web Vitals et conserver un haut niveau de performance. De nombreux outils sont mis à disposition par Google pour surveiller les indicateurs. CrUX on Big Query propose des données mensuelles agrégées, les API CrUX et PageSpeed Insights remontent les données des 28 derniers jours, le script web-vitals.js permet d’obtenir des données en temps réel. L’intégration de ce type d’outil, permettant le monitoring des performances réelles (RUM, Real User Measurement), est fortement recommandée pour garder de bons scores Core Web Vitals.

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

• La sélection des meilleurs outils pour améliorer sa performance web
• 8 étapes pour optimiser le temps de chargement de son site web
• Mise à jour Lighthouse 8.0 : quel impact sur votre score de performance web ?