2021-02-16

AutoWebPerf を使って Core Web Vitals の値を計測する

Core Web Vitals の値を定期的に計測する方法の一つとして AutoWebPerf を知ったので試してみた。

Automating audits with AutoWebPerf
https://web.dev/autowebperf/

GoogleChromeLabs/AutoWebPerf を見ながら試してみていたが、「AutoWebPerf で CoreWebVitals を計測する」を読めば大体やる手順はわかりそう。

Core Web Vitalsの値を確認するときに、何を使って計測して、どう改善していくか？というのはあるのだけど。
手元の Lighthouse で計測して、修正、確認するというのでも良いといえば良いが、その状況を共有できるようにしておく必要があるだろうし。

GAに連携するようにしてみたり、別のサービスと連携してみたりするのも、定期的に確認できるようにしたり、誰でも見れるように準備しておく必要がありそうだな、と。

改善すること自体は before / after を見れば改善度合いがわかる話だけど、運用されてるサイトであれば自動的に計測されていて、状況を各自が都度確認できるようになってた方がいいよなぁと。

運用している内容がどう影響与えていそうかを意識していくことにも繫がるだろうし。

SpreadSheet をつかって AutoWebPerf の設定をする

AutoWebPerf はどのページを対象に計測するか？の設定方法が色々選択できるのがありがたい。
SpreadSheetで設定できそうなので、これで設定をしてみる。

AutoWebPerf/sheets-connector.md at stable · GoogleChromeLabs/AutoWebPerf
https://github.com/GoogleChrom...

まずはここにある手順で、リポジトリ clone してきて、 npm install してローカルで動くのを確認しておく。

GoogleChromeLabs/AutoWebPerf
https://github.com/GoogleChrom...

Google Service Account でアカウントを作成して、計測用に作成した SpreadSheet をそのアカウントに編集できるように共有する。

Tests-PSI , Results-PSI のシートを用意して、Test のシートに設定を書いておく。

20210215 0506

Google Sheets API を有効にしておく。
SpreadSheetのURLのうち /d/HOGEHOGE/edit のHOGEHOGEのところがIDになる。

Service Accounts のページから credentials （ service-account.json ）を落としておき、npm install したところの tmp ディレクトリに保存しておく。

今回、 PageSpeed InsightsのAPIを使ってみることにしたので、APIキーを取得しておく。

PageSpeed Insights API を使ってみる | Google Developers
https://developers.google.com/...

ひとまずこの状態で、

SERVICE_ACCOUNT_CREDENTIALS=./tmp/service-account.json PSI_APIKEY=FUGAFUGA ./awp run sheets:HOGEHOGE/Tests-PSI sheets:HOGEHOGE/Results-PSI

こんな感じで実行することで、SpreadSheetに計測データがはいってくる。

20210215 0521

モバイルでの計測を確認したかったので、Tests-PSI のシートに psi.settings.strategy の列を追加して、 mobile を指定しておいた。
PageSpeed Insights の値を見比べていて、多分これであってそうな気がするが。

参考