Lighthouse(ライトハウス)とは？概要や評価基準、導入方法、チェック項目、活用事例なども解説！

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
ProgressiveWebAp

Performance

Perfomaceとは、Webページの読み込み速度やユーザー操作から生じるレスポンスの速さなど、主に「Webページの性能」に関して分析・評価する項目です。

Performanceには、Webページの読み込み速度を改善するために必要なCSSやJavaScriptの最適化について評価してくれるため、スコアが低いものは積極的に改善しましょう。

Accessibility

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

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

Best Practices

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

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

SEO

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

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

ProgressiveWebApp

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ページを分析してみましょう。ここでは、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ページに掲載されているコンテンツや記事や情報の豊富さ（リッチさ）のことです。

その他のSEO対策ツールについて詳しくみてみる