表示が速く、操作しやすいウェブサイトは、ユーザー体験（UX）を向上させるだけでなく、企業やブランドへの信頼性を高めます。一方で、ページの表示速度や操作性に課題があると、機会損失につながり、より使いやすいウェブサイトを提供する競合他社へ顧客が流れてしまう可能性があります。また、ECサイトの決済速度が遅いと、ユーザーの離脱によるカゴ落ちの原因にもなります。
Google Lighthouseは、ウェブサイトの品質を改善するための代表的な診断ツールです。本記事では、Google Lighthouseの概要や主な機能、使い方、診断結果（スコア）の見方と改善ポイントについて紹介します。
Google Lighthouseとは
Google Lighthouse（グーグルライトハウス、以下Lighthouse）は、ウェブ開発者、SEO対策の担当者、ウェブサイトの所有者が、ウェブページの監査や品質向上を行うために設計されたオープンソースの自動化ツールです。Google Chrome DevTools（グーグルクローム デベロッパーツール）に組み込まれており、NodeのコマンドラインツールやChrome拡張機能としても利用可能です。
Lighthouseは、ウェブページのパフォーマンススコアや、より速い読み込みのための提案を提供しています。ページのパフォーマンス、アクセシビリティ、検索エンジン最適化（SEO）などを分析し、主要なウェブサイトのパフォーマンス指標を改善するための実践的なフィードバックを提供します。
Lighthouseがウェブサイトのパフォーマンスを改善する仕組み
Lighthouseでは、ウェブサイトの品質やパフォーマンスを評価するために、主に次の6つの項目を分析します。
- パフォーマンス：Googleが定めるウェブサイトのベンチマークに基づいてサイトスピードやパフォーマンスを評価し、スコアとともに改善につながる具体的な提案を表示します。
- モバイル環境の診断：モバイル環境またはデスクトップ環境を選択して診断できます。モバイル環境では、モバイルデバイスをシミュレートしてページのパフォーマンスを分析し、改善のための提案を表示します。
- Core Web Vitals：Core Web Vitals（コアウェブバイタルズ）は、ウェブパフォーマンスを評価する速度スコアです。LCP、CLSといったCore Web Vitalsの指標を分析できます。また、実際のユーザーデータをもとにLighthouseの分析結果を表示するPageSpeed Insights（ページスピードインサイト）では、すべてのCore Web Vitals指標（LCP、INP、CLS）を確認できます。読み込み速度、操作への応答性、表示の安定性に関する評価結果と改善案を確認でき、快適なユーザー体験の実現に役立ちます。
- プログレッシブウェブアプリ（PWA）：ウェブアプリがプログレッシブウェブアプリ（PWA）の要件を満たしているかどうかを確認できます。オフライン利用や高速な読み込みなど、PWAに求められる機能への対応状況を把握できます。
- アクセシビリティ：ウェブサイトのアクセシビリティを分析します。色のコントラストや画像の代替テキストなどを確認し、障害の有無にかかわらず、より多くのユーザーが利用しやすいウェブサイトづくりを支援します。
- SEO：検索エンジンがウェブページを適切に認識できるよう、基本的なSEOの実装状況を確認します。ページタイトルやメタディスクリプションなどを診断し、検索結果での見つけやすさを高めるための改善点を提示します。
Lighthouseの仕組み
Lighthouseの診断は、モバイルまたはデスクトップ環境をシミュレートして実行され、次のような流れでウェブページを分析します。
- ローカル環境または公開中のウェブサイトのURLを指定して、Lighthouseを実行します。
- Lighthouseは、選択したデバイス環境（モバイルまたはデスクトップ）をシミュレートし、ネットワーク速度やCPU性能などの条件を設定してページを読み込みます。
- ページの読み込み中に、リソースの読み込み時間やページの表示速度など、パフォーマンスに関する各種データを収集します。
- 収集したデータをもとに、パフォーマンス、アクセシビリティ、ベストプラクティス、SEOなどの評価項目について、Googleが定める基準に照らして分析します。
- 各評価項目は0〜100点で採点されます。パフォーマンススコアは、各指標に設定された重みに基づいて総合的に算出されます。
- モバイルまたはデスクトップのいずれか、または両方の環境で診断を実行し、それぞれの結果を確認できます。
- 最後に、各評価項目のスコアや主要な指標、改善につながる具体的な提案をまとめたレポートが表示されます。これにより、ウェブサイトの課題を客観的に把握し、ユーザー体験の向上に向けた改善策を検討できます。
Lighthouseの使い方
Lighthouseでは、ウェブページを診断してレポートを作成し、その結果をもとに改善を進めることで、ウェブサイトの品質や検索エンジンでの見つけやすさを向上できます。
1. Lighthouseでレポートを実行する
Lighthouseは、Chrome DevTools、Chrome拡張機能、またはNode.jsのコマンドライン（CLI）から実行できます。
Chrome DevToolsで実行する方法
Chrome DevToolsは、Googleが推奨する実行方法です。公開中のウェブページだけでなく、ローカル環境や認証が必要なページも診断できます。
- Chromeで診断するウェブページを開きます。
- Chrome DevToolsを開きます（F12キーまたは右クリック→「検証」）。
- DevToolsの「Lighthouse」パネルを開きます。表示されない場合は、パネルのタブ右端にある「>>」から選択します。
- モバイルまたはデスクトップを選択し、診断するカテゴリ（Performance、Accessibility、Best Practices、SEOなど）にチェックを入れます。
- 「Analyze page load」をクリックすると、診断結果が表示されます。
Chrome拡張機能で実行する方法
- Lighthouse拡張機能をインストールします。
- Chromeで診断するウェブページを開きます。
- Lighthouse拡張機能のアイコンをクリックします。
- 診断するカテゴリやデバイスを選択します。
- 「Generate report」をクリックすると診断が実行されます。
なお、Googleでは通常、Chrome DevToolsから実行する方法を推奨しています。Chrome拡張機能では、ローカル環境や認証が必要なページは診断できません。
Node.jsのコマンドライン（CLI）で実行する方法
- npm install -g lighthouseでLighthouseをインストールします。
- ターミナルでlighthouse <URL>を実行します。
- 必要に応じてオプションを指定し、カテゴリや出力形式、診断対象などを設定します。
- Lighthouseがウェブページを分析し、レポートを出力します。
2. Lighthouseのレポートを確認する
Lighthouseのレポートは、評価項目ごとに分類されており、ウェブサイトの課題や改善点を確認できます。
- Performance（パフォーマンス）：ページの表示速度や応答性、表示の安定性を評価します。LCP（Largest Contentful Paint）、INP（Interaction to Next Paint）、CLS（Cumulative Layout Shift）などの指標が表示され、90点以上であれば良好な状態とされています。
- Accessibility（アクセシビリティ）：画像の代替テキストや色のコントラスト、スクリーンリーダーへの対応などを確認し、利用しやすいウェブサイトになっているかを評価します。
- Best Practices（ベストプラクティス）：HTTPSの利用状況や非推奨APIの使用、画像の設定など、ウェブ開発における推奨事項への準拠状況を確認します。
- SEO：検索エンジンがウェブページを適切に認識できるよう、ページタイトルやメタディスクリプション、HTTPステータスコードなど、基本的なSEOの実装状況を評価します。
- Progressive Web Apps（PWA）：PWAを実装しているウェブサイトでは、オフライン対応やインストール可能なウェブアプリとしての要件を満たしているかを確認できます。
3. Lighthouseの診断結果を活用する
Lighthouseでは、スコアだけでなく、改善に役立つ詳細な情報も確認できます。
- Opportunities（改善の機会）：スコア向上につながる具体的な改善案が表示されます。例えば、画像の最適化や不要なJavaScriptの削減など、改善による効果が期待できる項目を確認できます。
- Diagnostics（診断結果）：ページのパフォーマンスに影響を与えている要因や、その詳細な情報を確認できます。
- Passed audits（合格した監査項目）：適切に実装されている項目を確認できます。
- Additional items to manually check（手動で確認すべき項目）：自動診断では判断できない項目について、手動で確認すべき内容が示されます。
まとめ
Google Lighthouseは、ウェブサイトのパフォーマンス、アクセシビリティ、ベストプラクティス、SEOを分析し、スコアや合否判定とともに具体的な改善策を示す無料の診断ツールです。Chrome DevToolsなどから手軽に利用でき、課題の発見から改善後の効果確認まで継続的に活用できます。
特にECサイトのスピードや操作性の低下は、ユーザーの離脱やカゴ落ちにつながり、売上機会を損なう可能性があります。Lighthouseの診断結果をもとに改善を重ね、快適に閲覧および購入できる環境を整えることが、顧客満足度やコンバージョン率の向上につながります。
Lighthouseに関するよくある質問
Chrome DevToolsでLighthouseを有効にするには？
LighthouseはChrome DevToolsに標準搭載されています。ChromeでDevToolsを開き、「Lighthouse」タブを選択すると利用できます。タブが表示されない場合は、「>>」メニューから選択してください。
Lighthouseはシークレットモードで実行すべき？
必須ではありませんが、シークレットモードで実行することをおすすめします。ブラウザのキャッシュやCookie、インストールされている他のChrome拡張機能などの影響を受けにくくなるため、初めてウェブサイトを訪問したユーザーに近い条件でより正確に診断できます。
Lighthouseでモバイル向けのパフォーマンスを分析できる？
はい。Lighthouseでは、モバイルまたはデスクトップを選択して診断できます。モバイル環境をシミュレートして、ページの表示速度や操作性などを分析できます。
Lighthouseではどのような問題が検出できる？
ページの表示速度の低下につながる要因や、未使用のJavaScript、画像の最適化不足、HTTPSの設定、SEOに関する基本的な実装、アクセシビリティ上の問題などを検出できます。診断結果には、改善に役立つ具体的な提案も表示されます。
LighthouseはWebパフォーマンス分析専用のツール？
いいえ。Lighthouseでは、パフォーマンスだけでなく、アクセシビリティ、ベストプラクティス、SEOについても診断できます。また、PWAを実装しているウェブサイトでは、PWAに関する評価も実行できます。
