コミット単位でWebサイトのパフォーマンスを計測出来るLighthouse CIを使ってみた

こんにちは、スマートキャンプのエンジニア中川です。

本記事は「スマートキャンプ Advent Calendar 2019 - Qiita」の2日目の記事になります。

突然ですがみなさん、Webサイトのパフォーマンス計測はお好きですか？

好き嫌いはさておき、私は以下のような課題感を前々から持っていました。

• 顕在化してきたタイミングで問題となる
  • いつパフォーマンスが悪化したのか、継続して悪化し続けているのかなど、情報量がすくない状態から対応をはじめなければならない
  • 調査が長くつらいものになる
• なぜパフォーマンスが悪いのかわからない
  • ある特定のコミットで著しく悪化したのか？どういう変更をするとスコアが遅くなりがちなのか？など知見が貯まらない

どれもあるあるな悩みかと思いますが、タイムラインをチェックしていたところたまたまLighthouse CIの存在を知り、これらの課題を解決出来そうだったので試してみました！

The new Lighthouse CI automates checking web performance & best practices on each commit! https://t.co/WrWUAM0eHk

✅ Free & helps prevent regressions
✅ Offers a new Diff View between reports
✅ Available as a GitHub Action

Made with ♥️ from our team @____lighthouse pic.twitter.com/reYXBGUFzC

— Addy Osmani (@addyosmani) November 28, 2019

本記事はハンズオン形式で実際にリポジトリを作成するところからReactアプリケーションを作成・プッシュすることでGithub Actionsを経由してLighthouse CIによるパフォーマンス計測を実行してみる、といったものになります。

※ 本記事ではGithub Actionsを使用していますが、Circle CI, Travis CIなどその他のCIツールも同様に利用出来ます。
詳しくは以下URLのCollect Lighthouse Resultsの項目を参照してください。
lighthouse-ci/getting-started.md at master · GoogleChrome/lighthouse-ci · GitHub

Lighthouseとは

まずはLighthouseについて簡単な説明です。
LighthouseとはWebサイトのパフォーマンスや品質を計測するツールで、コマンドラインツールもしくはChromeの拡張機能として提供されています。

WebサイトのURLを指定することで、Performance, Accessibility, Best Practices, SEOの5つの観点からそれぞれ100点満点として採点されたレポートを生成することができます。

以前弊社の井上が点数を上げる方法について書いた記事もありますので、よければ目を通してください！

tech.smartcamp.co.jp

Chromeの拡張機能は簡単に試すことが出来ますので、まだ一度も触ったことが無い方は以降の段落に進む前に一度触っておくことをオススメします。

Lighthouse CIとは

その名の通り前述のLighthouseをCI実行のタイミングでトリガーさせることが出来るツールです。
Circle CI, Travis CI, Github Actions, GitLab CI, Jenkinsなど、多様なCIに対応しています。

使ってみる

まずはリポジトリを用意しましょう。

今回はlighthouse-ci-tutorialとしました。

次にローカル環境でreactアプリケーションを作成します。

以下のコマンドはreactアプリケーションの雛形をnpx経由で作成するコマンドです。（本記事の趣旨と異なるため細かな説明は割愛します。）

npx create-react-app

実行が完了したら念の為動作確認しておきます。

yarn global add serve
serve -s build

動作確認が出来たらリポジトリにプッシュしておきます。

git remote add origin https://github.com/hogehoge/lighthouse-ci-tutorial.git
git push -u origin master

さて、これでリポジトリにはビルドが出来るreactアプリケーションのソースコードが存在するようになりました。

Github Actionsを導入する

次に、このリポジトリにプッシュするたびにLighthouse CIが実行されるようにGithub Actionsを導入していきます。

導入方法としては、Githubのブラウザ上からGUIで設定ファイルを編集する方法、もしくは手作業で設定ファイルをリポジトリ内の所定の階層に配置する方法があるのですが、今回は手作業で設定ファイルを配置します。

さっそくですが、以下が今回使用する設定のymlです。

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

このymlを.github/workflows/lighthouse-ci.ymlとしてリポジトリ配下に配置して、プッシュしてください。

以上で準備は整いました！
Github上の該当リポジトリを見てみましょう！

Actionsタブを選択してworkflowの一覧ページに進みます。

一覧から最新のworkflowをクリックし詳細ページに進みます。
（ymlを特に変更していない場合、タイトルはBuild project and Run Lighthouse CIとなっているかと思います。）

各タスクが順番に実行されていき、run Lighthouse CIのタスクでLighthouseによるパフォーマンス計測が実行されます。

また、デフォルトの設定では3回実行されるようです。（スコアは毎回変動するため平均値をとるためかと思われます。）

キャプチャのログ部分が小さくて見づらいですが、24行目にOpen the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1575204293240-46048.report.htmlとあります。

どうやら今回の実行結果のレポートがLighthouseプロジェクト共有の一時ストレージに保存されているみたいです。太っ腹ですね。

さっそくURLにアクセスして確認してみます。

問題なくLighthouseの実行結果レポートが表示されましたね！

実行結果のスコアがめちゃくちゃ優秀なので一瞬腰が浮きますが、雛形プロジェクトだったことを思い出して落ち着きました。
表示は特に問題なさそうですね。

以上で今回のハンズオンは終了です！お疲れ様でした！

所感

ハンズオンで試してみたことで、Lighthouse CIの一端に触れることが出来ました。

今回紹介しきれなかった機能が多くありますので、気になった方はぜひ一度公式のGetting Startedページを読んでみてはいかがでしょうか。

個人的には、以下の部分を作り込むことで実際のプロダクションでも強力な武器になりうると感じました。

• Lighthouse CI Serverを自前で用意することで、実行結果のレポートを履歴として溜め込んだり、コミット同士のスコアを比較する機能
  • The Lighthouse CI Server
• Github Status Checks対応による実行結果レポートのGithub上表示
• Assertionを定義出来る機能
  • lighthouse-ci/assertions.md · GitHub
  • たとえばPerformanceが60点以下の場合にerrorを出したり、first-contentful-paintに2000ms以上かかっている場合warnを出すなどできる
  • 前述のGithub Status Checksと組み合わせることで、Github上で簡単にLighthouseの主要な項目の変化を確認できるようになり、また、フロントエンドのパフォーマンス悪化をデプロイ前に防ぐことができる

Lighthouse CIを使って日頃からフロントエンドのパフォーマンスを計測することで、常にユーザーの使い勝手がよいものを届けていきたいですね！

以上、「コミット単位でWebサイトのパフォーマンスを計測出来るLighthouse CIを使ってみた」でした！

明日は弊社エンジニアのナウリバさんによる「スマートキャンプエンジニアの開発環境の話」です！おたのしみに！