Lighthouse(ライトハウス)の使い方！Googleの口コミ評価など解説！

Lighthouse(ライトハウス)とは、Googleが提供するオープンソースの無料自動化ツールで、Webページの品質を分析するためのGoogle Chrome拡張機能です。今回はLighthouse(ライトハウス)に焦点を当て、その概要や評価基準、導入方法、チェック項目、活用事例などをご紹介します。気になるポイントを一挙確認してしまいましょう。

Lighthouseとは？

Lighthouse(ライトハウス)とは、Googleが提供するオープンソースの無料自動化ツールで、Webページの品質を分析するためのGoogle Chrome拡張機能です。

Lighthouseの重要性

Lighthouseは、Webページのパフォーマンスやアクセシビリティ、検索エンジン最適化を監査できます。

Lighthouseの主な項目は、PWAに必要な品質項目を満たしているかどうかやWebページの表示速度に関わる内容です。

近年、新たにSEOの項目が追加されたため、自社で運用するWebページを検索順位上位にしたい場合に役立つツールといえます。

Lighthouseにおけるサイト評価基準

Lighthouseは、以下の評価基準に沿って、Webページの評価やパフォーマンスを判断します。

不要なCSSやJavaScriptは削除されているか？
画像にaltタグを設定しているか？
言語指定が適切に指定されているか？
メタタグでタイトルが設定されているか？
メタタグでディスクリプションが設定されているか？
リンクタグやリンクへの誘導文字が設定されているか？
etc…

Lighthouseの導入・使用方法

ここでは、Lighthouseの導入・使用方法について解説します。

①Lighthouseを導入

まず初めに、Google Chromeを起動し、以下の公式WebストアからLighthouseを導入します。

【公式Webストア｜Lighthouse】

②分析したいWebページを開いた状態でアイコンをクリック

導入が完了すると、ブラウザの右上メニューに以下のようなアイコンが表示されます。
Lighthouseを使用したい場合、分析したいWebページを開いた状態でアイコンをクリックします。

③「Generate Report」をクリック

すると「Generate Report」ボタンが表示されます。
「Generate Report」ボタンをクリックし、Webページの分析を始めましょう。

④スコアレポートが表示

しばらくすると、Webページのスコアレポートが、チェック項目ごとに表示されます。
チェック項目の内容については、後述解説します。
これにて、Lighthouseの導入及び使用は完了です。

【公式Webストア｜Lighthouse】

Lighthouseで確認できるチェック項目5点

Lighthouseで確認できるチェック項目は、以下の5つです。

Performance
Accessibility
Best Practices
SEO
Progressive Web App

Performance

Performanceとは、Webページの読み込み速度やユーザー操作から生じるレスポンスの速さなど、主に「Webページの性能」に関して分析・評価する項目です。
Performanceには、Webページの読み込み速度を改善するために必要なCSSやJavaScriptの最適化について評価してくれるため、スコアが低いものは積極的に改善しましょう。

Accessibility

Accessibilityとは、Webページの訪問者や検索エンジンのクローラーに対してWebページが最適化されているかを審査・分析・評価する機能です。

審査対象には、テキストや背景色の見やすさやHTML構造が最適化されているかなどがあります。

Best Practices

Best Practicesとは、Webページをスクロールする際のパフォーマンスを上げる方法を分析・評価する項目です。

具体的には、レスポンシブデザインを意識したアドバイスやWebページのパフォーマンス低下に繋がる内容を避けるための手法が確認できます。

SEO

SEOとは、「Search Engine Optimization」の略で、ユーザーがある特定のキーワードを検索した際、自社で運用するWebページが検索上位に表示されるようにする対策のことです。ここでは、それらが適切に実施されているかを分析・評価します。

たとえば、canonicalが正しく設定されているかやrobots.txtによってWebページがブロックされていないかなどが確認できます。

Progressive Web App

