Page Speed Insights の
Page Speed Insight の
[TOC]
作成した スクリプト
kemsakurai/Page-Speed-Score-metric に
スプレッドシート 1行あたり、
前回作成時からの 変更点に ついて
前回作成した
ページの
統計情報を 取得項目と して 追加した。 4分経過後に
再実行する ため、 スクリプトトリガーを 登録するようにした。 API を
v2 から v4 に 変更、 指定パラメータと 結果取得項目を 変更した。
v2 と v4 の 変更点に ついて
以下、
* リリースノート | PageSpeed Insights | Google Developers
v2 は、
API の
strategy mobile で API実行時に、 USABILITY スコア が 返却されなくなった
v2 では、
これは、
USABILITY 評価に
About the API | URL Testing Tools API (Experimental) | Google Developers
ただ、URL Testing Tools API (Experimental)
は、MOBILE_FRIENDLY
か
統計情報の 戻り値が 追加された
API の
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 で
API の 入力パラメータに Google Analytics の キャンペーンパラメータが 追加された
v2 にも
utm_source
と、utm_campaign
を
フィルタ設定で
スクリプトで 取得する 統計情報に ついて
loadingExperience
をpageStats
に
pageStats
に
使い方
スプレッドシートの 準備
シート名 config
で
Key には、
Urls には、
SheetName には、
スクリプト実行の 事前準備
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
グラフでの 可視化方法
取得できる
Mobile ページ、
PC ページの スコア時系列グラフ
スコアを時系列グラフを 表示して、 リリースタイミングでの 変化を 監視、 記録する。 Resource 数の
積み上げ 時系列グラフ、 または、 積み上げ棒グラフ
Resource 数はカテゴリごとに 取得できるので、 その カテゴリごとの 時系列と、 合計を 示すための 積み上げを 設定、 または、 numberResource
が合計リソース数を 示すので、 それを 使うでもよいかもしれません。 Response バイト数の
積み上げ 時系列グラフ、 または、 積み上げ 棒棒グラフ
Responseバイト数も カテゴリごとに 取得が できます。 Resource数と 同様の 描画で いい 感じになりそうに 思います。 RoundTrip数の
時系列グラフ
numTotalRoundTrips
とnumRenderBlockingRoundTrips
が取得できます。
2つだけなので、それぞれ 時系列で 表示するのが よいように 思います。
時系列での 記録は そこまで 有用ではない?
時系列でしばらく
どちらかと
sitemap.xml を
以上です。
コメント