PageSpeedInsightsのAPIでWebCoreVital測定から記録まで自動化

Googleが提供するウェブパフォーマンスを分析する人気のツールであるPageSpeedInsightsを、APIを通じて活用することができます。PageSpeedInsightsによる手動の測定は、大量のページを一括で測定したり、定期的なパフォーマンスモニタリングを実施するには不向きです。今回は自動でPageSpeedInsightsの結果を取得するために、PageSpeedInsightsのAPIについて紹介していきます。

概要

本記事の範囲
- PageSpeedInsightsのAPIで私がやりたかった事、使い方、JSONデータ構造を記事にします。
背景
- 手動で行うパフォーマンステストに限界があり（手動でやるのはキツい）、自動化をしたかった
- 有料ツールで表示速度チェックが一気にできるが、予算がないので安価でツールを開発したかった
解決したい問題
- たくさんのページの表示速度チェックを自動で行い、更にスプレッドシートに転記して集計できるようにする
- 表示速度チェックを自動で定期的に行い、モニタリングできるようにする
実行環境
- 自動化に使うツールは「Googleスプレッドシート、GoogleAppsScript」
  - 必要なのは「Googleアカウント、GoogleCloudPlatformのアカウントおよび登録、設定から取得したapiキー」

Contents

1 PageSpeedInsightsのAPIでやりたかった事
2 PageSpeedInsightsのAPIの使い方
3 PageSpeedInsightsのAPIで返されるJSONデータ構造
- 3.1 CoreWebVitalの指標は「lighthouseResult」のセクションを参照する
4 PageSpeedInsightsのAPIのGoogleAppsScriptの実行関数サンプル
5 SEO向けの応用編：スクレイピングのデータを含めてPageSpeedInsightsのAPIを実行する

PageSpeedInsightsのAPIでやりたかった事

私は日頃、SEOコンサルタントとしてサービスを提供することがあります。訳あってSEOコンサル会社は退職しましたが、Salesforce支援を行う会社で導入の支援を行いながら、クライアントの希望があればWebマーケティング支援も行い、一気通貫したサービスを提供しています。

Webマーケティング支援も兼務するので、過去の経験を活かしたSEOコンサルサービスを提供するのですが、前職で契約していたSEOの有料ツールがありません。というより、ツールの必要性に対する社内理解がまだ低いので、有料ツールの導入に障壁がある段階です。

そこで、PageSppedInsightsのAPIを利用した有料ツールの代替となるアプリ作成することで、費用をかけずSEOコンサルに関する業務負担を軽減したいと思って開発を試みました。

PageSppedInsightsのAPIの料金

厳密に言えば、PageSppedInsightsのAPIには費用負担があるのですが、APIリクエストによる従量課金で、有料ツールの契約とは比べ物にはならないぐらい安価です。

以下が、最終的なアプリ動作です。

PageSppedInsightsの開発アプリの最終的な動作

スプレッドシートにPageSppedInsightsで表示速度計測を行うURLリストがある
スプレッドシートのURLリストの取得はGoogle Apps Scriptで行う
取得したURLリストをGoogleAppsScriptでPageSppedInsightsのAPIを呼び込み、表示速度結果を取得する
取得できた表示速度結果は、スプレッドシートに記載する。

PageSpeedInsightsのAPIの使い方

PageSpeedInsightsAPIとは

PageSppedInsightsのAPIとは、Googleが提供する表示速度などのページパフォーマンスを計測する「PageSpeed Insights」の機能及び測定結果をプログラムから取得できるものです。
このAPIから、ウェブページの読み込み速度などのデータを自動的に取得することが可能です。PageSpeed InsightsはAPI経由でなくてもブラウザから結果を取得することもできますが、APIを通じて定期的な測定結果のモニタリングや対象URLに対して一気に測定することができます。

手動で行うPageSpeedInsights
手動で試してみたい場合は「PageSpeedInsights」をクリックしてみてください。1URL毎に手動で計測結果を取得できます。このツールで取得できる結果をAPIでは自動で取得することができます。

ブラウザから簡単にPageSpeedInsightsのAPIを試してみる

PageSpeedInsightsのAPIが、どんなデータを返してくるかは、ブラウザから簡単に試してみることができます。

以下に表示されているURLをコピペして、「https://www.yoursite.com/」の部分を計測したいページURLに変更してみてください。これによってPageSpeedInsightsのAPIから取得できる結果を確認することができます。

