PageSpeed Insights API と Chrome UX（CrUX）レポート API を使用してウェブに関する主な指標を測定する

1. 始める前に

この Codelab では、PageSpeed Insights API と CrUX API を使用してウェブページのウェブに関する主な指標を測定する方法を学びます。

どちらの API も同じウェブに関する主な指標データを返しますが、それぞれに異なるメリットがあります。PageSpeed Insights API は、フィールドの CrUX データに加えて、Lighthouse のデータも提供します。Lighthouse は、ウェブページを監査して改善方法を推奨する、Google の自動化されたオープンソース ツールです。CrUX API は Lighthouse のデータを提供しないため、実行が高速です。

Google では、モバイル デバイスとパソコンの両方でウェブに関する主な指標を測定することをおすすめします。ウェブに関する主な指標には、次の 3 つの指標が含まれます。これらはすべてのウェブページに適用され、ユーザー エクスペリエンスに関する重要な分析情報を提供します。

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

前提条件

• ウェブに関する主な指標の記事
• コマンドラインに関する基本的な知識
• Core Web Vitals の指標のしきい値の定義に関する記事

学習内容

• PageSpeed Insights API を使用して、ウェブページのウェブに関する主な指標を測定します。
• CrUX API を使用してウェブページのウェブに関する主な指標を測定します。

必要なもの

• Google アカウント
• コマンドラインへのアクセス
• 任意のテキスト エディタ
• 任意のウェブブラウザ
• 任意の URL（この Codelab では https://developers.google.com を使用します）。

2. PageSpeed Insights API で Core Web Vitals を測定する

1. URL のパソコン版のパフォーマンス データが必要な場合は、PageSpeed Insights API からデータをリクエストして、response.txt ファイルに保存します。

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

YOUR_URL プレースホルダを URL に置き換えます。

API 文字列の末尾にある strategy クエリ パラメータが desktop 値に設定されていることに注目してください。これは、パソコンのデータをリクエストすることを指定しています。

2. URL のモバイル版のパフォーマンス データが必要な場合は、PageSpeed Insights API からデータをリクエストして、response.txt ファイルに保存します。

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

YOUR_URL プレースホルダを URL に置き換えます。

API 文字列の末尾で、strategy クエリ パラメータが mobile 値に設定されていることに注目してください。これは、モバイルデータのリクエストを指定するものです。

3. テキスト エディタで response.txt ファイルを開き、loadingExperience プロパティを見つけます。

response.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"
      },
  },

loadingExperience プロパティは、API リクエストで指定された URL とデバイスタイプに基づいて、ウェブに関する主な指標ごとに次の情報をレポートします。

• percentile プロパティは、各指標の 75 パーセンタイルを示します。
• distributions プロパティは、各指標で「良好」、「改善が必要」、「不良」のいずれかのエクスペリエンスとなったページビューの割合を示します。
• category プロパティは、各指標のパフォーマンスを「遅い」、「平均」、「速い」に分類します。

loadingExperience プロパティの内容が空の場合、URL には十分なパフォーマンス データがありません。この問題は通常、トラフィックの少ないウェブページをテストするときに発生します。

4. 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"
      },
  },

originLoadingExperience プロパティは、URL だけでなく、オリジン全体の集計されたエクスペリエンスをレポートします。前の手順で説明したように、各 Core Web Vitals について同じ情報が表示されます。

3. CrUX API を使用してウェブに関する主な指標を測定する

API キーを取得する

1. Google Cloud コンソールで Chrome UX を検索し、プルダウン メニューで Chrome UX Report API を選択します。
2. [Chrome UX Report API] ページで [有効にする] をクリックし、[有効にする] ボタンが [管理] ボタンに変わるまで待ってから、[管理] を選択します。
3. ナビゲーション メニューで [認証情報] をクリックし、[認証情報を作成 > API キー] を選択して API キーをコピーします。

リクエストを行う

1. コマンドラインから、CrUX API に URL のパフォーマンス データをリクエストし、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"}'

YOUR_API_KEY のプレースホルダを API キーに置き換え、YOUR_URL のプレースホルダを URL に置き換えます。

注意: このコマンドは、macOS、Linux、Windows の Git BASH に適用されます。別のオペレーティング システムまたはコマンドラインを使用している場合は、コマンドを少し変更する必要がある場合があります。たとえば、Windows でコマンド シェルを使用する場合は、パラメータを単一引用符ではなく二重引用符で囲む必要があります。次に、既存の二重引用符の前にスラッシュを配置して、内側の引用符をエスケープする必要があります。

2. テキスト エディタで response.txt ファイルを開きます。

response.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"
        }
      },
    }
  },
}

CrUX API レスポンスでは、ウェブに関する主な指標ごとに次の情報が提供されます。

• histogram プロパティは、特定の指標でユーザーが遅い、平均的、速いエクスペリエンスを経験した割合を示します。
• percentiles プロパティは、特定の指標の 75 パーセンタイルの観測値を示します。

「データが見つかりませんでした」というエラー メッセージが表示された場合は、指定した URL のパフォーマンス データが十分に蓄積されていません。この問題は通常、トラフィックの少ないウェブページをテストするときに発生します。

4. 完了

これで、PageSpeed Insights API と CrUX API を使用して、ウェブページのウェブに関する主な指標を測定しました。

さらに詳しく学習するには

• PageSpeed Insights API を使ってみる
• CrUX API の使用
• ウェブバイタル