Les Core Web Vitals sont les 3 KPI mis en avant par Google pour évaluer la qualité de l’expérience utilisateur.
Une étude de la firme de Mountain View montre que lorsque les Core Web Vitals sont bons, les internautes sont 24% moins susceptibles de quitter une page web avant la fin du chargement.
Vous vous êtes certainement donné du mal pour attirer des clients, alors chouchoutez-les avec une expérience utilisateur qui leur donne envie d’aller au bout du tunnel de conversion grâce à des pages rapides !
Pour améliorer les Core Web Vitals, la première étape consiste à les tester. Avec quels outils ? Comment savoir s’ils sont bons, et quelles sont les techniques pour les optimiser ? Quel est le lien avec le score PageSpeed ? On répond à toutes ces questions, suivez le guide.
Core Web Vitals, score Google PageSpeed : comprendre les KPI de Google
Si la vitesse de chargement a un impact indiscutable sur la qualité de l’expérience utilisateur, voyons ce qu’il en est concrètement pour le référencement.
Les Core Web Vitals ont-ils un impact sur le référencement ?
Les Core Web Vitals permettent d’évaluer 3 aspects de l’expérience utilisateur :
- la vitesse d’affichage de l’élément le plus important en termes de taille, avec le Largest Contentful Paint (LCP) qui doit se produire dans les 2,5 secondes qui suivent le début du chargement de la page ;
- l’interactivité avec le First Input Delay (FID), soit le moment où une page peut répondre pour la première fois aux interactions d’un utilisateur, et qui doit être inférieur à 100 ms ;
- la stabilité visuelle des pages à l’aide du score Cumulative Layout Shift (CLS) qui doit être inférieur à 0,1.
Ces KPI webperf font partie de l’algorithme de ranking de Google depuis Page Experience update, autrement dit, ils sont un signal pour le référencement naturel.
Plus exactement, bien que la qualité des contenus soit toujours le critère le plus important, la vitesse de chargement peut devenir un élément pour se démarquer face à des sites concurrents dont la qualité de contenu est équivalente.
Impact de la vitesse de chargement sur le classement des pages dans les résultats de recherche pour une requête concurrentielle
Outre le rôle que peuvent jouer les Core Web Vitals pour le classement sur la SERP de Google, ils comptent aussi pour 70% du calcul du score PageSpeed.
Qu’est-ce que le score PageSpeed ? C’est un score de 0 à 100 que Google attribue pour évaluer les performances web. Ce score de performance est lui-même calculé sur la base de différentes métriques webperf qui ont chacune un poids différent, dont les Core Web Vitals - auxquels s’ajoutent le Speed Index, le First Contentful Paint et le Time To Interactive ; et pour l’évaluation de l’interactivité, le FID est remplacé par le Total Blocking Time.
Bien que les Core Web Vitals comptent pour le référencement et qu’ils fassent partie du score PageSpeed, le score PageSpeed, lui, ne compte pas pour le référencement.
Maintenant que vous avez saisi le lien entre Core Web Vitals et score PageSpeed Insights, vous devez vous demander s’il y a aussi un lien avec l’un des autres outils Google pour mesurer les performances web : Lighthouse.
Quel est le lien entre Core Web Vitals, PageSpeed Insights et Lighthouse ?
Nous venons de voir que les Core Web Vitals comptent dans le calcul du score Google PageSpeed. Et Lighthouse dans tout ça ?
Pour établir son score de performance, il faut savoir que PageSpeed reprend le score Lighthouse en émulant une connexion en slow 4G. Dans les deux cas, il s’agit de mesures de performance en environnement synthétique, mais dans des conditions de test légèrement différentes, et dans tous les cas, définies par Google.
Revenons à présent aux Core Web Vitals, et détaillons une sélection d’outils de test.
Les outils pour mesurer les Core Web Vitals
Google Search Console
Vous pouvez suivre vos performances depuis l’onglet Core Web Vitals de la Search Console de Google.
L’outil récupère des données auprès d’utilisateurs réels, et constitue des groupes de pages en fonction de leurs similitudes, pour lesquelles il diagnostique les problèmes de performance :
Test des Core Web Vitals avec WebPageTest
WebPageTest est un outil de référence pour les experts webperf. Il donne de nombreuses informations, des plus basiques au plus détaillées, pour évaluer la vitesse de chargement et diagnostiquer les problèmes de performance.
Dès la page d’accueil, un menu déroulant permet de sélectionner les Core Web Vitals pour tester une URL.
En plus des scores pour chaque métrique, WebPageTest donne des précisions sur l’image LCP, permet de visualiser le chargement de la page sous forme de filmstrip ou de vidéo, et montre aussi les détails sur les temps de blocage du fil principal du navigateur pendant le chargement (comme on le voit dans l’image ci-dessous, le FID est remplacé par le TBT comme il s’agit de données relevées en environnement synthétique, et que le FID ne peut être relevé qu’avec des données réelles puisqu’il nécessite une interaction de l’utilisateur).
Test des Core Web Vitals avec les données Field data de PageSpeed Insights
Sur sa page de résultats, PageSpeed Insights affiche les Core Web Vitals pour les appareils mobiles et desktop, pour la page testée et pour le domaine (onglet Origin).
Ces données viennent de son panel Chrome User eXperience Report (CrUX), qui collecte les données de navigation d’utilisateurs réels de Chrome à travers le monde (Real User Monitoring, ou données de terrain). Un encadré mentionne les conditions de test, et dans le cas où votre site a une petite audience et ne fait pas partie du panel CrUX de Google, vous n’aurez accès qu’à une partie des données Field.
Vous remarquerez que les résultats pour les données Field data sont différentes de celles de la section suivante Lab data. Pourquoi ? Parce que les données ne sont pas relevées dans les mêmes conditions. En effet, comme nous l’évoquions un peu plus tôt, les données Field sont des données de terrain (Real User Monitoring) alors que les données Lab sont des données synthétiques.
Section Field data de la page de résultats de PageSpeed Insights de Google
Test des Core Web Vitals avec l’extension Web Vitals de Chrome
Vous pouvez également créer des rapports sur les Core Web Vitals à l'aide de l'extension Web Vitals de Chrome.
Cette extension permet de monitorer les performances de vos propres sites, les sites de vos concurrents, ou toute page web en général.
Mesurer les Core Web Vitals en JavaScript
Enfin, pour les profils plus techniques, les Core Web Vitals peuvent être mesurés en JavaScript en utilisant la bibliothèque web-vitals. Mesurer chaque métrique est aussi simple qu’un appel de fonction comme expliqué dans cet article ; et Google propose une documentation pour une utilisation complète et détaillée de l'API.
Pour suivre ces métriques directement via les API web natives, voici des précisions sur l’implémentation :
- Mesurer le LCP en JavaScript
- Mesurer le FID en JavaScript
- Mesurer le CLS en JavaScript
Après ce tour d’horizon des méthodes de test des Core Web Vitals, voyons comment analyser les résultats.
Identifiez ce qui ralentit le chargement de vos pages web
Avec Google Search Console
Depuis l’onglet Core Web Vitals de Google Search Console, sélectionnez l’un des problèmes signalés par Google dans la liste “Why URLs aren’t considered good”.
Google indique alors des exemples de pages sur lesquelles il a constaté des lenteurs, et vous pourrez alors concentrer vos efforts pour apporter les solutions adaptées.
Notez que Google fournit des données pour des groupes de pages similaires et non des pages individuelles, partant du principe que si des pages se ressemblent, elles ont des chances de présenter les mêmes problèmes. Vous pouvez toujours voir le détail des URL qui composent le groupe en cliquant sur celle prise en exemple.
Sachez que si dans un même groupe, vous remarquez de nombreuses pages pour lesquelles Google n’a pas récupéré assez de données, vous pouvez toujours tester les URL avec des outils de monitoring synthétique (section Lab Data de PageSpeed Insights, ou WebPageTest, par exemple).
Avec WebPageTest
Comme nous l’évoquions un peu plus tôt, WebPageTest est une véritable mine d’or pour décrypter vos performances.
L’outil propose différentes options pour visualiser le chargement d’une page web au format filmstrip (frame par frame), vidéo, mais aussi sous forme de waterfall.
Qu’est-ce qu’un waterfall ? C’est une vue détaillée du chargement de tous les éléments qui composent une page : images, fonts, scripts… avec des précisions sur le temps requis. Le fait que chaque ressource soit représentée par une ligne distincte permet de voir immédiatement celles qui posent problème pour la vitesse de chargement.
L’objectif : avoir le moins de lignes possible, et qu’elles soient les plus courtes et le plus à gauche possible !
Exemple de waterfall avec le temps nécessaire pour le chargement de chaque ressource.
Plus il y a de lignes, plus il y a un grand nombre de ressources à charger ; et plus les lignes de couleur sont longues, plus leur affichage est lent
Avec PageSpeed Insights
Sur la page de résultats de PageSpeed, Google délivre des conseils pour optimiser les pages testées afin de rendre leur chargement plus rapide.
Ces conseils sont très intéressants, mais attention, cela reste des bonnes pratiques générales qui ne sont pas toujours adaptées à votre contexte technique ou à vos besoins métier - et les gains estimés sont souvent beaucoup trop optimistes.
Nous vous conseillons de faire appel à des experts de la web performance avant de les appliquer, autrement vous pourriez avoir de mauvaises surprises pour votre vitesse de chargement si vous suivez ces recommandations à la lettre sans les adapter ni les articuler ensemble.
Un des grands classiques de l'optimisation contre-productive : le lazyloading sans discernement. Eh oui ! Le lazyloading est très intéressant, mais si vous lazyloadez votre image principale, vous risquez de dégrader votre LCP. Dommage, non ?
Par ailleurs, différer le chargement des scripts est une bonne pratique, mais si vous faites du test A/B, vu que ce script permet de définir le contenu de la page, vous devez prioriser son exécution.
Recommandations de Google sur la page de résultats de PageSpeed Insights pour optimiser la vitesse de chargement
Définissez un Budget performance
Une fois que vous avez mesuré vos performances, en fonction de vos priorités business et métier, définissez les KPI à améliorer, les seuls à atteindre et ceux à ne pas dépasser.
L’observation de vos concurrents est un point de repère intéressant pour vous situer, et évaluer les seuils que vous devez fixer. Chaque marché a ses contraintes, et la moyenne des scores et des indicateurs de performance peut varier fortement de l’un à l’autre. Par exemple, pour vous challenger sur les secteurs e-commerce, médias ou voyage, nous vous recommandons de consulter le classement webperf que nous éditons chaque mois avec le JDN.
Dans l’absolu, établir un Budget performance pour les Core Web Vitals est “assez simple”, Google a fixé les règles.
Mais vous pourriez aussi vous concentrer sur d’autres KPI, ou des aspects plus précis à propos de l’ensemble de vos performances. Par exemple, définir un poids des pages maximum à ne pas dépasser, un Speed Index à atteindre pour toutes vos pages, ou pour certaines catégories…
Le Budget performance vise à définir des objectifs communs pour l’ensemble des équipes, techniques, marketing, produit, design… afin d’aligner toutes les parties prenantes sur les performances à atteindre, et aussi disposer de garde-fous.
Pour revenir aux Core Web Vitals, vous avez intérêt à vous concentrer en priorité sur :
- les pages qui ont le plus d’importance pour votre business,
- celles qui enregistrent le trafic le plus élevé,
- et celles sur lesquelles la compétition est la plus forte avec vos concurrents dans les résultats de recherche de Google.
Comment identifier les optimisation webperf qui auront le plus d’impact sur les Core Web Vitals
Comme nous l’avons souligné, chaque site a ses propres enjeux business et ses contraintes techniques, c’est pourquoi les optimisations doivent être déployées intelligemment pour être efficaces.
Par exemple, un site dont le modèle économique repose sur la publicité ne peut pas se permettre de différer de façon drastique tous les scripts tiers liés à de la publicité, au risque de contrarier ses annonceurs ; et bien qu’il faille limiter le poids des pages, un site e-commerce ne peut pas non plus se passer de visuels et de fonctionnalités à valeur ajoutée pour ses utilisateurs. La webperf, c’est l’art du compromis !
Alors, pour vous aider à faire le tri et à prioriser correctement vos chantiers pour optimiser vos Core Web Vitals et votre webperf en général, voyons les principaux leviers pour chaque métrique.
Conseils pour optimiser le Largest Contentful Paint
- Compressez, redimensionnez et recadrez les images pour qu’elles s’affichent au plus vite et aux bonnes dimensions sur tous les écrans
- Préchargez les ressources importantes
- Mettez vos ressources en cache
- Utilisez un CDN
- Optimisez vos ressources - notamment les fonts, ainsi que les fichiers CSS et JavaScript pour réduire leur temps de blocage (différer les fichiers non critiques, compressez et minifiez)
Conseils pour optimiser le Cumulative Layout Shift
- Réservez un emplacement aux bonnes dimensions pour les images
- Réservez un emplacement aux bonnes dimensions pour les widgets et fonctionnalités tierces, ou tout contenu embarqué
- Prévoyez l’espace nécessaire pour vos contenus texte s’ils s’affichent en un premier temps dans une police par défaut, ou s’ils ne s’affichent pas tant que le fichier font n’est pas chargé (FOUT / FOIT)
Conseils pour optimiser le First Input Delay
- Divisez les Long Tasks (tâches qui prennent plus de 50 ms pour votre navigateur)
- Compressez, minifiez et concaténez les fichiers JavaScript
- Différez le chargement des scripts qui ne sont pas essentiels au début du chargement des pages
- Supprimez les scripts qui ne sont pas utilisés pour éviter de les charger inutilement
Testez localement les optimisations avant de passer à l’action
Avec WebPageTest ou l’outil Local Override de Chrome DevTools, testez l’impact des optimisations en local, sans modifier votre code source.
Sur des pages particulièrement lentes, c’est un bon moyen d’identifier les leviers à prioriser : par exemple, différer le chargement de scripts, optimiser les images, optimiser des CSS… avant d’appliquer les modifications.
Sur des sites comportant de nombreuses pages, comme par exemple sur des sites e-commerce, il n’est évidemment pas question de tester et optimiser les pages une à une, ce serait beaucoup trop fastidieux. En outre, comme nous l’avons vu, certaines optimisations impliquent de faire des compromis sur le plan technique ou métier.
Le paramétrage et l’articulation intelligente des optimisations webperf sont ainsi essentiels pour obtenir les meilleures performances.
Automatisez l’application des techniques d’optimisation webperf
Pour des performances optimales et stables dans la durée sans avoir besoin de maintenance, une seule solution : l’automatisation !
Cela permet de traiter instantanément toutes les pages d’un site web, pour tous les les appareils et tous les navigateurs.
Toutes les ressources - images, polices de caractères, code HTML, CSS, JavaScript… - sont optimisées, et vous n’avez plus besoin de choisir entre interface et contenus riches et vitesse de chargement.
Profitez de toutes vos fonctionnalités à valeur ajoutée sur un site qui reste réactif et qui se charge rapidement, gagnez du temps, soulagez vos équipes techniques… et enrichissez vos contenus tout en maintenant vos performances.
Vos Core Web Vitals sont ainsi toujours verts, vous répondez aux exigences de Google pour soutenir votre SEO, et vous augmentez aussi votre score PageSpeed sans efforts !
Vous vous demandez ce que Fasterize fait concrètement pour optimiser vos performances ? Découvrez-le dans cette infographie :
