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

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

この Codelab について

subject最終更新: 5月 2, 2022
account_circle作成者: Philip Walton

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 ライブラリを使用して、ウェブページの主なウェブ指標を測定し、レポートを作成する方法を学習しました。

詳細