Progressive Web App(PWA)とは、モバイルサイト上でネイティブアプリのようなユーザー体験を提供する技術です。ここでは、Progressive Web App(PWA)の仕様に則ったWebページがどうかを分析・評価します。

Progressive Web App(PWA)の指標に適していないWebページを「failed」とレコメンドしてくれます。
PWAチェックリスト：https://developers.google.com/web/progressive-web-apps/checklist

Progressive Web App(PWA)には、Service Workerの登録有無やWebページがHTTPS化されているかなどがチェックされます。

Lighthouseのスコア改善のための対策例

Lighthouseを利用する目的は、WebページをLighthouseにかけて、そこに表示されるスコアをみてWebページの改善点をみつけ、実際に改善に取り組むことにあります。そうすることでWebページの権威が上がり、検索上位表示が可能になります。
したがってLighthouseでスコアを確認したら、Lighthouseのスコアを改善するための対策を講じる必要があります。対策例を紹介します。

対策	対策詳細
jQueryをやめる	jQueryはWebページにさまざまな機能を持たせることができる便利なライブラリですが、どうしても重たくなるのでPerformanceが悪くなります。jQueryをやめて、すべてJavaScriptで書き直したところスコアが改善した例があります。
外部サイトファイルの読み込み対策をする	外部サイトからファイルを読み込めるようにしているとPerformanceが悪化します。リンクに置き換えることが対策になります。
画像の軽量化をする	重たい画像はPerformanceを悪化させます。画像の軽量化は単純かつ効果が高いのですぐに取り組みたい対策の1つです。複数の画像を一括して軽量化できるTinyPNGなどのツールがあります。
img要素にalt属性を入れる	img要素にalt属性を入れ忘れている場合、Performanceが悪化することがあります。なおalt属性は、img要素の画像の代替になるテキストを指定するときに使います。alt属性を入れ忘れていると画像を表示できないブラウザでテキストが表示されずスコアを押し下げる要因になります。
フォームにaria-label属性を入れる	aria-laber属性とは、要素のラベルにする文字列を指定する属性です。フォームにaria-label属性を入れていないとAccessibilityでアラートが出て、これがスコアを悪化させます。select要素などにはラベルにする文字列をaria-label属性で入れると改善につながります。
隣接しているリンクを調整する	複数のリンクが近づきすぎているとスコアが悪化します。アイコンリンクなどの小さいボタンが近づきすぎていたら、少し離すだけで改善につながります。
色のコントラストを調整する	Webページの背景色と要素の色が似ていてコントラストが小さいとスコアが悪化します。これは「みえづらい」と認識されてしまうからです。コントラストを強調する色みを選びましょう。
robots.txtを設置する	robots.txtは検索エンジンのクローラーの動作を制御するテキストファイル（txt）です。これによりクロール制限を実行できます。小規模サイトではrobots.txtを設置する意義は小さいのですが設置していないとスコア的に不利になるので、スコアを改善する目的で設置することが推奨されます。
html要素にlang属性を指定する	lang属性は、htmlが書かれている言語を指定するものです。 html要素にlang属性を指定していないとスコアに悪影響を与えます。jaを指定しましょう。
meta description を適用する	meta descriptionは全ページに入れることが推奨されます。meta descriptionはページの概要や要約のことです。
ファイルを軽量化する	CSSファイルやJavaScriptファイルを軽量化するとスコア的に有利になります。
document. write をやめる	document. writeはブラウザのレンダリングに悪影響を与えることがあるので使用を避けましょう。
HTMLを調整する	htmlのルールが守られていないとスコアが悪化します。今一度コンテンツがhtmlのルールとおりに書かれてあるか確認し、必要に応じて調整したほうがよいでしょう。
CSSを調整する	CSSでグラデーションを多用するとPerformanceが悪化します。スコアが低い場合はCSSを調整したほうがよいでしょう。

Lighthouseの活用事例

では具体的にLighthouseを活用し、某有名企業のWebページを分析してみましょう。ここでは、3社ほど分析してみます。

