Web

Chrome UX Report API を使う手順 (cURL の場合)

投稿日:2021年4月26日 更新日:

1. Chrome UX Report API について

Chrome UX Report  API を使う手順について説明します。

Chrome ブラウザを使って Webサイトにアクセスした際、Chrome は「パフォーマンスに関するいくつかの指標 (Web Vitals)」を計測しています。このデータは Google によって収集され、Chrome UX Report として閲覧することが可能です。更に Chrome UX Report API を使えば、プログラムを使ってこれらの値を取得することができます。本記事では、cURL コマンドを使って Chrome UX Report の値を取得する方法について説明します。

2. API Key を用意する

まず 以下の手順で API Key を用意します。

  1. Google Cloud Platform にアクセスしてプロジェクトを作成する。
  2. 同じく Google Cloud Platform で、[API とサービス] – [ライブラリ] と進み、Chrome UX Report API を [有効] にする。
  3. 同じく Google Cloud Platform で、[API とサービス] – [認証情報] と進み [認証情報を作成] リンクをクリックし、[API キー] を選択する。そのまま進み API キーを作成する。

API キーは、念の為 [APIの制限] で [Chrome UX Report API] に制限しておくと安全です。

API キーを「Chrome UX Report API」に制限する

3. curl コマンドを実行する

3-1. origin data を取得する

ドメインそのものに対するデータ (Origin data) を取得するには、以下のコマンドを実行します。

curl -s --request POST "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key={APIKEY}" \
    --header 'Accept: application/json' \
    --header 'Content-Type: application/json' \
    --data '{"origin":"{ドメイン名}", "formFactor":"PHONE"}'
  • {ドメイン名}のところには、例えば laboradian.com といったドメイン名をセットします。
  • {APIKEY} のところには、先程作成した API Key の文字列をセットします。
  • “formFactor” には、アクセス元となるデバイスの種類をセットします。「DESKTOP」「PHONE」「TABLET」「ALL_FORM_FACTORS」から選びます。

3-2. URL data を取得する

各ページのURLに対するデータ (URL data) を取得するには、以下のコマンドを実行します。

curl -s --request POST "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key={APIKEY}" \
    --header 'Accept: application/json' \
    --header 'Content-Type: application/json' \
    --data '{"url":"{ドメイン名}", "formFactor":"PHONE"}'
  • origin data の場合に “origin” としていたところを “url” に変更しています。
  • {ドメイン名}、{APIKEY}、”formFactor” は、origin data のときと同じです。

3-3. コマンド結果の例

以下は、laboradian.com に対して origin data を取得したときの結果です。コマンドを実行すると JSON形式の文字列になります。

{
  "record": {
    "key": {
      "origin": "https://laboradian.com"
    },
    "metrics": {
      "cumulative_layout_shift": {
        "histogram": [
          {
            "start": "0.00",
            "end": "0.10",
            "density": 0.97639763976397553
          },
          {
            "start": "0.10",
            "end": "0.25",
            "density": 0.010001000100009993
          },
          {
            "start": "0.25",
            "density": 0.01360136013601358
          }
        ],
        "percentiles": {
          "p75": "0.00"
        }
      },
      "first_contentful_paint": {
        "histogram": [
          {
            "start": 0,
            "end": 1000,
            "density": 0.626988096428924
          },
          {
            "start": 1000,
            "end": 3000,
            "density": 0.3434030209062694
          },
          {
            "start": 3000,
            "density": 0.029608882664799503
          }
        ],
        "percentiles": {
          "p75": 1208
        }
      },
      "first_input_delay": {
        "histogram": [
          {
            "start": 0,
            "end": 100,
            "density": 0.98329665933186294
          },
          {
            "start": 100,
            "end": 300,
            "density": 0.011002200440087978
          },
          {
            "start": 300,
            "density": 0.0057011402280455594
          }
        ],
        "percentiles": {
          "p75": 3
        }
      },
      "largest_contentful_paint": {
        "histogram": [
          {
            "start": 0,
            "end": 2500,
            "density": 0.91784248974281524
          },
          {
            "start": 2500,
            "end": 4000,
            "density": 0.052736915841088514
          },
          {
            "start": 4000,
            "density": 0.029420594416091409
          }
        ],
        "percentiles": {
          "p75": 1468
        }
      }
    }
  },
  "urlNormalizationDetails": {
    "originalUrl": "https://laboradian.com/",
    "normalizedUrl": "https://laboradian.com"
  }
}

これらのデータはそれなりのアクセス数のあるページ (URL) でないと作成されません(特に URL data)が、Google は作成される条件について情報を出していません。少しハードルが高目だと思います。データが作成されていない場合は、以下の結果が返ってきます。

{ 
  "error": { 
    "code": 404, 
    "message": "chrome ux report data not found", 
    "status": "NOT_FOUND" 
  } 
}

4. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Google

【Google】アカウント無効化管理ツールの設定

Google の「アカウント無効化管理ツール」について説明します。

Web

Basic認証の設定手順

Basic認証の設定手順について説明します。

Web Vitals

Webページ読み込み高速化に対する<script>タグのdefer/async属性について

Webページ読み込み高速化に対する<script>タグのdefer/async属性について書いています。

Xserver

エックスサーバーの高速化機能(4種類)を紹介します

エックスサーバーの高速化機能を紹介します。