Lighthouseとは？チェックできる項目から導入方法・使い方まで
Webアプリ・Webページを公開したものの、思うように利用者数やアクセス数が伸びずに悩んでいるWeb担当者は少なくありません。利用者数やアクセス数に関して悩んでいる人に活用してほしいツールが、Lighthouse（ライトハウス）です。
Lighthouseを使えば、Webアプリ・Webページの問題点がたちどころに分かるため、効率的に品質改善を行えます。
今回は、Lighthouseの概要を解説したうえで、Lighthouseでチェックできる項目や、導入方法と使い方を紹介します。
1.Lighthouseとは
Lighthouseとは、Googleが提供しているオープンソースの評価ツールです。特定のWebアプリ・Webページをチェックし、改善すべき項目を自動でレポートしてくれます。
Lighthouseはもともと、読み込み速度や使い勝手など、Webアプリ・Webページそのものの品質を評価するツールでした。2018年にSEOチェック機能が備わり、Webサイトの管理者のみならず、Webマーケティング担当者にとっても大いに役立つツールに進化しています。また、従来は英語表示のみでしたが、2021年3月のバージョンアップによって日本語表示ができるようになりました。
なお、Lighthouseは日本語に訳すと「灯台」となります。灯台が船にとっての道標であるように、LighthouseもWebアプリ・Webページの運営者にとっての道標となる存在です。
2.Lighthouseでチェックできる項目
Lighthouseでチェックできる項目は、以下に示すとおり、大きく分けて5つあります。
- Performance
- ProgressiveWebApp
- Accessibility
- Best Practices
- SEO
以下より、それぞれの項目について詳しく解説します。
2-1.Performance
Performanceは、CSSやJavaScriptを最適化するうえで押さえるべきWebアプリ・Webページの読み込み速度を評価する項目です。
Performanceでは、以下に挙げる6つの要素をチェックできます。
- First Contentful Paint（FCP）
テキストや画像の表示が開始されるまでにかかる時間です。 - Time to Interactive（TTI）
Webアプリ・Webページを操作できるようになるまでの時間を示します。 - Speed Index
ファーストビューにあるコンテンツがすべて表示されるまでの時間です。 - Total Blocking Time（TBT）
画面タップやマウスクリックなどのユーザー入力をブロックした時間の合計値を指します。 - Largest Contentful Paint（LCP）
最も重要なテキストやコンテンツが表示されるまでにかかる時間です。 - Cumulative Layout Shift（CLS）
ユーザーが予期しないレイアウトの変更を表します。
2-2.ProgressiveWebApp
ProgressiveWebAppは、Webアプリ・Webページのモバイル対応度を評価する項目です。モバイルネットワークでの読み込み速度やWebデザインの柔軟性、クロスブラウザへの対応などがチェックされます。
世界シェアナンバーワンの検索エンジンであるGoogleが、検索順位を決定する際に基準としているものは、スマートフォン向けのWebサイトです。そのため、ProgressiveWebAppの評価はSEO対策にも役立てられるでしょう。
2-3.Accessibility
Accessibilityは、ユーザーがWebアプリ・Webページにあるすべてのコンテンツを閲覧できるかを評価する項目です。HTMLの記述方法や色の設定、背景色と前景色のコントラスト比、言語設定などがチェックされます。
Accessibilityの評価は、ユーザビリティを改善するうえで重要な指標となるでしょう。
2-4.Best Practices
Best Practicesは、Webアプリ・Webページの安全性やパフォーマンスを評価する項目です。HTTPS化やブラウザのエラーコード、画像のアスペクト比などがチェックされます。
Webアプリ・Webページの安全性は、Googleが検索順位を決定する際に重視する要素の1つです。そのため、Best Practicesの評価は、SEO対策としても期待できます。
2-5.SEO
SEOは、Webアプリ・Webページの検索順位を左右する要素を評価する項目です。SEOでチェックされる要素の中で特に重視すべきものとしては、以下の6つが挙げられます。
- Document has a meta description
Webアプリ・Webページの概要を示すメタディスクリプションが設定されていることを示すレポートです。 - Page has successful HTTP status code
HTTPステータスコードにエラーがないことを表します。 - Page isn’t blocked from indexing
検索インデックス登録がブロックされていないことを伝えるレポートです。 - Image elements have［alt］attributes
画像に代替テキストがあることを示します。 - Document uses legible font sizes
読みやすいサイズのフォントが使われていることを表すレポートです。 - Tap targets are sized appropriately
タップする領域のサイズが適切であることを意味します。
3.Lighthouseの導入方法と使い方
Lighthouseは、無料で利用できるツールです。そのため、使い勝手を確かめたうえで、本格的に導入すべきかを決めることができます。
Lighthouseの導入方法は、Chromeの拡張機能から利用する方法と、コマンドラインツールから利用する方法の2種類です。以下より、各導入方法の流れとLighthouseの使い方を説明します。
3-1.Chromeの拡張機能から利用する方法
日本語版のLighthouseをGoogle Chromeの拡張機能で導入する手順は、以下のとおりです。
| 1 | Google Chrome 89以降をダウンロードし、立ち上げる。 |
|---|---|
| 2 | ChromeウェブストアにあるLighthouseのChrome拡張機能追加ページにアクセスする。 |
| 3 | ページ右上にある〈Chromeに追加〉をクリックする。 |
| 4 | 表示されるダイアログボックスの〈拡張機能を追加〉をクリックする。 |
続いて、以下の手順を踏んでLighthouseを利用しましょう。
| 1 | 診断したいWebアプリ・Webページにアクセスする。 |
|---|---|
| 2 | Google Chromeツールバーの右側にあるLighthouseアイコンをクリックする。 |
| 3 | 表示されるポップアップの〈Generate report〉をクリックし、しばらく待つ。 |
3-2.コマンドラインツールから利用する方法
Lighthouseをコマンドラインツールで導入する手順は、以下のとおりです。
| 1 | Node.jsの公式ダウンロードサイトにアクセスし、Node.jsのバージョン5以降をインストールする。 |
|---|---|
| 2 | Windowsの場合には「コマンドプロンプト」、Macの場合には「ターミナル」を立ち上げる。 |
| 3 | 以下のコマンドを入力し、Lighthouseをグローバルインストールする。 |
以下のコマンドを入力すれば、Lighthouseを利用できます。
lighthouse https://~（評価したいWebアプリ・WebページのURL）なお、HTML形式で表示したい場合には、以下のように末尾に「–view」を付加してください。
lighthouse https://~ --viewまとめ
Lighthouseを利用すれば、Webアプリ・Webページの読み込み速度やモバイル対応度、ユーザビリティ、安全性などを監査できます。また、メタディスクリプションの設定やHTTPステータスコード、検索インデックス登録などを確認するSEOチェックツールとして活用することも可能です。
効率的にWebアプリ・Webページの品質を向上させたい人は、今回紹介した情報を参考に、Lighthouseを導入してはいかがでしょうか。
KEYWORD
