AutoWebPerf の計測を定期的に行う

先日の続きで。

AutoWebPerf を使った計測は Mac のローカルで動かしていたが、定期的に動かすためにテスト用のサーバー（Colorfulbox）で動かしてみる。

Colorfulbox に Node.js をインストール

nodebrew使ってColorfulbox(レンタルサーバー)にNode.jsをインストールする - Qiita
https://qiita.com/uwagaki8/ite...

で書かれてた手順で Node.js をインストールする。

$ wget git.io/nodebrew
$ perl nodebrew setup
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc

Node.js のインストールができたので、 AutoWebPerf を npm install しておく。

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

インストールできたら、先日のと同様に

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

で計測ができるのを確認しておく。

cron の設定

設定が問題ないので、 定期的に計測できるように cron の設定をしておく。

cd ~/AutoWebPerf && SERVICE_ACCOUNT_CREDENTIALS=./tmp/service-account.json PSI_APIKEY=FUGAFUGA ~/.nodebrew/current/bin/node ./awp run sheets:HOGEHOGE/Tests-PSI sheets:HOGEHOGE/Results-PSI

node をインストールしたパスをいれるのを忘れないようにする。

cron が実行されてメール通知が来るのも確認できた。

DataStudioで確認できるようにする

データが SpreadSheet にたまるのを確認できたら DataStudio で見れるように設定していく。

AutoWebPerf で CoreWebVitals を計測する
https://zenn.dev/tiwu_dev/arti...

に書いてあるながれで対応する。

AutoWebPerf: Chrome UX Report API Dashboard › CrUX API - Timeseries
https://datastudio.google.com/...

のテンプレートを使って、データソースは作成している SpreadSheetの Results のシートを利用する。

日によっての変動幅が大きいのとかが気にはなるが、もう少し見てみるようにしよう。