Puppeteer + Lighthouse + GitHub Actions を使って Web アプリのフロントエンドパフォーマンスを定期計測するプロジェクトを作ってみたら良い感じだったので紹介です。 何を作った? このように GitHub Actions 上で 認証付きの Web アプリに対して Puppeteer 介し Lighthouse を定期実行し、結果を Datadog に送信するプロジェクトを作りました。 実際にそのプロジェクトの計測値を使った Datadog のダッシュボードはこちらです。 Webperf の主要指標をページ別に時系列で表示しています。 サンプルプロジェクトはこちらにあります。 以降で実装について簡単に解説します。 Puppeteer + Lighthouse によるパフォーマンス計測 Puppeteer + Lighthouse によるパフォーマンス計測
![Puppeteer +Lighthouse +GitHubActionsで認証付きWebアプリのWebperfを定期計測](https://cdn-ak-scissors.b.st-hatena.com/image/square/e069aa7400654292af5e6dbe510f2451eb743050/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--1gk738JS--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3APuppeteer%252520%25252BLighthouse%252520%25252BGitHubActions%2525E3%252581%2525A7%2525E8%2525AA%25258D%2525E8%2525A8%2525BC%2525E4%2525BB%252598%2525E3%252581%25258DWeb%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%2525E3%252581%2525AEWebperf%2525E3%252582%252592%2525E5%2525AE%25259A%2525E6%25259C%25259F%2525E8%2525A8%252588%2525E6%2525B8%2525AC%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aryo_kawamata%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU2N2NiMTI0ZWYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)