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

1. 始める前に

この Codelab では、PageSpeed Insights（PSI）API と Chrome UX レポート（CrUX）API を使用してウェブページの中核的なウェブ指標を測定する方法を学びます。

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

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

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

Prerequisites

演習内容

  • PSI API を使用してウェブページの中核的なウェブ指標を測定する
  • CrUX API を使用してウェブページの主なウェブ指標を測定する。

必要なもの

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

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

  1. デスクトップ版 URL のパフォーマンス データが必要な場合は、次の curl コマンドを実行して PageSpeed Insights API からデータをリクエストし、response.txt ファイルに保存します。
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

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

  1. モバイル版の URL のパフォーマンス データが必要な場合は、前の手順で提供したコマンドの strategy クエリ パラメータを API 文字列の末尾の mobile 値に設定します。
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

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

  1. テキスト エディタで 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 に十分な掲載結果データがありません。この問題は通常、トラフィックの少ないウェブページをテストしたときに発生します。

  1. 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 だけでなく、出発地全体の集計されたエクスペリエンスを報告します。個々のウェブに関する主な指標について、前のステップで説明したものと同じ情報が提供されます。

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

API キーを取得する

  1. Google Cloud Console で「Chrome UX」を検索し、プルダウン メニューで [Chrome UX Report API] を選択します。
  2. [Chrome UX Report API] ページで [有効にする] をクリックし、[有効にする] ボタンが [管理] ボタンに変わるまで待ってから [管理] を選択します。
  3. ナビゲーション メニューで [Credentials] をクリックし、[Create Credentials > API key] を選択して、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 に置き換えます。

  1. テキスト エディタで、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. 完了

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

詳細