PageSpeed Insights APIを使う

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

パラメータ

パラメータ説明
urlstring確認するウェブページのURLです。指定は必須です。
keystringAPIキーです。1秒間に複数回アクセスする場合に必要です。
callbackstringコールバック形式での出力になる。コールバックする関数名を指定する。
categorystring実行するカテゴリです。デフォルトは、performanceです。
accessibility / best-practices / performance / pwa / seo
localestring出力のJSONをローカライズする。(例:ja
strategystring分析対象。デフォルトは、desktopです。
desktop / mobile

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

レスポンス

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

プロパティ名説明
idstringURL
loadingExperienceobjectエンドユーザーの
ページ読み込みエクスペリエンス
originLoadingExperienceobjectオリジンの集約された
ページ読み込みエクスペリエンス
analysisUTCTimestampstringタイムスタンプ
lighthouseResultobjectLighthouseの結果
lighthouseResult.lighthouseVersionstringLighthouseのバージョン
lighthouseResult.configSettingsobjectLighthouseの構成設定
lighthouseResult.auditsobject監査
lighthouseResult.audits.(key)object監査対象の情報
lighthouseResult.audits.(key).scoredouble監査対象のスコア
lighthouseResult.audits.(key).displayValuedobule監査対象のUIに表示される値
lighthouseResult.audits.(key).numericValuedobule監査対象の数値
lighthouseResult.categoriesobjectカテゴリ
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);
}

参考