LINE

分析対象URL：https://line.me/ja/

Zホールディングス株式会社傘下のLINE株式会社が運営・開発するモバイルメッセンジャーアプリ「LINE」の公式WebサイトをLighthouseで調べてみました。

Performanceスコアが27点と低く、Progressive Web Appには非対応という点が評価が下がるポイントですが、その他の項目では、どれも90点以上と高得点の評価です。

ページの表示速度に課題点はあるものの、SEOも万全に対策されているため、非常に良質なWebページであるといえるでしょう。

Google

分析対象URL：https://about.google/?hl=ja

次に、Googleのとある1ページをLighthouseで分析・評価してみました。

Performanceスコアが57点とやや低く、Progressive Web Appには非対応という点が評価が下がるポイントですが、その他の項目では、どれも80点以上と高得点の評価です。

良質なWebページであることに間違いはないのですが、先ほどの「LINE」の公式Webサイトに比べるとやや見劣りする観点が多い印象です。

summo

分析対象URL：https://www.suumocounter.jp/

次に、株式会社リクルートが運営する「summo」の公式サイトをLighthouseで分析・評価してみました。

Performanceスコアが61点とやや低く、Progressive Web Appには非対応という点が評価が下がるポイントですが、その他の項目では、どれも高得点の評価です。

Lighthouse以外のおすすめサイトチェックツール

PageSpeed Insights
モバイルフレンドリーテスト
構造化データテストツール

GoogleはLighthouse以外にもWebページを分析するサイトチェックツールを提供しています。
ここでは上記の3つの機能を紹介します。いずれも無料です。

PageSpeed Insights

PageSpeed InsightsはWebページの読み込み速度の分析を得意にしています。スマホなどのモバイルにもパソコンにも対応しています。
PageSpeed Insightsの使い方ですが、サイト（https://pagespeed.web.dev/）を開くと入力窓が現れるので、そこに分析したいWebページのURLを入力します。次に「分析」ボタンを押すと、すぐに分析結果が出ます。
PageSpeed Insightsの優れている点は、読み込み速度を細かく分析していることです。次の内容がわかります。

Largest Contentful Paint	Webサイトに含まれる複数のページのうち、メインのページ（メインのコンテンツ）が表示されるまでの時間がわかります。
First Input Delay	First Input DelayはクリックやタップをしてからWebページが応答するまでの時間を測定します。
Cumulative Layout Shift	視覚的な安定性を数値化したものです。閲覧者が自分の意図とおりにWebページを閲覧できているとき「Webページが視覚的に安定している」といいます。視覚的に安定していないWebページとは例えば、Webページは開かれているのに画像が遅れて表示されたりする現象を指します。
First Contentful Paint	閲覧者がWebページのURLをクリックしてから最初のページが表示されるまでの時間がわかります。
Interaction to Next Paint	閲覧者がWebページ上でクリックやタップをしたときの応答の遅延時間を測定します。
Time to First Byte	ブラウザがWebページのサーバーからのデータの最初の1バイトを受け取るまでの時間がわかります。

PageSpeed Insightsで自社Webページの読み込み速度が遅いことが判明したら、速やかに対策を講じることをおすすめします。
読み込み速度が遅いと閲覧者の離脱率が上がってしまうからです。

モバイルフレンドリーテスト

モバイルフレンドリーテストを使うとWebページがスマホなどのモバイル・デバイスに対応できているかどうかがわかります。
最近はパソコンよりもモバイルでWebページを閲覧する人が増えているので、モバイル閲覧のしやすさ（＝モバイルフレンドリーかどうか）が重要になってきます。

モバイルフレンドリーテストの使い方ですが、まずはサイトを開くと入力窓が現れるので、そこに分析したWebページのURLを入力します。
するとしばらくして画面に分析結果が表示されます。
分析結果は「ページはモバイルで利用できます」や「ページはモバイルで利用できません」といったように日本語で出てきます。

