ページ単体の評価であればChromeの拡張を利用したり、Chrome Devtoolsのauditを利用することで評価結果を見ることができますが、特定のURLリストについて片っ端に調べるとなると骨が折れます。
今回はnpmのlighthouse-batchを利用してみました。
lighthouse-batchを利用することでnpmのページにあるこれで一発で取得可能です。
lighthouse-batch -f sites.txtsites.txtに改行区切りでURLのリストを入れておくだけで、あとは自動的に順番にチェックが走っていきます。
デフォルトでは出力データはjsonになります。
ファイルは report > lighthouse あたりに置かれていく事になるでしょう。
.
├── readme.md
├── report
│ └── lighthouse
│ └── __URL__.report.json
└── sites.txt
jsonファイルは各指定したURLに対応するものとは別に summary.json が出力されます。
summaryには全URLのスコアデータのみが載っており詳細は個別のjsonファイルを見ることとなりますが、summaryをBigQueryへ格納する場合のschemaはこんな感じで良いかと。雑ですがdetailだけ繰り返し無しのrecordで。
[
{
"name": "url",
"type": "string"
},
{
"name": "name",
"type": "string"
},
{
"name": "file",
"type": "string"
},
{
"name": "score",
"type": "float"
},
{
"name": "detail",
"type": "record",
"fields": [
{
"name": "performance",
"type": "float"
},
{
"name": "accessibility",
"type": "float"
},
{
"name": "best_practices",
"type": "float"
},
{
"name": "seo",
"type": "float"
},
{
"name": "pwa",
"type": "float"
}
]
}
]
summary.jsonは1行1URLとなるように少し修正して、こんなフォーマットへ変換。
{"url":"https://www.google.com/","name":"www_google_com_","file":"www_google_com_.report.json","score":"0.70","detail":{"performance":0.47,"accessibility":0.93,"best_practices":0.79,"seo":0.99,"pwa":0.3}}
{"url":"https://www.google.com/","name":"www_google_com_","file":"www_google_com_.report.json","score":"0.70","detail":{"performance":0.47,"accessibility":0.93,"best_practices":0.79,"seo":0.99,"pwa":0.3}}
URL等はダミーです。1行1レコードになるので改行区切りで。カンマとか不要なものは取り除きます。もっと簡単なimportも可能なんだろうとは思いますが｡
そのままbq loadします。
bq load --source_format=NEWLINE_DELIMITED_JSON mydataset.mytable summary.jsonでsummaryのimportは終わりです。( mydataset.mytable の部分はBigqueryに用意したテーブルへ変換が必要)
今は個別のjsonは一旦GCSへ格納してしまっているのでsummaryでスコアを見て気になったページのレポートをGCSへ見に行くという行動をしているのですが、個別のjsonもBigqueryのテーブルに突っ込むというのもありなんだろうと思います。(summary.jsonのfileというのが詳細レポートのファイル名になっています)
ちなみにローカルにあるlighthouseレポートのjsonはviewerが用意されているので、ここで見るのが一番良さそう。
Lighthouse Report Viewer
たまにウェブサイトの健康診断の意味でも主要ページはlighthouseで確認をしたいところですね。
