Mesurer les Core Web Vitals avec l'API PageSpeed Insights et l'API du rapport Chrome UX (CrUX)

1. Avant de commencer

Dans cet atelier de programmation, vous allez apprendre à mesurer les Core Web Vitals d'une page Web avec les API PageSpeed Insights et CrUX.

Les deux API renvoient des données Core Web Vitals identiques, mais chacune offre des avantages distincts. En plus des données CrUX issues du terrain, l'API PageSpeed Insights fournit également des données Lighthouse. Il s'agit de l'outil Google automatisé et Open Source qui audite les pages Web et recommande des améliorations. L'API CrUX ne fournit pas de données Lighthouse, elle s'exécute donc plus rapidement.

Google vous recommande de mesurer les Core Web Vitals sur les appareils mobiles et les ordinateurs. Les Core Web Vitals incluent les trois métriques suivantes, qui s'appliquent à toutes les pages Web et vous fournissent des informations essentielles sur l'expérience utilisateur :

  • Largest Contentful Paint (LCP) : Mesure les performances de chargement et doit se produire dans les 2,5 premières secondes du chargement de la page.
  • First Input Delay (FID) : Mesure l'interactivité et doit se produire dans un délai de 100 millisecondes.
  • Cumulative Layout Shift (CLS) : Mesure la stabilité visuelle et doit être inférieure à 0,1.

Prérequis

Points abordés

  • Mesurez les Core Web Vitals d'une page Web avec l'API PageSpeed Insights.
  • Mesurez les Core Web Vitals d'une page Web avec l'API CrUX.

Prérequis

  • Un compte Google
  • Accès à une ligne de commande
  • Un éditeur de texte de votre choix
  • Un navigateur Web de votre choix
  • URL de votre choix (cet atelier de programmation utilise https://developers.google.com)

2. Mesurer les métriques Core Web Vitals avec l'API PageSpeed Insights

  1. Si vous avez besoin des données de performances pour la version pour ordinateur d'une URL, demandez-les à l'API PageSpeed Insights et enregistrez-les dans un fichier response.txt :
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Remplacez l'espace réservé YOUR_URL par votre URL.

À la fin de la chaîne de l'API, vous remarquerez que le paramètre de requête strategy est défini sur la valeur desktop, qui spécifie la requête pour les données pour ordinateur.

  1. Si vous avez besoin des données de performances pour la version mobile d'une URL, demandez-les à l'API PageSpeed Insights et enregistrez-les dans un fichier response.txt :
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Remplacez l'espace réservé YOUR_URL par votre URL.

À la fin de la chaîne de l'API, vous remarquerez que le paramètre de requête strategy est défini sur la valeur mobile, qui spécifie la demande de données mobiles.

  1. Dans votre éditeur de texte, ouvrez le fichier response.txt, puis recherchez la propriété loadingExperience :

response.txt

   "loadingExperience": {
    "id": "https://developers.google.com/",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1714,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.49701860391159164
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.40071951025600261
          },
          {
            "min": 3000,
            "proportion": 0.10226188583240581
          }
        ],
        "category": "AVERAGE"
      },
  },

La propriété loadingExperience fournit ces informations pour chacun des signaux Web essentiels en fonction de l'URL et du type d'appareil indiqués dans la requête API :

  • La propriété percentile indique le 75e centile pour chaque métrique.
  • La propriété distributions indique le pourcentage de vues de page pour lesquelles l'expérience était bonne, nécessitait une amélioration ou était médiocre pour chaque métrique.
  • La propriété category classe les performances de chaque métrique comme lentes, moyennes ou rapides.

Si le contenu de la propriété loadingExperience est vide, cela signifie que l'URL ne dispose pas de suffisamment de données de performances. Ce problème se produit généralement lorsque vous testez des pages Web à faible trafic.

  1. Recherchez la propriété originLoadingExperience :

response.txt

  "originLoadingExperience": {
    "id": "https://developers.google.com",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1649,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.488838781075378
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.42709617576692827
          },
          {
            "min": 3000,
            "proportion": 0.084065043157693739
          }
        ],
        "category": "AVERAGE"
      },
  },

La propriété originLoadingExperience indique les expériences agrégées pour l'ensemble de l'origine, et non uniquement pour l'URL. Il fournit les mêmes informations pour chacune des Core Web Vitals, comme expliqué à l'étape précédente.

3. Mesurer les métriques Core Web Vitals avec l'API CrUX

Obtenir une clé API

  1. Dans la console Google Cloud, recherchez Chrome UX, puis sélectionnez API Chrome UX Report dans le menu déroulant.
  2. Sur la page API Chrome UX Report, cliquez sur Activer, puis attendez que le bouton Activer se transforme en bouton Gérer et sélectionnez Gérer.
  3. Dans le menu de navigation, cliquez sur Identifiants, puis sélectionnez Créer des identifiants > Clé API et copiez la clé API.

Faire une demande

  1. À partir de la ligne de commande, demandez les données de performances de votre URL à l'API CrUX et enregistrez-les dans un fichier response.txt :
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'

Remplacez l'espace réservé YOUR_API_KEY par votre clé API, puis remplacez l'espace réservé YOUR_URL par votre URL.

  1. Dans votre éditeur de texte, ouvrez le fichier response.txt :

response.txt

{
  "record": {
    "key": {
      "url": "https://developers.google.com/"
    },
    "metrics": {
      "cumulative_layout_shift": {
        "histogram": [
          {
            "start": "0.00",
            "end": "0.10",
            "density": 0.47784335300590036
          },
          {
            "start": "0.10",
            "end": "0.25",
            "density": 0.32379713914174157
          },
          {
            "start": "0.25",
            "density": 0.19835950785235579
          }
        ],
        "percentiles": {
          "p75": "0.23"
        }
      },
    }
  },
}

La réponse de l'API CrUX fournit les informations suivantes pour chacune des métriques Core Web Vitals :

  • La propriété histogram indique le pourcentage d'utilisateurs ayant bénéficié d'une expérience lente, moyenne ou rapide pour une métrique donnée.
  • La propriété percentiles indique la 75e observation percentile pour une métrique donnée.

Si un message d'erreur indiquant que les données sont introuvables s'affiche, cela signifie que les données sur les performances disponibles pour l'URL en question sont insuffisantes. Ce problème se produit généralement lorsque vous testez des pages Web à faible trafic.

4. Félicitations

Félicitations ! Vous avez mesuré les Core Web Vitals d'une page Web avec les API PageSpeed Insights et CrUX.

En savoir plus