Google Cloud Functions で Lighthouse を定点観測します。
データポータルからスプレッドシートに接続し、経過をグラフで可視化できます。
🔭
- Cloud SDK をインストールする
- スプレッドシートを作成する
- Google Cloud Pub/Sub にトピックを作成する
- Google Cloud Scheduler を設定する
- Google Cloud Functions に lighthouse-observer をデプロイする
- データポータルで可視化する
https://cloud.google.com/sdk?hl=ja
スプレッドシートを作成して、スプレッドシートの id を控えておく。
GCP プロジェクトのサービスアカウントに作成したスプレッドシートを共有する。
スプレッドシートには以下の順でヘッダーを作成する。
"fetch_time", "requested_url", "first_contentful_paint", "speed_index", "largest_contentful_paint", "interactive", "total_blocking_time", "cumulative_layout_shift", "first_cpu_idle", "max_potential_fid", "first_meaningful_paint", "estimated_input_latency", "server_response_time", "mainthread_work_breakdown", "bootup_time", "network_server_latency", "performance", "accessibility", "best_practices", "seo", "pwa"
任意の名前でトピックを作成する。
以下の内容でスケジューラーを作成する。
| 設定項目 | 入力内容 |
|---|---|
| 説明 | （任意） |
| 頻度 | （任意） |
| タイムゾーン | （任意） |
| ターゲット | Pub/Sub |
| トピック | 作成したトピック名 |
| ペイロード | 指定の形式で入力（※1） |
{
"targets": [
{
"url": "https://yamap.com", // 計測対象のURL
"sheetName": "top" // 結果を書き込むシートの名前
}
],
"spreadsheetId": "xxxxxxxxxxxxxxxxxx",
"timezone": "Asia/Tokyo"
}# init project
cd ~/your/git/lighthouse-observer
npm ci
npm run transpile
# deploy
gcloud functions deploy runLighthouseObserver --trigger-topic lighthouse-observer --runtime nodejs10 --memory 2048 --region asia-northeast1 --timeout 540 --max-instances 5