Mesurer les Core Web Vitals d'une page Web avec la bibliothèque web-vitals

1. Avant de commencer

Dans cet atelier de programmation, vous allez apprendre à mesurer les Core Web Vitals d'une page Web avec la bibliothèque JavaScript web-vitals.

Google vous recommande de mesurer les Core Web Vitals et de vous assurer qu'elles se situent dans le 75e centile des chargements de page segmentés 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.
  • Interaction to Next Paint (INP) : Mesure l'interactivité et doit se produire dans les 200 millisecondes.
  • Cumulative Layout Shift (CLS) : Mesure la stabilité visuelle et doit être inférieure à 0,1.

Prérequis

Objectifs de l'atelier

  • ajouter la bibliothèque web-vitals à une page Web ;
  • Mesurez les Core Web Vitals de la page Web dans les outils pour les développeurs Google Chrome.
  • Facultatif : Signalez les Core Web Vitals de la page Web à Google Analytics.

Prérequis

  • L'éditeur de texte de votre choix, tel que Sublime Text ou Visual Studio Code
  • Un navigateur Web Chromium, tel que Google Chrome ou Microsoft Edge (pour savoir pourquoi un navigateur Web Chromium est nécessaire, consultez Browser Support (Compatibilité des navigateurs))

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

  1. Dans votre éditeur de texte, créez un fichier web-vitals-test.html, puis saisissez-y le code HTML suivant :

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 utiliserez pour cet atelier de programmation.

  1. 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 {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>

Ce script de module charge la bibliothèque web-vitals à partir d'un réseau de diffusion de contenu. Votre fichier se présente maintenant comme suit :

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 {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(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, comme celles requises pour mesurer les Core Web Vitals. Les navigateurs non compatibles avec les modules ou les API de Core Web Vitals n'essaieront pas de charger ce script.

3. Mesurer les Core Web Vitals d'une page Web dans les outils pour les développeurs Google Chrome

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

74044d63a2f32916.png

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

Onglet &quot;Réseau&quot; avec le paramètre &quot;3G lente&quot; sélectionné dans le menu déroulant &quot;Limitation du débit&quot;.

  1. Revenez à l'onglet Console, puis cliquez n'importe où sur la page Web. La métrique LCP s'affiche dans l'onglet Console.

Onglet &quot;Console&quot; après l&#39;impression de la métrique LCP.

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

Onglet &quot;Console&quot; après l&#39;impression de la métrique CLS.

  1. Revenez à l'onglet Réseau, puis cliquez sur la flèche d'expansion c5262a3662ee288c.png du menu déroulant de limitation du débit et sélectionnez 3G rapide. Ce paramètre simule une connexion réseau rapide.
  2. Revenez à l'onglet Console, puis cliquez n'importe où sur la page Web.La métrique LCP s'affiche à nouveau dans l'onglet Console, mais elle s'est améliorée par rapport à la fois précédente.

L&#39;onglet &quot;Console&quot; s&#39;affiche à nouveau après l&#39;impression de la métrique LCP.

  1. Actualisez la page Web. La métrique CLS s'affiche à nouveau dans l'onglet Console, mais elle s'est améliorée par rapport à la dernière fois.

L&#39;onglet &quot;Console&quot; après l&#39;impression de la métrique CLS.

4. Facultatif : Envoyer les Core Web Vitals de la page Web à Google Analytics

  • Dans le fichier web-vitals-test.html, après l'instruction d'importation du script du module, saisissez cette 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,
  });
}

onCLS(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onLCP(sendToGoogleAnalytics);

Ce code envoie les métriques Core Web Vitals à Google Analytics, où vous pouvez les consulter dans le rapport "Événements les plus fréquents" :

Rapport &quot;Événements les plus fréquents&quot; dans Google Analytics

Votre fichier se présente maintenant comme suit :

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 {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?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,
    });
  }

  onCLS(sendToGoogleAnalytics);
  onINP(sendToGoogleAnalytics);
  onLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Félicitations

Félicitations ! Vous avez appris à mesurer et à signaler les Core Web Vitals d'une page Web avec la bibliothèque web-vitals.

En savoir plus