🎉

Lighthouse計測自動化をGitHub Actionsを利用してやってみた！

2023/02/06に公開

『コミット単位でWebサイトのパフォーマンスを計測出来るLighthouse CIを使ってみた』（SMARTCAMP Engineer Blog）の内容を参考に、試してみたです。
今回は、既存のリポジトリ（自分がまとめたWebアクセシビリティのドキュメント。Vuepressで作ってる）を使ってチャレンジ。

1.ファイルの作成

リポジトリのルート直下に.github/workflows/lineghthouse-ci.ymlを作成。
このYAMLファイルに、Lighthouseを動かすための記述を書いていく。

name: Build project and Run Lighthouse CI
on:
  push:
    branches:
      - development
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12.13.1
        uses: actions/setup-node@v1
        with:
          node-version: 12.13.1
      - name: npm install, build
        run: |
          npm install
          npm run build
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.4.x
          lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=./src/.vuepress/dist || echo "Lighthouse CI failed!"

参考記事と違う箇所は、2点

Lighthouse CIを動かすタイミング（今回は、開発ブランチ［development］に更新内容がプッシュされたら動くようにした）
nodeのバージョン（開発環境ではv12.13.1だったので、同じものを仕様）
Lighthouse CIのコマンド（参考記事のものだと動かなかったので直した）

ファイルを作ったら、コミット＆プッシュ

最初に追加したときは、問題なくSourcetreeの履歴にあがってたんだけど、更新しだしてから上がらなくなってしまい、仕方ないのでGitコマンド叩いて追加してました(ヽ´ω`)
（.gitignoreに書いてるわけでもないんだけどなー。コマンド叩かなくても大丈夫な方法ないのかなー。）

$ git add .github/workflows/lighthouse-ci.yml

自分的メモ

計測回数を指定できるので、Chromeの拡張機能とか開発者ツール使ってぽちぽちしなくていいの楽
--collect.url=https://sample.comみたいにすると、該当ドメインのページを調べてくれる
- ただし、国外IPフィルタリングみたいなIP制限かけてると403エラー出ちゃうので注意
特に何も指定がないと、ルートディレクトリから計測するが、puppeteerを使えば、ほしいページを調べられる？

参考サイトたち

GitHubで編集を提案