[Lighthouse] 手軽にサイト流入からCV導線までのパフォーマンスを一覧化できるCLIを作った

これは Recruit Engineers Advent Calendar 2021 の 12日目の記事です。
Lighthouse user flowsの発表を受けて、手軽にサイト流入からCV導線までの各画面のパフォーマンス計測結果をレポートを生成できたら面白いかなと思いlighthouse-flows-generatorというCLIを作ってみました。

[今回作成したCLIで生成したもの]

Lighthouse user flowsとは

今回作成してツールと関係無い部分もあるのですが、Lighthouse user flow APIにも軽く触れておきます。
Lighthouse user flow APIはLighthouse 9.0から追加されました。
user flow APIは下記のようにページの読み込み速度だけでなく、ユーザーの画面操作時のパフォーマンスなど、実際のユーザーが体験していることをより正確に把握することができるAPIです。

従来のLighthouseと比べて下記観点でパフォーマンスの計測が可能になりました。

• 画面操作時のパフォーマンス
• コールドキャッシュだけでなくウォームキャッシュを使用した場合のパフォーマンス
• サービスワーカーがアクティブ化されているページのパフォーマンス
  

lighthouse-flows-generatorを作った背景

自分の携わっているプロダクトでは、サイトの各画面のパフォーマンスを定期的に計測し、リリース影響で劣化がないことを週次でモニタリングする活動をしています。（詳細はこちら）

各画面のパフォーマンスはモニタリングできているのですが、サイト流入→CVするまでの一連の流れのパフォーマンスが追いにくい状態だったため、Lighthouse user flowsのViewerを活用して可視化してみることにしてみました。

使い方

ソースコードはこちら
CLIをインストール後、下記のいずれかの方法で実行すると、成果物のHTMLが出力されます。

インストール方法

$ npm install -g lighthouse-flows-generator

使い方1 Lighthouseの計測結果(JSON)を指定する

lighthouseの実行結果（JSON）をしたいした場合、それらをマージしてレポートを生成します。

$ lighthouse-flows-generator generate --files "./1.json" --files "./2.json"  --files "./3.json"

使い方2 計測対象のURLを指定する

urlを指定した場合、このURLのパフォーマンスを計測しレポートを生成します。

$ lighthouse-flows-generator generate --urls "https://web.dev/" --urls "https://web.dev/blog/"  --urls "https://web.dev/compat2021-holiday-update/"

最後に

他の機能追加案件と比較して優先度が下がりがちなパフォーマンス改善ですが、Google検索の結果にCore Web Vitalsの評価が加味されるなど、事業的なインパクトもわかりやすく大きくなりつつあります。
継続的にサイトのパフォーマンスをモニタリングし、維持改善していきましょう。