Webページを簡単な設定で評価してくれる Lighthouse CI を試してみた

2020.01.30

西田@大阪です

以前 v-kansai Vue.js/Nuxt.js meetup #13 に参加させていただいた時に気になっていた Lighthouse CIを試してみました

GoogleChrome/lighthouse-ci: Automate running Lighthouse for every commit, viewing the changes, and preventing regressions

Lighthouseとは?

Google が提供しているWebページを以下の指標で評価してくれるサービスです

  • パフォーマンス
  • アクセシビリティ
  • ベストプラクティス
  • SEO

評価に加え具体的な指摘点とその対策の情報を教えてくれます

Chrome Plugin で使ってみる

Lighthouse - Chrome ウェブストア より Chrome Plugin をインストールします。インストールすると Chromeメニューにアイコンが表示されます

この状態で評価したいページを Chrome で表示し、アイコンをクリックし、「Generate report」ボタンを押します。するとしばらくたって評価ページが表示されます

具体的な指摘事項も見ることができます。下記はアクセシビリティの項目で、背景色とテキストカラーのコンストラストが弱くみえにくい可能性があると指摘されています

指摘事項をクリックして展開すると、具体的にどの要素なのかと、解決策のヒントになるWebページへのリンクを確認することができます

Vue.js でつかってみる

Lighthouse CI のコマンドをインストールします

npm install -g @lhci/cli

Vue.jsのプロジェクトを作成します

vue create vue-lighthouse-ci

次に Lighthouse の設定ファイルを記述します。設定ファイルはJSON、YAML、JSと形式が選べますが、プログラマブルに設定することができるJS形式で記述していきます

cd vue-lighthouse-ci
vim lighthouserc.js

基本は lighthouse-ci/getting-started.md at master · GoogleChrome/lighthouse-ci にあるコンフィグにいくつか項目を追加します

lighthouserc.js

module.exports = {
  ci: {
    collect: {
      numberOfRuns: 1,
      staticDistDir: "./dist",
      url: [
        "/"
      ]
    },
    "assert": {
      "preset": "lighthouse:no-pwa",
      "assertions": {
        "offscreen-images": "off",
        "uses-webp-images": "off"
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}
  • collect.numberOfRuns は実行する回数です。実行回数が多ければ多いほどブレが少なくなっていきますが、一回あたりの実行時間が長いため、今回は1回のみ実行するように設定しています
  • collect.staticDistDir にVueがビルドして生成されたファイルが置かれる distフォルダを指定します。これを指定することで、ビルドされた静的ファイルを使って自動でサーバーを起動し評価を行ってくれるようになります
  • collect.urlに評価対象のパスを指定します。こちらも数が増えればその分時間がかかるようになります
  • upload.targettemporary-public-storage を指定しています。この設定で評価結果が自動でLighthouseの公開一時保存領域にアップロードされます

設定ファイルを作成後一度 Vue のファイルをビルドします

$ yarn build

Lighthouseを実行します

$ lhci autorun

出力の最後の方にレポートページへのリンクがあるので開いてみます

Uploading median LHR of http://localhost:62635/...success!                                                                                                                                                        
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/xxxx.report.html

プロジェクトを生成した初期状態でもSEOの点数が少しだけわるくなっています。スクロールし指摘事項を確認すると

Meta データの description 情報が無いと指摘されています。public/index.htmlを開いて Meta タグを追加してみます

<meta name="Description" content="Put your description here.">

コードを変更したら、再び静的ファイルをビルドし、Lighthouseを実行します

$ yarn build
$ lhci autorun

SEOの項目が改善されているのが確認できます

Circle CI で動かしてみる

getting-started にある、CircleCIのサンプルを使ってCircle CI上で動かしてみます

https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#collect-lighthouse-results

.circleci/config.yml

version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:10.16-browsers
    steps:
      - checkout
      - run: yarn install
      - run: yarn build
      - run: yarn global add @lhci/cli@0.3.x
      - run:
          name: lhci autorun
          command: lhci autorun

サンプルから以下の点を編集しております

  • npm => yarn に変更
  • lchi autorunのあとの失敗した時に実行される echo コマンドを削除

また、いくつか指摘点があり、Vueのcreate時の状態だと lhci autorun が失敗するので src/components/HellowWorld.vueの以下の修正してます

  • リンクのコントラストが足りないので文字色を濃くする
  • クリッカブル領域が小さいので広げる
a {
  padding: 20px;
  color: #018642;
}

この時点でgithubにpushすると、CircleCIが起動し、lhci autorunが実行され、実行結果のレポートのリンクが生成されています

先程追加した paddingの記述を削って再度 Github に Push するとエラーになり、こちらも実行結果のレポートのリンクが生成されています

さいごに

簡単な設定でサイトの評価を行ってくれ、だめだったポイントとその対策のヒントのページを教えてくれるなど、いたれりつくせりなツールです。この記事が誰かの参考になれば幸いです

参考

GoogleChrome/lighthouse-ci: Automate running Lighthouse for every commit, viewing the changes, and preventing regressions

[Nuxt.jsのSPAサイトにLighthouse CIをCircleCIで実行する - Qiita](