lighthouseとは
lighthouseというWebアプリケーション解析ツールについて調査したので整理します。なお、versionは2.9.4になります。
lighthouseとは
lighthouseとは、Google製のWebアプリケーションを解析するツールで、以下の5つの指標でスコアが算出されます
- Performance
- Progressive Web App
- Accessibility
- Best Practices
- SEO
各項目のスコア値は、いくつかの計測項目の値を元に算出されています。
計測項目については下記を参照してください。
Lighthouse v3 Score Weighting [MAKE YOUR OWN COPY] - Google Sheets
インストール方法
２つのインストール方法があります。
- Google chromeをインストールする(Google Chromeに標準で入っています)
- npmかyarnを用いてインストールする
$ npm i -g lighthouse
使い方
ここではCLIでの使い方についてのみ明記します
インストールが完了したらターミナルなどを用いて、以下のコマンドを実行してみてください。
$ lighthouse https://www.yahoo.co.jp/
このコマンドを実行すると、ブラウザが立ち上がり自動でhttps://www.yahoo.co.jp/にアクセスされると思います。 また、アクセスと同時にYahoo! Japanのスマホ用のページが表示されると思います。なぜこのようになるかには後に説明します。ターミナルの最後に下のような出力とともに、レポートの結果がhtmlとして作られていると思います。
このファイルをブラウザなどで開いてみてください。
Printer html output written to /******/******/******/*****/******/m.yahoo.co.jp_2018-06-02_15-39-09.report.html +210ms
$ open -a "/Applications/Google Chrome.app" ./m.yahoo.co.jp_*.report.html
上の様な結果が見れると思います。このようにして、アプリケーションの品質チェックを行う事ができます。
また、チェックと同時にブラウザで内容を確認したい場合は、下のようにviewオプションをつけると実行と共に結果を確認することができます。
$ lighthouse https://www.yahoo.co.jp/ --view
ここで、なぜかスマホ用のページが表示されたかについて確認していきたいと思います。
まずは、ページ上部にRuntime settingsという文字があるのでこの文字をクリックしてみてください。 そうすると、下のようなRuntime environmentというものが表示されると思います。
Runtime environmentの名の通り、実行時の環境がここで確認できます。
ここを見ると分かるのですが、lighthouseのコマンドはデフォルトでネットワーク帯域、cpuなどの制限やデバイスのエミュレーション(Nexus 5)が自動で入ります。先程、Yahoo! Japnに普通にアクセスをした際にスマホ用のページが表示されたのは、Nexus 5でのアクセスにエミュレートされていたのが原因でした。
この設定を無くしたい場合は、下のようにdisable~オプションを付与することによって無効化することができます。
$ lighthouse https://www.yahoo.co.jp/ --view --disable-network-throttling --disable-cpu-throttling --disable-device-emulation
この他にも色々と設定ができます。詳細はgithubかhelpオプションで確認できます。
(https://github.com/GoogleChrome/lighthouse#lighthouse-cli-options)
$ lighthouse --help
[GoogleChrome/lighthouse: Auditing, performance metrics, and best practices for Progressive Web Apps]
このように、lighthouseを使えば簡単にウェブアプリケーションの品質をチェックすることができます。今回は、簡単な実行方法までを紹介させていただきました。
次回は、算出されたスコアについてより深く調査していきたいと思います。