lighthouse-batchを利用したURLリストに対するlighthouse実行メモ

Google Lighthouseはウェブサイト・ウェブアプリの品質向上に役立つツールで、ページスピードやSEO、PWAなど実装について計測、評価、アドバイスをもらうことができます。

ページ単体の評価であればChromeの拡張を利用したり、Chrome Devtoolsのauditを利用することで評価結果を見ることができますが、特定のURLリストについて片っ端に調べるとなると骨が折れます。

今回はnpmのlighthouse-batchを利用してみました。
lighthouse-batchを利用することでnpmのページにあるこれで一発で取得可能です。

lighthouse-batch -f sites.txt

sites.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で確認をしたいところですね。