Lighthouseを使ってウェブサイトのパフォーマンスを計測する方法
みす夫です。
ウェブサイトの速度を計測するPageSpeed Insightsよりもさらに詳しく修正箇所を教えてくれるLighthouseを紹介します。
Lighthouseとは？
Lighthouseはグーグルが提供する、オープンソースのデベロッパーツールです。ウェブページの品質を向上させるのに役立ちます。
Lighthouseを使うことで、ウェブページのパフォーマンスやアクセシビリティ、プログレッシブ ウェブアプリ（PWA）への対応度、ベストプラクティス（効率的な手法の適用度）などをチェックすることができます。また、修正方法についても提示してくれます。
Lighthouseの使い方
Lighthouseを利用するには、Google Chromeがコンピュータにインストールされている必要があります。
方法１：ChromeのデベロッパーツールからLighthouseを起動する
1. Google Chromeで、検証したいウェブページへ移動する。（自分のサイトでなくてもOK）
2. デベロッパーツールを開く（右クリック→Inspect）
3. Auditsタブを開く（下の画像だと右上の部分）
4. Run audits をクリック
実行結果
するとこんな感じでウェブサイトのパフォーマンスを表示してくれます。この方法の良いところは、Chromeさえあれば他にインストールしたりする必要がないところです。
方法２：LighthouseのChrome Extensionをインストールする
Lighthouse Chrome Extension をChrome Webstoreからインストールします。機能としては、デベロッパーツールから起動する方法と同じです。公式の見解として、特別な理由がない限りはこの方法は推奨されていません。
方法３：コマンドラインからLighthouseを起動する
1. Long-Term Support (LTS)版のNodeをインストールする。
2. ターミナルを起動、以下のコマンドでLighthouseをインストールする。
npm install -g lighthouse
エラーが出てLighthouseがインストールできなかった場合は、管理者権限でコマンドを実行してみてください。
sudo npm install -g lighthouse
3. 以下のコマンドでLighthouseを起動
lighthouse https://調べるサイトのURL --view
--viewをつけて実行することで、下の画像のように結果がHTML形式で表示されます。
Nodeモジュールを使用することで、自動的にLighthouseを走らせることができるようです。
Run the Node module programmatically
See Using programmatically for an example of running Lighthouse programmatically, as a Node module.
参考リンク：
Lighthouse によるウェブアプリの監査 – Google Developers
（ちなみに英語版のページの方が情報が多いです。デベロッパーの方は英語ページを参照した方が良さそう）
About Author
