PageSpeed Insights APIを使う

2020/06/012023/03/04

PageSpeed Insights APIの使用に関する覚書です。

簡易に試す

まず、簡易なサンプルとして、PageSpeed Insights APIを使ってみます。ブラウザのURLバーに次のURLを入力してください。

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https%3A%2F%2Fwww.bugbugnow.net%2F

するとブラウザは、一定時間後（2-3秒後）に次のような50KBほどある巨大なJSONを出力するはずです。

{
  "captchaResult": "CAPTCHA_NOT_NEEDED",
  "kind": "pagespeedonline#result",
  "id": "https://www.bugbugnow.net/",

...

}

この、JSONがAPIの出力になります。出力が巨大でほしい情報がわかりづらいですが、PageSpeed Insightsで表示している情報は、すべて含まれていると考えて良いです。スクリーンショットも含めてすべて含まれています。また、PageSpeed Insightsでは、表示されていない情報も含まれています。

もちろん、urlパラメータを変更することで調べたいウェブページを自由に指定することができます。また、url以外のパラメータも準備されています。

APIの情報

PageSpeed Insights APIの情報は、次のページから確認できます。

最低限必要そうな情報を抜粋して記載します。

リクエスト

GET https://www.googleapis.com/pagespeedonline/v5/runPagespeed

※通常のHTTPのGETリクエストです。リクエストボディは不要です。
　OAuth2認証のような煩わしいものはありません。
　ただし、大量アクセス（1秒間に複数回アクセス）する場合、APIキー送付が必要です。
※APIキーは、次のページのキーを取得するボタンから取得できます。
　PageSpeed Insights API を使ってみる | Google Developers

パラメータ

パラメータ	型	説明
url	string	確認するウェブページのURLです。指定は必須です。
key	string	APIキーです。1秒間に複数回アクセスする場合に必要です。
callback	string	コールバック形式での出力になる。コールバックする関数名を指定する。
category	string	実行するカテゴリです。デフォルトは、`performance`です。 `accessibility / best-practices / performance / pwa / seo`
locale	string	出力のJSONをローカライズする。（例：`ja`）
strategy	string	分析対象。デフォルトは、`desktop`です。 `desktop / mobile`。

※categoryは、次のような複数指定が可能です。
　（...&category=performance&category=seo）
※主な構成設定は、lighthouseResult.configSettingsから確認できます。

レスポンス

プロパティの一部抜粋です。

プロパティ名	型	説明
id	string	URL
loadingExperience	object	エンドユーザーのページ読み込みエクスペリエンス
originLoadingExperience	object	オリジンの集約されたページ読み込みエクスペリエンス
analysisUTCTimestamp	string	タイムスタンプ
lighthouseResult	object	Lighthouseの結果
lighthouseResult.lighthouseVersion	string	Lighthouseのバージョン
lighthouseResult.configSettings	object	Lighthouseの構成設定
lighthouseResult.audits	object	監査
lighthouseResult.audits.(key)	object	監査対象の情報
lighthouseResult.audits.(key).score	double	監査対象のスコア
lighthouseResult.audits.(key).displayValue	dobule	監査対象のUIに表示される値
lighthouseResult.audits.(key).numericValue	dobule	監査対象の数値
lighthouseResult.categories	object	カテゴリ
lighthouseResult.categories.(key) .auditRefs[].weight	double	全体的なカテゴリスコアに対する重み

GoogleAppsScriptのPageSpeed Insights APIサンプル

function testPageSpeed() {
  // 設定
  var api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  var params = {
    'url': encodeURIComponent('https://www.bugbugnow.net/'),
    'locale': 'ja',
    'strategy': 'mobile',
  };
  var category = ['performance'];

  // JSON取得
  var query = '';
  for (key in params) {
    query += '&'+key+'='+params[key];
  }
  category.forEach(function(value) {
    query += '&category='+value;
  });
  var url = api + '?' + query.substring(1);
  var response = UrlFetchApp.fetch(url);
  var json =  JSON.parse(response.getContentText());

  // 結果
  Logger.log(url);
  Logger.log('');
  Logger.log('[フィールドデータ]');
  Logger.log('FCP = '+json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.percentile);
  Logger.log('FID = '+json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.percentile);
  Logger.log('LCP = '+json.loadingExperience.metrics.LARGEST_CONTENTFUL_PAINT_MS.percentile);
  Logger.log('CLS = '+json.loadingExperience.metrics.CUMULATIVE_LAYOUT_SHIFT_SCORE.percentile);
  Logger.log('');
  Logger.log('[ラボデータ]');
  Logger.log('スコア = '+json.lighthouseResult.categories.performance.score);
  Logger.log('First Contentful Paint = '+json.lighthouseResult.audits['first-contentful-paint'].displayValue);
  Logger.log('速度インデックス = '+json.lighthouseResult.audits['speed-index'].displayValue);
  Logger.log('最大コンテンツの描画 = '+json.lighthouseResult.audits['largest-contentful-paint'].displayValue);
  Logger.log('インタラクティブになるまでの時間 = '+json.lighthouseResult.audits['interactive'].displayValue);
  Logger.log('合計ブロック時間 = '+json.lighthouseResult.audits['total-blocking-time'].displayValue);
  Logger.log('累積レイアウト変更 = '+json.lighthouseResult.audits['cumulative-layout-shift'].displayValue);
  Logger.log('');
  Logger.log('First Meaningful Paint = '+json.lighthouseResult.audits['first-meaningful-paint'].displayValue);
  Logger.log('CPUの初回アイドル = '+json.lighthouseResult.audits['first-cpu-idle'].displayValue);
  Logger.log('Estimated Input Latency = '+json.lighthouseResult.audits['estimated-input-latency'].displayValue);
  Logger.log('初回入力遅延の最大推定時間 = '+json.lighthouseResult.audits['max-potential-fid'].displayValue);
}

バグ取りの日々