【Google Chrome】Webの性能やセキュリティなどをまとめて検証する（Lighthouse編）：Google Chrome完全ガイド
Webページ／アプリの表示速度やセキュリティ、アクセシビリティといった項目を手軽に検証できる無償ツール「Lighthouse」を、Google Chrome上で実用的に使う方法と注意点について説明します。
■記事内目次
Webページ／アプリの性能やセキュリティなどをまとめて手軽に検証したい
WebサイトやWebアプリの開発や運用に携わっていると、表示速度やセキュリティ、アクセシビリティなどを第三者の視点でチェックしたくなることがよくあります。
とはいっても、むやみにコストは費やせません。また、よく利用するなら手軽に実行できると便利です。
そこで本稿では、Google Chrome（以下、Chromeと略）で無償利用できるWebページ／アプリの検証・監査・分析ツール「Lighthouse」を紹介し、その使い方や注意点を説明します。
Lighthouseとは？
Lighthouseとは、WebページやWebアプリを検証・監査・分析するソフトウェアツールの一種です。そのプログラムソースコードはGitHubで公開されており、無償で利用できます。
Lighthouseは次の5種類の項目を検証できます。
| 項目名 | 検証内容 |
|---|---|
| Performance | ページ表示にかかる時間（速度）を検証。画像やCSS、JavaScript、フォントなど表示を遅くする要素について検証結果と改善方法を提示 |
| Accessibility | 文字色のコントラストなど、Webページのアクセシビリティを検証 |
| Best Practices | 表示速度やセキュリティ、アクセシビリティなど全般にわたって改善点を提示 |
| SEO | 検索エンジン最適化で基本的な項目を検証 |
| Progressive Web App | PWAの仕様に合致しているか検証 |
| Lighthouseの5種類の検証項目 | |
ChromeでLighthouseを利用する場合、これら複数の検証項目を2クリック程度で簡単に実行できます。
●Lighthouseの2種類の実行方法
Lighthouseには複数の実行形態があります（GUIの他、コマンドラインでも実行可能）。このうちChromeのGUIから利用できるものとしては「拡張機能版」と「デベロッパーツール版」の2種類があります。以下に両者の違いを記します。
| 拡張機能版 | デベロッパーツール版 | |
|---|---|---|
| インストール | 必要 | 不要（Chrome標準装備） |
| 表示言語 | 英語（Chromeによる翻訳が可能） | 英語（Chromeによる翻訳は不可） |
| エミュレートできるクライアント（表示モード） | モバイルのみ（デスクトップは不可） | モバイルとデスクトップの両方 |
| バージョン | 比較的新しい | 拡張機能版より古い場合がある |
| Chrome向けLighthouseの拡張機能版とデベロッパーツール版との違い | ||
どちらも表示内容は英語表記で、しかも技術用語が多く、難解な場合があります。ただ拡張機能版では、その検証結果をGoogle翻訳で簡単に日本語へ翻訳できます。そこで本稿では、まず拡張機能版の使い方を説明しつつ、デベロッパーツール版でしかできないデスクトップ（PC）表示での検証方法について補足します。
拡張機能版LighthouseをChromeにインストールする
拡張機能版Lighthouseを利用するには、まず以下のChromeウェブストア内の配布ページをChromeで開きます。
- Chrome拡張機能「Lighthouse」の配布ページ（chromeウェブストア）
次に［Chromeに追加］ボタンをクリックします。ダイアログが表示されたら、この拡張機能が必要とする権限を確認してから、［拡張機能を追加］ボタンをクリックします。
するとChromeのウィンドウ右上のツールバーにLighthouseのアイコンが追加されるはずです。これでインストールは完了です。
拡張機能版LighthouseでWebページを検証する
まず検証したいWebページを開いてから、ツールバーのLighthouseアイコンをクリックし、表示されたダイアログにある［Generate report］ボタンを押してみましょう（幾つかあるオプションについては後述します）。
するとLighthouseは、Androidスマートフォンをエミュレートしたモバイル表示モードに切り替えてから、対象ページの検証を実行します。
すると、新たなChromeのウィンドウが作成され、そこに検証結果が表示されます。冒頭に表示されている点数は、前述した5種類の検証項目ごとの得点で、100点が満点です。それぞれの点数をクリックすると、どういった理由で減点されたのか、どうすれば改善できるのか、といった検証結果の詳細が表示されます。
ここでブラウザペインの空白部分を右クリックして、表示されたメニューで［日本語に翻訳］を選ぶと、検証結果が英語から日本語へ翻訳されます。
減点の原因とその改善方法については、「Learn more」リンクをクリックすると、その詳細を解説したGoogle Developerのページが表示されます。
●検証項目を絞り込む
5種類の項目のうち、必要な項目だけテストしたい場合は、ツールバーのLighthouseアイコンをクリックして表示されるダイアログで、［Options］ボタンをクリックし、表示されたチェックボックスで不要な項目のチェックを外してオフにします。
デスクトップ（PC）表示を検証するならデベロッパーツール版を使う
前述の通り、拡張機能版Lighthouseではモバイル（スマートフォン）表示しか検証できません。デスクトップ（PC）表示を検証するには、Chromeのデベロッパーツールに組み込まれているLighthouseを利用します。
それにはまず対象ページを開いてから、次のショートカットキーでデベロッパーツールを起動します。
- Windows OS： ［F12］キーまたは［Ctrl］＋［Shift］＋［I］キー
- macOS： ［command］＋［option］＋［I］キー
デベロッパーツールのウィンドウが表示されたら、［Audits］タブを選択し、［Desktop］ラジオボタンを選択してから［Run audits］ボタンを押します。
Copyright© Digital Advantage Corp. All Rights Reserved.