結果取得には時間がかかる

APIから取得する結果は、表示測定を行っている時間がかかるため、それなりに時間がかかります。ロード時間が長くても待ってください。10秒程度で結果は返ってくると思います。

//以下URLの「https://www.yoursite.com/」の部分を計測したい任意のページURLに変えてブラウザで表示してみてください。
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

1 2	//以下URLの「https://www.yoursite.com/」の部分を計測したい任意のページURLに変えてブラウザで表示してみてください。 https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

測定結果は、以下画像のようなデータ構造で表示されます。

Safariのブラウザで実行した結果の一部

測定方法や測定カテゴリを指定するAPIの文字列クエリパラメータ

先ほどブラウザで試したURLにクエリパラメータを追加することで測定方法や測定カテゴリなどを指定することができます。主に使うクエリパラメータを紹介しておきます。

パラメータ	使用用途
category	測定結果のカテゴリです。デフォルトはperformanceです。複数指定することも可能です。 performance accessibility best-practices seo pwa 今回の私はCoreWebVitalの指標を取得したいので、performanceを指定しています。PageSpeedInsightsの結果ページでは、categoryのperformanceとaccessibilityで取得できる値は以下画像のキャプチャが該当します。
strategy	desktop mobile PCとモバイルどちらかの環境で測定するかを選べます。デフォルトはPC。 SEO観点でモバイルファーストインデックスを加味して、私は今回「mobile」を指定しています。
locale	言語及び地域を指定する場合に使用します。日本の場合は「ja」
key	短期間に同じIPアドレスからのリクエストが多数になる場合はapiキーが必要です。今回は大量に定期的にリクエストすることを想定していますので、GoogleCloudPlatformから取得したapiキーを指定します。

上記のパラメータを加味して、私が計測に使用したパラメータは以下のようになります。

//以下URLの「https://www.yoursite.com/」の部分を計測したい任意のページURLに変え「key=」以降を取得したapiキーに変えて、APIをリクエストしています。
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/&category=performance&strategy=mobile&locale=ja&key=xxxxxxxxx

1 2	//以下URLの「https://www.yoursite.com/」の部分を計測したい任意のページURLに変え「key=」以降を取得したapiキーに変えて、APIをリクエストしています。 https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/&category=performance&strategy=mobile&locale=ja&key=xxxxxxxxx

PageSpeedInsightsのAPIで返されるJSONデータ構造

PageSpeedInsightsのAPIで返されるデータはJSONデータです。JSONデータは数百行で収まるものではなく、もっと大量のデータ行で返されます。さらに、表示速度測定を行ったページのリソースが多ければ、返されるデータ行は増えていきます。（ページ内の画像など、読み込んだデータに対しての測定結果を返してくるため）

JSONデータ構造は「PageSpeedツールの公式ガイド」に説明がありますが、全データに対して説明があるわけではありません。大まかなデータ構造を理解しつつ、取得したデータは自身で細かく確認していく必要があります。

CoreWebVitalの指標は「lighthouseResult」のセクションを参照する

CoreWebVitalの指標を取得したい場合は「LighthouseResult」のセクションを確認してください。セクションの一部は以下画像のようになっています。

PageSpeedInsightのAPIで返されるLighthouseResultセクション

LighthouseResultのセクション内のパフォーマンススコアは「categories > performance >socre」にあります。

このスコアは0から1の間の数値で表示されています。PageSpeedツールでは、％表示のため見え方に違いある点に注意が必要です。つまり、以下画像のスコア0.38はPageSpeedツールでは38と表示されています。

その他、CoreWebVitalの指標はLighthouseResultのセクション内の「audits」配下にあります。ここの指標はスコアではなく、具体的にかかった秒数を取得したいため、以下の表に基づいて指標を取得しています。

CoreWebVitalの指標	データ参照先
First Contentful Paint	lighthouseResult.audits.first-contentful-paint.displayValue
First Meaningful Paint	lighthouseResult.audits.first-meaningful-paint.displayValue
Largest Contentful Paint	lighthouseResult.audits.largest-contentful-paint.displayValue
スピードインデックス	lighthouseResult.audits.speed-index.displayValue
累積レイアウトシフト	lighthouseResult.audits.cumulative-layout-shift.displayValue

上記表から「First Contentful Paint」から「displayVaule」を参照する場合は、以下の画像のようにデータを参照していることになります。

