Webページを簡単な設定で評価してくれる Lighthouse CI を試してみた
西田@大阪です
以前 v-kansai Vue.js/Nuxt.js meetup #13 に参加させていただいた時に気になっていた Lighthouse CIを試してみました
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.targetにtemporary-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/[email protected]
- 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 するとエラーになり、こちらも実行結果のレポートのリンクが生成されています
さいごに
簡単な設定でサイトの評価を行ってくれ、だめだったポイントとその対策のヒントのページを教えてくれるなど、いたれりつくせりなツールです。この記事が誰かの参考になれば幸いです
参考
[Nuxt.jsのSPAサイトにLighthouse CIをCircleCIで実行する - Qiita](
