Core Web Vitals : 6 méthodes de mesure à partir des données CrUX de Google

6 techniques pour extraire les Core Web Vitals directement à partir des données CrUX de Google, qui vont vous aider à optimiser votre vitesse de chargement et soutenir votre stratégie de référencement.

Vous allez pouvoir analyser les métriques que Google a intégrées à son algorithme pour évaluer la qualité de l’expérience utilisateur :

Largest Contentful Paint (LCP) pour la vitesse d’affichage,
Cumulative Layout Shift (CLS) pour la stabilité visuelle,
First Input Delay (FID) pour l’interactivité.

Depuis l'annonce de la mise à jour Page Experience et son déploiement mobile en 2021, puis desktop en février 2022, les liens entre le SEO et la webperf se sont encore un peu plus resserrés. Nombreux sont les professionnels du SEO qui se sont penchés de plus près sur la question de la vitesse de chargement, les moyens de la mesurer et de l’optimiser.

D'un point de vue business, l'expérience utilisateur doit être optimale sur tous les navigateurs et types d’appareils, afin que les clients aillent au bout du tunnel d’achat au lieu d’abandonner leur panier ou d’aller chez un concurrent.

Pour le référencement, il n’est pas seulement question de qualifier l’expérience utilisateur sur le site, il s’agit aussi de comprendre comment Google évalue les Core Web Vitals, et comment accéder à ces données.

Comprendre comment Google observe un site, et connaître les critères les plus importants pour ses robots, permet de prioriser les corrections à apporter sur ses pages web.

Alors, faisons le point sur :

les données utilisées par Google pour mesurer les Core Web Vitals,
les sources disponibles pour extraire ces données et leurs limites,
les meilleures sources à des fins de référencement,
les techniques pour accéder à ces sources de données, avec des exemples.

Quelles sont les données utilisées par Google pour mesurer les Core Web Vitals ?

D'après les informations fournies par Google, les données collectées dans le rapport sur l'expérience utilisateur de Chrome (CrUX) sont utilisées pour mesurer les Core Web Vitals pour le Search. Google l'a annoncé à plusieurs reprises, notamment lors de la session "Core Web Vitals & SEO" de John Mueller au Chrome Dev Summit en 2020, et plus récemment celle de Web Vitals AMA à Google I/O 2021.

John Mueller - Chrome Dev Summit 2020 - sur l'extraction des données Field et Lab

Le rapport sur l'expérience des utilisateurs de Chrome (CrUX) rassemble des informations sur les performances de pages web visitées par de véritables utilisateurs de Chrome répondant à des critères spécifiques.

Ainsi, pour replacer les choses dans leur contexte, les mesures Core Web Vitals du point de vue de Google portent uniquement sur un sous-ensemble segmenté de l'ensemble de votre base d'utilisateurs.

Exemple de répartition des utilisateurs par navigateurs pour un site web,
avec 45% des utilisateurs de Safari, 25% de Chrome,
15% de Chrome qui sont inclus dans le CrUX et 10% de Firefox.

Bien entendu, nous ne pouvons pas savoir quel pourcentage d'utilisateurs de Chrome fait partie du rapport CrUX pour un site web donné, car cette donnée n'est pas divulguée par Google. L'importance de ce sous-ensemble dépend entièrement de vos utilisateurs réels.

Idéalement, vous devriez suivre les Core Web Vitals sur votre site pour tous les utilisateurs avec un outil tiers, ou en utilisant la package Javascript fourni par Google. Néanmoins, les données CrUX restent la meilleure source de données accessibles publiquement.

Quelles sont les sources disponibles pour extraire les Core Web Vitals de la base de données CrUX ?

Sachant que le moteur de recherche de Google utilise les données CrUX, l'étape suivante consiste à comprendre comment mettre la main sur ces données.

Il existe 6 méthodes pour extraire et mesurer les Core Web Vitals avec CrUX, directement depuis Google :

l’API CrUX
l’API PageSpeed Insights
le tableau de bord CrUX Data Studio
l’outil PageSpeed Insights
Le projet CrUX BigQuery
Google Search Console

Les méthodes de mesure des Core Web Vital à partir des données Field

Chacune de ces méthodes a ses avantages et ses inconvénients. Voici une liste comparative pour vous aider à choisir la meilleure en fonction du type d'analyse que vous souhaitez faire en termes de SEO.

