Google スプレッドシートに PageSpeedInsights API v5 の結果を記録する Google Apps Script を書きました

2018年 11月の末に PageSpeedInsights の API の Version が上がって v5 になりました。
古い API で Google スプレッドシートに記録するスクリプトを作っていたので、それを元にを v5 の戻り値を Google スプレッドシートに記録する Google Apps Script を作ってみました。

作成したものについて記載します。

v4 API で結果を記録する Google Apps Script

以前、PageSpeedInsights v4 向けのスクリプトを作成しました。

作成したスプリプト一式
kemsakurai/gas-PageSpeedInsights-v4
説明記事
Page Speed Insight v4 API でページ統計情報を取得する | Monotalk

v4 から v5 の変更点

以下、2 点が大きな変更点かと思います。

Lighthouse ベースの測定指標に変更された。
Lighthouse ベースの測定指標に変更された結果、SpeedIndex 等の時間を示す指標が取得できるようになった。

ローカル環境で Chrome の Lighthouse を動作させた場合との違いは Chrome User Experience Report | Tools for Web Developers | Google Developers の結果も取得できることです。

指定できるパラメータ

v5 API は以下のパラメータが指定できます。
v4 からそこまで大きな変化はありません。

Google APIs Explorer から API のお試し実行が可能です。

url
検査対象の URL を指定します。
category
これは Lighthouse のスコアのカテゴリです。 accessibility、seo、pwa、performance、best-practices を複数指定できます。
locale
ja_JP 等、指定可能です。戻り値に含まれるエラー、警告メッセージのローカライズが行われます。
strategy
desktop または mobile を指定できます。
utm_campaign
Google Analytics の utm パラメータです。
utm_source
Google Analytics の utm パラメータです。
fields
戻り値に含める項目を指定できます。cateogry を複数指定する場合は、戻りとなる json がかなり大きくなるので、Google APIs Explorer で生成したクエリ文字列を元に必要な項目だけ取得したほうがいいかと思います。

作成したもの一式

kemsakurai/gas-PageSpeedInsights-v5: Google Apps Script to record the return value of the PageSpeedInsights v5 API in the spreadsheet に、置いてあります。clasp を使って TypeScript で実装してみました。
以下の機能があります。

config シートに記載されたシート名を元に記録用のシートを作成する。
config シートの URL に対して、PageSpeedInsights v5 を実行して実行結果を記録する。
メニューから PageSpeedInsights v5の実行、スケジュール実行の設定ができる。

使い方

kemsakurai/gas-PageSpeedInsights-v5: Google Apps Script to record the return value of the PageSpeedInsights v5 API in the spreadsheet の使い方を説明します。

前提

Node.js と、clasp のインストールが前提で必要です。
参考になる記事をリンクしておきます。

Node.js npm のインストール。
- MacにNode.jsをインストール - Qiita
clasp のインストール。
- claspを使い、Google Apps Scriptプロジェクトをgitでバージョン管理する - Qiita

リポジトリをクローンする

git clone https://github.com/kemsakurai/gas-PageSpeedInsights-v5.git <project_name>

クローンしたディレクトリに移動して、`npm install` を実行する

cd <project_name>
npm install

`.clasp.json` のスクリプト ID を変更する

記録先となるスプレッドシートを作成し、コンテナバインドスクリプトのスクリプト ID を取得します。
スクリプト ID の取得手順は以下の通りです。

作成したスプレッドシートのツールからスクリプトエディタを開きます。
スクリプトエディタが起動します。ファイルメニューのプロジェクトのプロパティを開きます。
ウィンドウが開きます。スクリプト ID が表示されるのでコピーします。
.clasp.json の内容を修正
.clasp.json の scriptId に取得したスクリプト ID を貼り付けます。
```
{
  "scriptId": "<your_script_id>",
  "rootDir": "dist"
}
```

ビルド、デプロイ

ビルド
bundle.js と updateSchedule.html を dist ディクレトリ配下に作成します。
```
npm run build     
```
デプロイ
ビルドし、.clasp.json に指定したスクリプトに対してデプロイを実施します。
```
npm run deploy     
```

デプロイ後の設定

スクリプトのプロパティに以下を設定します。

スクリプトの<wbr>プロパティ

PSI_API_KEY
PageSpeedInsights API v5 の API キーを設定します。
Get Started with the PageSpeed Insights API | PageSpeed Insights | Google Developers に API キーの発行ボタンがあります。
REFERER
必須ではありません。設定すると、リクエストの際に REFERER ヘッダを付与し、設定した値をリファラ値として扱います。

スプレッドシートの設定

スクリプトのデプロイが完了すると、以下のようなメニューが表示されます。
記録する URL の指定、記録用のシートの作成、スケジュール実行の設定を行います。

1. Create config sheet

config シートを作成します。
以下のようなレイアウトのシートができます。

Urls には、記録対象の URL を、SheetName には、記録シートの名称を入力します。
config

実際に動かしたところ6分の制限の場合、3、4 URL が限界のようです。

2. Create recording sheet

config シートの内容をもとに、記録シートを作成します。
記録シートには、以下のカラムがあります。
GAS で PageSpeedInsights API を使って Lighthouse のスコアも取得する - Qiita を参考に MOBILE と DESKTOP のスコア、基本的な速度指標を取得するようにしました。

DATE
MOBILE.accessibilityScore
MOBILE.bestPracticesScore
MOBILE.performanceScore
MOBILE.pwaScore
MOBILE.seoScore
MOBILE.firstContentfulPaint
MOBILE.speedIndex
MOBILE.interactive
MOBILE.firstMeaningfulPaint
MOBILE.firstCpuIdle
MOBILE.estimatedInputLatency
DESKTOP.accessibilityScore
DESKTOP.bestPracticesScore
DESKTOP.performanceScore
DESKTOP.pwaScore
DESKTOP.seoScore
DESKTOP.firstContentfulPaint
DESKTOP.speedIndex
DESKTOP.interactive
DESKTOP.firstMeaningfulPaint
DESKTOP.firstCpuIdle
DESKTOP.estimatedInputLatency

3. Run Test

Create config sheet、Create recording sheet を実行すると、Run Test が実行可能です。
config シートの内容に従い、記録シートに API の結果を記録します。

4. Shchedule

記録シートへの記録をスケジュール実行登録できます。
スクリプトトリガの時間ベーストリガの実行とたいだい同じことができます。

グラフ描画時の注意点

スプレッドシートでも、DataPortal でもグラフ描画ができますが、以下 1点注意点です。

estimatedInputLatency の単位はミリ秒
他の速度指標は秒ですが estimatedInputLatency はミリ秒で値が返ります。
他の速度指標と同じ同一のグラフで描画する際は、単位調整が必要になります。

参考

GAS で PageSpeedInsights API を使って Lighthouse のスコアも取得する - Qiita
Google製スピード測定ツールのPageSpeed Insightsが分析エンジンにLighthouseを組み込む | 海外SEO情報ブログ
uknmr/gas-webpagetest
TypeScript で Google Apps Script を作る際の具合がわからず、参考になりました。

以上です。

Google スプレッドシートに PageSpeedInsights API v5 の結果を記録する Google Apps Script を書きました

v4 API で結果を記録する Google Apps Script

v4 から v5 の変更点

指定できるパラメータ

作成したもの一式

使い方