web-vitals ライブラリを使用してウェブページのコアウェブ指標を測定する

1. 始める前に

この Codelab では、web-vitals JavaScript ライブラリを使用して、ウェブページの主なウェブ指標を測定する方法を学びます。

ウェブに関する主な指標の測定は、モバイル デバイスとパソコンの両方で分割されたページ読み込みの 75 パーセンタイル以内で行うことをおすすめします。

ウェブに関する主な指標には、次の 3 つの指標が含まれます。これらの指標はすべてのウェブページに適用され、ユーザー エクスペリエンスに関する重要な情報を提供します。

  • Largest Contentful Paint（LCP）。読み込みのパフォーマンスを測定します。ページの読み込み開始から 2.5 秒以内に行われる必要があります。
  • 初回入力遅延（FID）。インタラクティビティを測定します。測定は 100 ミリ秒以内に行われます。
  • Cumulative Layout Shift（CLS）視覚的安定性を測定します。値は 0.1 以内である必要があります。

Prerequisites

演習内容

  • web-vitals ライブラリをウェブページに追加します。
  • Google Chrome デベロッパー ツールでウェブページのウェブに関する主な指標を測定します。
  • 省略可: ウェブページの主なウェブに関する指標を Google アナリティクスに報告します。

必要なもの

  • Sublime Text や Visual Studio Code などの任意のテキスト エディタ
  • Google Chrome や Microsoft Edge など、Chromium ベースのウェブブラウザ（Chromium ベースのウェブブラウザが必要な理由について詳しくは、ブラウザのサポートをご覧ください）。

2. web-vitals ライブラリをウェブページに追加する

  1. テキスト エディタで web-vitals-test.html ファイルを作成し、次の HTML コードを入力します。

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>

このコードは、この Codelab で使用するウェブページを作成します。

  1. HTML コードの 2 番目の <p> 要素の後の <body> 要素に、このモジュール スクリプトを入力し、ファイルを保存します。

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>

このモジュール スクリプトは、コンテンツ配信ネットワークから web-vitals ライブラリを読み込みます。ファイルは次のようなコード スニペットのようになります。

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>

最近のブラウザはすべてモジュール スクリプトをサポートしているため、新しい API（ウェブに関する主な指標の測定に必要な API など）のみを使用するコードに適しています。モジュールや Core Web Vitals API をサポートしていないブラウザでは、このスクリプトを読み込めません。

3. Google Chrome デベロッパー ツールでウェブページの主なウェブ指標を測定する

  1. ウェブブラウザで、保存したファイルを開きます。
  2. ウェブページを右クリックし、ダイアログで [検証] をクリックします。
  3. [Google Chrome Developer Tools] で [Console] タブをクリックし、[Console settings] 6a9a7d8992edcd2c.png > [Preserve log] を選択します。この設定により、ウェブページの更新時にログが保持されます。

74044d63a2f32916.png

  1. [Network] タブをクリックし、スロットリング プルダウン メニューの c5262a3662ee288c.png 展開矢印をクリックして [Slow 3G] を選択します。この設定では、低速のネットワーク接続をシミュレートします。

[スロットリング] プルダウン メニューで [3G S: 低速] が選択されている [ネットワーク] タブ。

  1. [Console] タブに戻り、ウェブページの任意の場所をクリックします。LCP と FID の指標は [Console] タブに表示されます。

LCP および FID 指標の後の [Console] タブ。

  1. ウェブページを更新します。CLS 指標は [コンソール] タブに表示されます。

CLS 指標が表示された後の [Console] タブ。

  1. [Network] タブに戻り、絞り込みのプルダウン メニューの c5262a3662ee288c.png 展開矢印をクリックして [Fast 3G] を選択します。この設定は、高速ネットワーク接続をシミュレートします。
  2. [Console] タブに戻り、ウェブページの任意の場所をクリックします。LCP と FID の指標は再び [コンソール] タブに表示されますが、以前と改善されています。

LCP と FID の指標の後の [Console] タブが再表示されます。

  1. ウェブページを更新します。CLS 指標は [コンソール] タブに再び表示されますが、以前から改善されています。

CLS 指標の後の [Console] タブが再表示されます。

4. 省略可: ウェブページの主なウェブに関する指標を Google アナリティクスに報告する

  • web-vitals-test.html ファイルのモジュール インポート ステートメントの後に、この sendToGoogleAnalytics() 関数を入力してファイルを保存します。

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);

このコードは、ウェブに関する主な指標を Google アナリティクスに送信します。データは、上位のイベントレポートで確認できます。

Google アナリティクスの上位のイベント レポート

ファイルは次のようなコード スニペットのようになります。

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. 完了

これで、web-vitals ライブラリを使用して、ウェブページの主なウェブ指標を測定し、レポートを作成する方法を学習しました。

詳細