LighthouseResultのfirst-contentful-paintの秒数

PageSpeedInsightsのAPIのGoogleAppsScriptの実行関数サンプル

GoogleAppsScriptでPageSpeedInsightsのAPIを実行するサンプルの関数は以下のようになります。
私はスプレッドシートからURLを取得した上で関数を実行したいので、引数を取得する関数にしています。また、APIキーはGoogleCloudPlatformから取得したものをご指定ください。

//引数urlを送る別の関数でURLを取得して関数getPageSpeeInsightsDataに渡してください
//apiキーはGoogleCloudPlatformから取得したAPIキーを設定してください。
//returnで返された値をスプレッドシートに転記する関数などで使用してください。

function getPageSpeedInsightsData(url) {
  var apiKey = 'xxxxxxxxxxxxxxxx'; // 自分のAPIキーを設定してください
  var apiUrl = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=' + encodeURIComponent(url) + '&category=performance&strategy=mobile&locale=ja&key=' + apiKey;
  
  var response = UrlFetchApp.fetch(apiUrl);
  var data = JSON.parse(response.getContentText());

  var performance = getNestedData(data, ['lighthouseResult', 'categories', 'performance', 'score']);
  var fcp = getNestedData(data, ['lighthouseResult', 'audits', 'first-contentful-paint', 'displayValue']);
  var fmp = getNestedData(data, ['lighthouseResult', 'audits', 'first-meaningful-paint', 'displayValue']);
  var lcp = getNestedData(data, ['lighthouseResult', 'audits', 'largest-contentful-paint', 'displayValue']);
  var speedIndex = getNestedData(data, ['lighthouseResult', 'audits', 'speed-index', 'displayValue']);
  var serverResponseTime = getNestedData(data, ['lighthouseResult', 'audits', 'server-response-time', 'numericValue']);
  var totalByteWeight = getNestedData(data, ['lighthouseResult', 'audits', 'total-byte-weight', 'score']);
  var domSizeScore = getNestedData(data, ['lighthouseResult', 'audits', 'dom-size', 'score']);

  return [performance, fcp, fmp, lcp, speedIndex, serverResponseTime, totalByteWeight, domSizeScore];
}

//引数urlを送る別の関数でURLを取得して関数getPageSpeeInsightsDataに渡してください

//apiキーはGoogleCloudPlatformから取得したAPIキーを設定してください。

//returnで返された値をスプレッドシートに転記する関数などで使用してください。

function getPageSpeedInsightsData(url) {

var apiKey = 'xxxxxxxxxxxxxxxx'; // 自分のAPIキーを設定してください

var apiUrl = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=' + encodeURIComponent(url) + '&category=performance&strategy=mobile&locale=ja&key=' + apiKey;

var response = UrlFetchApp.fetch(apiUrl);

var data = JSON.parse(response.getContentText());

var performance = getNestedData(data, ['lighthouseResult', 'categories', 'performance', 'score']);

var fcp = getNestedData(data, ['lighthouseResult', 'audits', 'first-contentful-paint', 'displayValue']);

var fmp = getNestedData(data, ['lighthouseResult', 'audits', 'first-meaningful-paint', 'displayValue']);

var lcp = getNestedData(data, ['lighthouseResult', 'audits', 'largest-contentful-paint', 'displayValue']);

var speedIndex = getNestedData(data, ['lighthouseResult', 'audits', 'speed-index', 'displayValue']);

var serverResponseTime = getNestedData(data, ['lighthouseResult', 'audits', 'server-response-time', 'numericValue']);

var totalByteWeight = getNestedData(data, ['lighthouseResult', 'audits', 'total-byte-weight', 'score']);

var domSizeScore = getNestedData(data, ['lighthouseResult', 'audits', 'dom-size', 'score']);

return [performance, fcp, fmp, lcp, speedIndex, serverResponseTime, totalByteWeight, domSizeScore];

}

SEO向けの応用編：スクレイピングのデータを含めてPageSpeedInsightsのAPIを実行する

PageSpeedInsightsのAPIを活用してCoreWebVitalの指標取得に加えて、対象URLをスクレイピングしたデータを1行にまとめるとSEOの分析でさらに便利です。以下はスプレッドシートで、スクレイピングによる結果とPageSpeedInsightsのAPIの結果をまとめたイメージです。