Mesurer les signaux Web essentiels avec les API PSI et CrUX

1. Avant de commencer

Dans cet atelier de programmation, vous allez apprendre à mesurer les signaux Web essentiels d'une page Web à l'aide de l'API PageSpeed Insights (PSI) et de l'API Chrome UX Report (CrUX).

Les deux API renvoient des données "Signaux Web essentiels" identiques, mais chacune offre des avantages distincts. Outre les données de CrUX sur le terrain, l'API PSI fournit des données de Lighthouse, l'outil Open Source automatisé et Open Source de Google qui audite les pages Web et recommande de les améliorer. L'API CrUX ne fournit pas de données Lighthouse, elle s'exécute donc plus rapidement.

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

  • LCP (Largest Contentful Paint) Mesure les performances de chargement et devrait se produire dans les 2,5 secondes suivant le début du chargement de la page.
  • FID (First Input Delay) Mesure l'interactivité et devrait survenir dans les 100 millisecondes.
  • CLS (Cumulative Layout Shift) Mesure la stabilité visuelle et doit être comprise entre 0,1 et 1,

Prerequisites

Objectifs de l'atelier

  • Mesurer les signaux Web essentiels à l'aide de l'API PSI
  • Mesurer les signaux Web essentiels à l'aide de l'API CrUX

Prérequis

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

2. Mesurer les signaux Web essentiels avec l'API PSI

  1. Si vous avez besoin des données de performances de la version classique d'une URL, exécutez la commande curl suivante pour demander les données de l'API PageSpeed Insights et les enregistrer 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.

  1. Si vous avez besoin des données de performances de la version mobile d'une URL, définissez le paramètre de requête strategy sur une valeur mobile à la fin de la chaîne d'API dans la commande fournie à l'étape précédente:
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.

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

réponse.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 signale 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 pages vues pour lesquelles a besoin d'amélioration ou pour chaque.
  • La propriété category classe les métriques comme lentes, moyennes ou rapides.

Si le contenu de la propriété loadingExperience est vide, l'URL ne dispose pas de suffisamment de données de performances disponibles. Ce problème survient 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 cumulées pour l'ensemble de l'origine, et pas uniquement l'URL. Elle fournit les mêmes informations pour chacun des signaux Web essentiels, comme expliqué à l'étape précédente.

3. Mesurer les signaux Web essentiels avec l'API CrUX

Obtenir une clé API

  1. Dans Google Cloud Console, recherchez Chrome UX, puis sélectionnez API Rapport sur l'expérience utilisateur Chrome dans le menu déroulant.
  2. Sur la page API Chrome UX Report, cliquez sur Activer, puis attendez que le bouton Activer devienne un bouton Gérer et sélectionnez Gérer.
  3. Dans le menu de navigation, cliquez sur Identifiants, puis sélectionnez Créer des identifiants et clé d'API et copiez la clé API.

Envoyer une demande

  1. Depuis votre ligne de commande, demandez des données sur les performances de votre URL à l'aide de 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 l'éditeur de texte, ouvrez le fichier response.txt:

réponse.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 chacun des signaux Web essentiels:

  • La propriété histogram indique le pourcentage d'utilisateurs dont l'expérience est lente, moyenne ou rapide pour une statistique donnée.
  • La propriété percentiles indique l'observation du 75e centile pour une métrique donnée.

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

4. Félicitations

Félicitations ! Vous avez mesuré les signaux Web essentiels d'une page Web à l'aide des API PSI et CrUX.

En savoir plus