Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Cette page a été traduite par l'API Cloud Translation.

Mesurer les signaux Web essentiels d'une page Web à l'aide de la bibliothèque de valeurs Web Vitals

1. Avant de commencer

Dans cet atelier de programmation, vous allez apprendre à mesurer les signaux Web essentiels d'une page Web à l'aide de la bibliothèque JavaScript web-vitals.

Google vous recommande de mesurer les signaux Web essentiels et de respecter le 75e centile des chargements de page segmentés sur les 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

Ajoutez la bibliothèque web-vitals à une page Web.
Mesurez les signaux Web essentiels dans les outils pour les développeurs Google Chrome.
Facultatif: signalez les signaux Web essentiels de la page Web à Google Analytics.

Ce dont vous avez besoin

Éditeur de texte de votre choix, tel que Sublime Text ou Visual Studio Code
Navigateur Web Chromium, tel que Google Chrome ou Microsoft Edge (pour en savoir plus sur les raisons pour lesquelles vous avez besoin d'un navigateur Web Chromium, consultez Navigateurs compatibles).

2. Ajouter la bibliothèque web-vitals à une page Web

Dans votre éditeur de texte, créez un fichier web-vitals-test.html, puis saisissez-le dans le fichier:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Ce code crée la page Web que vous utilisez pour cet atelier de programmation.

Dans l'élément <body> du code HTML après le deuxième élément <p>, saisissez ce script de module, puis enregistrez le fichier:

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

Ce script de module charge la bibliothèque web-vitals à partir d'un réseau de diffusion de contenu. Votre fichier ressemble maintenant à cet extrait de code:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

Tous les navigateurs récents sont compatibles avec les scripts de module, qui conviennent parfaitement au code qui n'utilise que de nouvelles API, telles que celles requises pour mesurer les signaux Web essentiels. Les navigateurs qui ne prennent pas en charge les modules et les API Signaux Web essentiels n'essaient pas de charger ce script.

3. Mesurer les signaux Web essentiels sur la page Web dans les outils pour les développeurs Google Chrome

Dans votre navigateur Web, ouvrez le fichier enregistré.
Effectuez un clic droit sur la page Web, puis cliquez sur Inspecter dans la boîte de dialogue.
Dans le volet Outils pour les développeurs Google Chrome, cliquez sur l'onglet Console, puis sélectionnez Paramètres de la console > Conserver le journal. Ce paramètre garantit que les journaux persistent lorsque vous actualisez la page Web.

Cliquez sur l'onglet Réseau, puis sur la flèche de développement du menu déroulant de limitation, puis sélectionnez 3G lente. Ce paramètre simule une connexion réseau lente.

Onglet "Réseau" avec le paramètre "Lente 3G" sélectionné dans le menu déroulant "Limitation".

Revenez à l'onglet Console, puis cliquez n'importe où sur la page Web. Les statistiques LCP et FID s'affichent dans l'onglet Console.

Onglet "Console" après l'impression des métriques LCP et FID.

Actualisez la page Web. La métrique CLS s'affiche dans l'onglet Console.

Onglet "Console" après la métrique CLS.

Revenez à l'onglet Réseau, puis cliquez sur la flèche de développement dans le menu déroulant de limitation, puis sélectionnez 3G rapide. Ce paramètre simule une connexion réseau rapide.
Revenez à l'onglet Console, puis cliquez n'importe où sur la page Web.Les métriques LCP et FID s'affichent de nouveau dans l'onglet Console, mais elles se sont améliorées précédemment.

L'onglet "Console" affiche à nouveau les statistiques LCP et FID.

Actualisez la page Web. La métrique CLS s'affiche de nouveau dans l'onglet Console, mais a été améliorée.

Onglet "Console" à nouveau après la métrique CLS.

4. Facultatif: signaler les signaux Web essentiels à Google Analytics

Dans le fichier web-vitals-test.html après l'instruction d'importation du script du module, saisissez la fonction sendToGoogleAnalytics(), puis enregistrez le fichier:

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

Ce code envoie les signaux Web essentiels à Google Analytics, où vous pouvez les consulter dans le rapport "Principaux événements" :

Rapport "Principaux événements" dans Google Analytics

Votre fichier ressemble maintenant à cet extrait de code:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Félicitations

Félicitations ! Vous avez appris à mesurer et à signaler les signaux Web essentiels d'une page Web à l'aide de la bibliothèque web-vitals.

Learn more

Signaux Web