さらにWebページの「ユーザーエージェント」「クロールの許可」「ページの取得」「インデックス登録の許可」の状態がわかります。

構造化データテストツール

現在は、構造化データ・テストはリッチリザルト・テストに変わっていますが、こちらも無料です。
Googleの検索エンジンは、構造化データでつくられたWebページを高く評価します。つまりより上位検索されやすくなります。

使い方はモバイルフレンドリー・テストと同じで、リッチリザルト・テストのサイトに分析したいWebページのURLを入力するだけです。
これにより分析対象Webページが構造化データでつくられているかどうかや、リッチリザルトになっているかどうかがわかります。

構造化データとは、検索エンジンが認識しやすいHTMLコードと理解してください。検索エンジンはHTMLコードを読み込んでWebページの内容を把握しています。
例えば、飲食店のWebページにメニューの価格、食材内容、レシピ、割引期間が表示されている場合、検索エンジンはHTMLコードでその内容を理解します。
そしてWebページが適切な構造化データでつくられていると、検索エンジンはWebサイトの内容を正しく理解できるようになります。

リッチリザルトとは、Webページに掲載されているコンテンツや記事や情報の豊富さ（リッチさ）のことです。

Basic認証のかかったサイトでLighthouseを実行する方法

Webサイトを改善したら、本番公開する前にテストを行うはずです。このときLighthouseでチェックしたいところですが、しかしそのテストがステージング環境にあってBasic認証がかかっているとLighthouseを使うとエラーが出ることがあります。
この場合、JavaScriptなどを使うとエラーを回避できます。具体的には、JavaScriptの実行環境であるNode.jsのnpmのLighthouseを使うとよいでしょう。以下、その手順を示します。

●Lighthouseをインストール
↓
●デバッグ用のブラウザを立ちあげる
↓
●サイトを開いてBasic認証情報を入力する
↓
●Lighthouseを実行する
↓
●レポートが表示される（確認できる状態になる）

Lighthouseの口コミ評価

最後にLighthouseを実際に使用した人たちの口コミを紹介します。

拡張機能と開発ツールを選択できるのが良い

I like having the choice between the extension and the option in devtools.
Can you document somewhere what version of axe is being used for the accessibility checks?
Axe 4.2 has about twice as many accessibility tests as lighthouse so it would be good to understand the differences in a clear manner.

（引用：Google：Lighthouse ユーザーレビュー）

<日本語訳>
拡張機能と開発ツールのオプションを選択できるのが気に入っています。
アクセシビリティチェックにどのバージョンのaxが使用されているかをどこかに文書化できますか?
Axe 4.2 には Lighthouse の約 2 倍のアクセシビリティテストがあるため、違いを明確に理解するとよいでしょう。

かなり便利だが足りない部分もある

This is pretty useful!I the only things I think is missing are:
1. Present both mobile/desktop results instea of each separetly, we actually need both!
2. Please add the locale query string parameter into the settings (My clients are spanish speakers, so I have to add &locale=es to each new report.

（引用：Google：Lighthouse ユーザーレビュー）

<日本語訳>
これはかなり便利です。足りないと思うのは次の2点です。
1. モバイルとデスクトップの両方の結果をそれぞれ別々に表示しています。実際には両方が必要です。
2. 設定にロケールクエリ文字列パラメータを追加してください (クライアントはスペイン語を話すので、新しいレポートごとに &locale=es を追加する必要があります)。

デザインの経験がない人にとっても便利

Just got introduced into Lighthouse 6.0 and I honestly love the features it has to offer! The small suggestions on what should be changed on the website do help for those freelance web developers with no design experience. Thank you Devs!

（引用：Google：Lighthouse ユーザーレビュー）

<日本語訳>
Lighthouse 6.0 が導入されたばかりですが、私はこの機能を本当に気に入っています。Webサイトの細やかな提案をする際など、デザインの経験がないフリーランスのWeb開発者にとっても役立ちます。開発者さん、ありがとう！