Pour chaque technique, les critères suivants sont observés :

Extraction d'URL : est-il possible d’extraire les données Core Web Vitals pour une URL spécifique (si disponible) ?
Domaine/Origine : est-il possible d’extraire les données Core Web Vitals d'un domaine spécifique (si disponible) ?
Appareils : est-il possible de trier les données par mobile, desktop ou tablette ?
Connexion réseau : est-il possible de trier les données en fonction de la vitesse du réseau des utilisateurs ?
Données récentes : est-il possible d’obtenir les données disponibles les plus récentes (les 28 derniers jours à partir du jour de l'extraction) ?
Données historiques : est-il possible d’accéder aux données des mois / années précédents ?
Gratuit : est-il possible d’accéder aux données sans payer ?
Scalabilité : est-il possible d’extraire ces données facilement pour des milliers d'URLs ou de domaines ?
Accès à l'interface utilisateur : cette source de données dispose-t-elle d'une interface facile à utiliser ?

Classement des méthodes d’extraction de données CrUX en fonction des besoins SEO

Comparatif des méthodes de monitoring des Core Web Vitals de Google en fonction des besoins SEO

L’API CrUX

L'API CrUX est l’une des plus faciles d’accès et la plus complète pour extraire les Core Web Vitals de CrUX. Elle est intuitive, simple d’utilisation et contient toutes les informations nécessaires pour comprendre, collecter les données Core Web Vitals, et monitorer les problèmes de performance sur un site web.

Points forts de l’API CrUX

Les données au niveau de l'URL et de l'origine sont accessibles via l'API lorsqu'elles sont disponibles ;
vous pouvez trier les données selon les trois appareils (mobile, desktop et tablette) ;
les informations sur la connexion réseau sont disponibles, vous pouvez extraire des données pour les réseaux 4G, 3G, 2G, slow-2G et hors ligne ;
vous pouvez extraire les données disponibles les plus récentes, c'est-à-dire la moyenne des données collectées sur les 28 jours précédents à partir du dernier jour complet. C'est (en théorie) ce que Google Search utilise pour évaluer les Core Web Vitals d'un site web ;
l’outil est entièrement gratuit et facilement évolutif. La seule limite est celle du nombre de requêtes par minute, qui est de 150. Néanmoins, le temps de réponse est très rapide par rapport à d'autres APIs, comme celle de PageSpeed Insights.

Points faibles de l’API CrUX

Il n’y a pas d'accès aux données historiques, vous pouvez seulement accéder à la collecte de données sur les 28 jours précédents. Mais, il est possible de contourner ce problème en stockant les données quotidiennement pour un accès ultérieur ;
il n'y a pas d'interface utilisateur facilement accessible pour l'API.

Comment accéder aux données des Core Web Vitals avec l’API CrUX ?

Lorsqu’il est question d’utilisation d’API pour extraire des données, JavaScript, et plus précisément Node.js, est une option très intéressante. Voici quelques exemples (si vous ne savez pas comment l'exécuter, voici comment installer Node.js avant de mettre en pratique ces exemples).

// Créez un fichier index.js, collez le code ci-dessous et exécutez `npm install axios` dans votre terminal
/* Modules */
const axios = exiger ('axios');
/* Variables de script */
const apiKey = 'YOUR-API-KEY-HERE' // Obtenez votre clé ici https://developers.google.com/web/tools/chrome-user-experience-report/api/guides/getting-started#APIKey
const cruxEndpoint = `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${apiKey}` ;
// Fonction personnalisée pour appeler l'API CruX
const getApiData = async (type, URL) => {
  // Créer le corps de la requête
  demande const = {}
  demande[type] = URL
  // Envoyer une requête API
  const { données } = attendre axios(cruxEndpoint, {
    méthode : 'POST',
    en-têtes : {
      'Type de contenu' : `application/json`,
    },
    données : JSON.stringify(req)
  });
  renvoyer des données
}
// Exécuter le script (IIFE) - Changer 'type' & 'URL'
(asynchrone () => {
  const testOrigin = attendre getApiData('origine', 'https://builtvisible.com')
  const testURL = attendre getApiData('url', 'https://builtvisible.com')
  console.log(testOrigin, testURL);
})()

L’API PageSpeed Insights

L'API PageSpeed Insights est une autre option pour extraire des données Field de CrUX.

Elle donne des informations très pertinentes, mais il manque toutefois quelques données par rapport à l'API CrUX, et qui pourraient être utiles lors du diagnostic des problèmes de performance liés aux Core Web Vitals.

Points forts de l’API PageSpeed Insights

Les données au niveau de l'URL et de l'origine sont accessibles via l'API lorsqu'elles sont disponibles ;
vous pouvez trier les données selon mobile et desktop ;
comme pour l'API CrUX, vous pouvez extraire les données les plus récentes, à savoir la moyenne des données collectées sur les 28 jours précédents à partir du dernier jour complet ;
l'utilisation est entièrement gratuite et facilement évolutive. Le quota est limité à 240 demandes par minute et à 25 000 par jour ;
vous pouvez accéder à cette API via une interface facile à utiliser avec l'outil PageSpeed Insights de Google (bien qu'il ne soit pas aussi évolutif).

Points faibles de l’API PageSpeed Insights

Vous ne pouvez pas segmenter les données pour les utilisateurs de tablettes ;
aucune information sur les connexions réseau n'est disponible, toutes les différentes connexions sont agrégées lors de l'extraction des données Core Web Vitals ;
il n’y a pas d'accès aux données historiques, vous pouvez seulement accéder à la collecte de données sur les 28 jours précédents. Ce problème peut être résolu en stockant les données quotidiennement pour un accès ultérieur ;
ce service exécute Lighthouse en arrière-plan pour obtenir des données Lab pour les mêmes requêtes. La réponse de l'API est donc un peu plus lente que celle de l'API CrUX.

Comment accéder aux données Core Web Vitals avec l’API PageSpeed Insights ?

Voici un petit exemple de la façon dont vous pouvez extraire les données CWV de l'API PageSpeed Insights. Si vous souhaitez qu'un script plug-and-play s'exécute, vous pouvez télécharger ce référentiel à partir de Github.

// Créez un fichier index.js, collez le code ci-dessous et lancez `npm install axios` dans votre terminal
/* Modules */
const axios = require('axios') ;
/* Variables de script */
const apiKey = 'YOUR-API-KEY-HERE' // Obtenez votre clé ici https://developers.google.com/speed/docs/insights/v5/get-started#APIKey
// Fonction personnalisée pour extraire des données de l'API PageSpeed
const getApiData = async (url) => {
   const endpoint = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed' ;
   const apiResponse = await axios(`${endpoint}?url=${url}&key=${apiKey}`) ; // Créer un appel HTTP
   const urlCWV = apiResponse.data.loadingExperience ; // Extraction du champ URL
   const domainCWV = apiResponse.data.originLoadingExperience ; // Extraction des données du champ domaine
  console.log(urlCWV, domainCWV) ; // Consigne les données du champ URL et du champ domaine si elles sont disponibles
  return { urlCWV, domainCWV } ;
} ;
// Appelez votre fonction personnalisée
getApiData('https://www.searchenginejournal.com/category/seo/') ;

Le projet CrUX BigQuery

Le projet CrUX BigQuery est une énorme base de données d'enregistrements de métriques d'utilisateurs réels qui remonte à octobre 2017. Ce projet est plein d'informations très pertinentes, mais comme toutes les autres sources, il présente des avantages et des inconvénients.

Points forts du projet CrUX BigQuery

Vous pouvez accéder aux données au niveau de l'origine ;
vous pouvez trier les données selon les trois types d’appareils (mobile, desktop et tablette) ;
vous pouvez extraire des données pour tous les types de connexions réseau lorsqu'elles sont disponibles (4G, 3G, 2G, slow-2G et hors ligne) ;
vous pouvez extraire des données historiques au-delà du dernier mois disponible en remontant jusqu'à octobre 2017 ;
vous pouvez adapter ce système à autant de projets que vous le souhaitez, et les données sont très flexibles, avec la possibilité de créer vos propres tableaux personnalisés ;
certaines métriques et éléments supplémentaires sont accessibles, qui peuvent être utiles pour votre analyse, et qui ne sont pas disponibles dans les APIs CrUX ou PageSpeed Insights, comme le Time To First Byte ou la segmentation par pays.

Points faibles du projet CrUX BigQuery

Vous ne pouvez pas accéder aux données au niveau de l'URL ;
cet ensemble de données est mis à jour chaque deuxième mardi du mois pour le mois précédent. Donc, si vous souhaitez surveiller les Core Web Vitals plus régulièrement, ce n'est pas la bonne source ;
une bonne compréhension du langage SQL est nécessaire pour une analyse approfondie des données ;
le fonctionnement est payant. Même s’il existe un niveau d'utilisation gratuit sur BigQuery, vous devrez ajouter des informations de facturation dans Google Cloud Platform pour pouvoir l'utiliser, mais pour des rapports à petite ou moyenne échelle, le niveau gratuit suffira.

Comment accéder aux données du Core Web Vitals avec le projet BigQuery du CrUX ?

Si vous avez déjà un compte Google Cloud Platform, vous pouvez accéder au projet en utilisant ce lien.

Vous devrez activer l'API BigQuery pour accéder aux données directement depuis votre éditeur SQL.

Projet BigQuery - Interface de l’éditeur SQL

Vous n'avez pas besoin d'être expert en SQL, un peu de familiarité avec l’interface utilisateur sera suffisant.

Voici deux ressources qui vous aideront à donner le coup d'envoi de votre parcours d'analyse de ces données : Rick Viscomi's CrUX Cookbook et Paul Calvano's Biguery for CrUX tutorial.

Après avoir vu les différentes sources de données nécessitant quelques connaissances en programmation, nous allons voir celles qui permettent d'accéder aux données Core Web Vitals à partir du CrUX sans avoir besoin de savoir coder.

L’outil PageSpeed Insights

L'outil PageSpeed Insights de Google est une excellente alternative "sans code" pour accéder aux données CruX.

Page d’accueil de l’interface de PageSpeed Insights
pour analyser les performances d’une page web

Les avantages sont exactement similaires à ceux de l'API PageSpeed Insights. Le seul inconvénient est que cette méthode n'est pas très évolutive. En effet, pour obtenir des données à partir de plusieurs URL, vous devrez saisir manuellement chaque URL dans l'outil.

Comment accéder aux données Core Web Vitals avec l’outil PageSpeed Insights ?

Saisissez l'URL ou le domaine dont vous souhaitez obtenir les données dans l'outil PageSpeed Insights.

Si des informations sont disponibles pour l'URL ou le domaine (origine), vous les trouverez en haut des résultats affichés après l'exécution de l'outil.

Page de résultats suite à la saisie d’une URL sur PageSpeed Insights
avec les métriques des Core Web Vitals (LCP, FID, CLS, et le FCP, l'INP et le TTFB)

Ntd : cet article explique en détails comment lire les résultats de PageSpeed Insights, et pourquoi les données Field et Lab sont parfois très différentes.

Le tableau de bord CrUX dans Data Studio

CrUX Data Studio Dashboard est un outil puissant construit par Rick Viscomi pour accéder au projet CrUX BigQuery très facilement avec une interface utilisateur facile à prendre en main.

Résultat de l’analyse du Largest Contentful Paint (LCP) d’un site web

Points forts du tableau de bord CrUX dans Data Studio

Vous pouvez accéder aux données au niveau de l'origine ;
vous pouvez trier les trois types d’appareils (mobile, ordinateur et tablette) ;
vous pouvez extraire des données pour tous les types de connexions réseau lorsqu'elles sont disponibles (4G, 3G, 2G, slow-2G et hors ligne) ;
vous pouvez extraire des données historiques au-delà du dernier mois disponible ;
la configuration est entièrement gratuite ;
il est très facile à configurer et possède une interface utilisateur simple ;
certaines métriques qui peuvent être utiles pour votre analyse ne sont pas disponibles dans les autres APIs, comme le Time To First Byte (TTFB).

Points faibles du tableau de bord CrUX dans Data Studio

Vous ne pouvez pas accéder aux données au niveau de l'URL ;
ce rapport est lié aux données disponibles dans le projet Big Query qui sont mises à jour chaque deuxième mardi du mois pour le mois précédent. Ce n’est pas la solution idéale si vous souhaitez monitorer vos Core Web Vitals en temps réel ;
cette méthode n'est pas vraiment évolutive si vous envisagez de monitorer un plus grand nombre de domaines.

Comment accéder aux données Core Web Vitals avec le tableau de bord CrUX dans Data Studio

Voici les étapes à suivre pour accéder aux données :

créez une copie du modèle directement sur Data Studio via g.co/chromeuxdash.
ajoutez le domaine qui vous intéresse,
cliquez sur "Create report"
visualisez le rapport du dernier mois disponible.

Si vous recevez une erreur, vérifiez que vous avez correctement ajouté le nom de domaine.

Il se peut également que votre domaine ne soit pas inclus dans l'ensemble de données BigQuery. Vous trouverez plus d'informations sur le fonctionnement de ce rapport dans l’article de Rick Viscomi sur web.dev.

Le rapport Core Web Vitals de la Search Console

Google Search Console a intégré un rapport Core Web Vitals. Ce rapport est pertinent mais assez spécifique car l’affichage des métriques se fait par propriété.

Onglet Core Web Vitals dans la Search Console Google pour un mobile

Points forts du rapport Core Web Vitals de la Search Console

Vous pouvez accéder aux données agrégées pour un groupe de pages constitué par Google, une approche unique qui n’existe pas dans les autres méthodologies ;
vous pouvez trier les données par mobile et desktop ;
vous pouvez extraire les données les plus récentes, c'est-à-dire la moyenne des données collectées sur les 28 jours précédents à partir du dernier jour complet ;
90 jours de données sont disponibles, mais uniquement en fonction du nombre d'URLs concernées par groupe (bon / à améliorer / médiocre) ;
l'interface de Google Search Console est très facile à utiliser.

Points faibles du rapport Core Web Vitals de la Search Console

Vous ne pouvez pas accéder aux données au niveau de l'URL ou de l'origine. Les données sont collectées par URLs similaires et par métriques agrégées, ce qui est intéressant, mais ce qui rend la progression de chaque URL impossible à suivre individuellement ;
il n'est pas possible de télécharger les URLs individuelles classées comme "similaires", mais seulement le nombre total ;
vous ne pouvez pas segmenter les données par utilisateurs de tablettes ;
aucune information sur la connexion réseau n'est disponible ;
il n'est pas possible d'accéder aux données historiques au-delà des 90 jours précédents.

Comment accéder aux données Core Web Vitals avec la Search Console de Google

Pour l'instant, la seule façon d'extraire les données est de passer par l'interface utilisateur. Le rapport est divisé entre mobile et desktop.

Chaque catégorie d’appareil contient des rapports individuels mauvais / besoin d'amélioration / bon pour chacune des métriques Core Web Vitals (LCP, CLS, FID).

Rapport de l’analyse du LCP sur mobile avec Google Search Console,
avec la possibilité d’exporter le rapport.
Le nombre d’URLs similaires et le “Agg. LCP” sont indiqués en bas à droite

Chaque rapport a une fonction d'exportation (CSV, Excel ou Google Sheet) qui permet de télécharger un tableau avec les différentes sections :

l'URL de base,
le nombre d'URL similaires,
la valeur de la métrique par groupe.

Ce rapport permet également de connaître le nombre d'URLs concernées dans cette sous-section au cours des 90 derniers jours.

Choisir la bonne méthode pour mesurer les Core Web Vitals, optimiser l’UX et le SEO

Vous l’avez compris, quelles que soient vos compétences en développement, il existe de nombreuses façons d'extraire les données Core Web Vitals de CrUX pour monitorer vos sites web, et aussi ceux de vos concurrents pour vous situer sur votre marché.

Si vous êtes à l'aise, que vous ne redoutez pas la programmation et que vous cherchez à surveiller vos Core Web Vitals de façon régulière à une plus grande échelle, alors l'API CrUX sera la meilleure solution !

A l’inverse, si vous êtes plutôt intéressés par les tendances générales du secteur et que vous n'avez pas souvent besoin des données pour suivre un grand nombre de sites, alors le tableau de bord CrUX de Data Studio sera la solution la plus adaptée.

Gardez à l'esprit que la mesure des performances de vos sites web, par rapport aux critères de référencement de Google à travers les Core Web vitals, est la première étape pour les optimiser.

Aussi, avant de commencer la collecte, définissez vos objectifs pour savoir quelles données recueillir, et dans quel but vous souhaitez les améliorer.

Nous remercions chaleureusement Jose Hernando, Consultant SEO Senior chez Builtvisbile, qui nous a donné la permission de traduire cet article très complet (en VO ici).

N’hésitez pas à prendre contact avec Jose pour plus de détails sur ces méthodes de mesure des données via Twitter ou sur son site 🙂

Pour tout savoir sur les métriques Core Web Vitals et comment les optimiser,
téléchargez le livre blanc :