Page Speed Insights の score を 定期的に計測して、DataStudio でグラフ化する | Monotalk で、score のみを定期的に計測して取得するスクリプトを作成しました。
Page Speed Insight の APIはスコア以外のページの統計情報の取得できるのでそれらを取得するスクリプトと作成しました。 作成したスクリプトの説明と、スプレッドシートへの記録方法を記載します。
作成したスクリプト
kemsakurai/Page-Speed-Score-metric に UPしました。
スプレッドシート 1行あたり、2回APIを実行して、Mobile 閲覧時のページに関する統計情報と、PC 閲覧時のページに関する統計情報 を取得、記録します。
前回作成時からの変更点について
前回作成したスクリプトから変更点はざっくり以下になります。
-
ページの統計情報を取得項目として追加した。
-
4分経過後に再実行するため、スクリプトトリガーを登録するようにした。
-
API を v2 から v4 に変更、指定パラメータと結果取得項目を変更した。
v2 と v4 の変更点について
以下、リリースノートに、変更点が記載されています。
* リリースノート | PageSpeed Insights | Google Developers
v2 は、2018 年 6 月には使用できなくなるので、それまでには v4 に変更する必要があります。
API の INPUT と OUTPUT は私が確認した限り以下の違いがありました。
strategy mobile でAPI実行時に、USABILITY スコア が返却されなくなった
v2 では、USABILITY スコアが存在しましたが、v4 では、USABILITY スコア が返却されません。
これは、速度評価に特化したということかと思います。
USABILITY 評価については、モバイルフレンドリーテスト API があるのでこれを使って評価すればいいのかと思います。1
About the API | URL Testing Tools API (Experimental) | Google Developers
ただ、URL Testing Tools API (Experimental) は、MOBILE_FRIENDLY かどうかを返すので、スコアの返却は行われません。
統計情報の戻り値が追加された
API の 戻り値ベースで確認すると、v2 では以下の統計情報が返却されます。
numberResources
numberHosts
totalRequestBytes
numberStaticResources
htmlResponseBytes
cssResponseBytes
imageResponseBytes
javascriptResponseBytes
otherResponseBytes
numberJsResources
numberCssResources
v4 では以下の情報が返却されます。
numberResources
numberHosts
totalRequestBytes
numberStaticResources
htmlResponseBytes
overTheWireResponseBytes
cssResponseBytes
imageResponseBytes
javascriptResponseBytes
otherResponseBytes
numberJsResources
numberCssResources
numTotalRoundTrips
numRenderBlockingRoundTrips
追加されているフィールドについて以下説明します。
-
overTheWireResponseBytes
転送されたレスポンスの合計バイト数です。gzip圧縮されている場合は、圧縮されたサイズで合計が算出されるのかと思われます。 -
numTotalRoundTrips
ページを全て読み込むために必要なラウンドトリップ数 -
numRenderBlockingRoundTrips
レンダリングをブロックするリソースを読み込むために必要なラウンドトリップ数
ドキュメントを確認する限り、統計情報として他のフィールドもあります。
これらは、条件により設定される項目なのかと思います。
Pagespeedapi: runpagespeed | PageSpeed Insights | Google Developers
loadingExperience が戻り値に追加された
このブログでは取得できていないですが、loadingExperience が戻り値に追加されています。
ある程度アクセス数のあるサイトであれば、以下の形式でFCP (First Contentful Paint) の値と、DCL(DOMContentLoaded) の値が取得できるようになったようです。
"loadingExperience": {
"id": string,
"metrics": {
(key): {
"median": integer,
"distributions": [
{
"min": integer,
"max": integer,
"proportion": double
}
],
"category": string
}
},
"overall_category": string,
"initial_url": string
}
新しくなったGoogle PageSpeed Insights — ブログ | 株式会社Spelldata
この Chrome で取得され、収集された情報は、Chrome User Experience Report | Tools for Web Developers | Google Developers で記載の手順でアクセスできるようです。
API の入力パラメータに Google Analytics のキャンペーンパラメータが追加された
v2 にも あったのかもしれませんが、v4 になってから気がつきました。
utm_source と、utm_campaign を API に指定できるので、Google Analytics で PSI からのアクセスの特定ができます。
フィルタ設定で対象のキャンペーンパラメータに該当する場合は、除外設定をしてもよいかもしれません。
スクリプトで取得する統計情報について
loadingExperience を取得する検証ができなかったので、pageStats にぶら下がる項目を取得して、スプレッドシートに転記するようにしました。
pageStats にぶら下がる項目は、フィールドとして設定されない場合もあり、設定がない場合は、スコアなしで空文字をセルに設定しています。
使い方
スプレッドシートの準備
シート名 config で以下のレイアウトのスプレッドシートを作成します。
Key には、Page Speed Insights の API キー、
Urls には、チェック対象の URL、
SheetName には、チェック対象の URL の画面名を入力します。
スクリプト実行の事前準備
-
BetterLog のプロジェクト参照を追加する
peterherrmann/BetterLog: With one line of code, BetterLog extends the native apps script Logger and gives you automatic additional features like logging to a spreadsheet and more. を スクリプトの参照ライブラリとして追加します。 -
API Key の発行
Page Speed Insights の API Key を発行します。 API Key の発行方法は以下の記事が参考になりました。
Google Spread Sheetに記載した複数URLのPage Speed Insightsの点数をGoogle Apps Scriptで取得する方法 - Qiita -
スクリプト一式を、取得して、スプレッドシートに登録する
kemsakurai/Page-Speed-Score-metric のスクリプト一式を、スプレッドシートに登録します。
スクリプトの実行
-
configシートの入力後に、init.gs を実行
config シートに記録対象のページ情報を入力後、init.gs のinitializeメソッドを実行し、スコア記録用のシートを作成します。 -
pageSpeed.gs の
refererを変更、スケジュール実行トリガーを登録します。
API Keyに referrer を設定している場合は、refererを変更します。2
手動で、executePageSpeedを起動するか、スケジュール実行するのであれば、executePageSpeed時刻起動トリガーを登録してください。
起動時刻が4分を超える場合は、1次中断し、中断したところから、1分後再度記録します。
10 画面程度であれば、5分以内に完了すると思いますが、それ以上の画面数を記録する場合は、2重起動しないように起動間隔を調整してください。3
グラフでの可視化方法
取得できる統計情報を眺めた限り、ダッシュボードには以下のグラフを配置するのが良いのかと思いました。4
-
Mobile ページ、PC ページのスコア時系列グラフ
スコアを時系列グラフを表示して、リリースタイミングでの変化を監視、記録する。 -
Resource 数の積み上げ時系列グラフ、または、積み上げ棒グラフ
Resource 数はカテゴリごとに取得できるので、そのカテゴリごとの時系列と、合計を示すための積み上げを設定、または、numberResourceが合計リソース数を示すので、それを使うでもよいかもしれません。 -
Response バイト数の積み上げ時系列グラフ、または、積み上げ棒棒グラフ
Response バイト数もカテゴリごとに取得ができます。Resource数と同様の描画でいい感じになりそうに思います。 -
RoundTrip数の時系列グラフ
numTotalRoundTripsとnumRenderBlockingRoundTripsが取得できます。
2つだけなので、それぞれ時系列で表示するのがよいように思います。
時系列での記録はそこまで有用ではない?
時系列でしばらく記録していますが、Speed Index に比べると、時系列で取得する意味は薄いかなと思いました。
どちらかというと、定期的にサイトの大部分の画面のスコアを取得し、その結果を可視化して傾向分析するような使い方のほうが使いやすいのかもと思いました。
sitemap.xml をインプットにして、サイトのページのスコアを取得して、Mobileスコア、PCスコアを散布図で出力とかすると、出力ページの特性、構造で点数の出方に偏りがわかったりするかもしれないと思いました。
以上です。
コメント