「自分のサイトがSEO的に問題ないか確認したい」「表示速度やユーザビリティを改善したいけど、何から手をつければいいかわからない」
そんな悩みを解決してくれるのが、Googleが無料で提供する「Lighthouse（ライトハウス）」です。Chrome DevToolsに標準搭載されており、URLを指定するだけでWebサイトの品質を多角的に診断してくれます。
Lighthouseは「灯台」という名前の通り、Webサイトが「暗礁に乗り上げないように」導いてくれるツール。パフォーマンス、アクセシビリティ、ベストプラクティス、SEOの4つの観点から診断し、具体的な改善提案まで提示してくれます。
この記事では、Lighthouseの基本的な使い方から、各評価項目の見方、実践的な改善方法まで詳しく解説します。
Lighthouse（ライトハウス）とは？基本情報
Lighthouseの概要
Lighthouse（ライトハウス）は、Googleが開発・提供するオープンソースのWebサイト品質監査ツールです。Webページのパフォーマンス、アクセシビリティ、SEOなどを自動的に診断し、改善点を具体的に提示してくれます。
もともとはPWA（プログレッシブウェブアプリ）の品質チェックを目的として開発されましたが、現在ではSEOやパフォーマンス診断ツールとしても広く活用されています。
Lighthouseの主な特徴
- 完全無料で利用可能
- Chrome DevToolsに標準搭載（インストール不要）
- 4つの観点から総合的にサイトを評価
- 具体的な改善提案を提示
- ローカル環境や認証が必要なページも診断可能
- 競合サイトの分析にも活用可能
Lighthouseで診断できる4つの評価カテゴリ
Lighthouseでは、以下の4つのカテゴリでWebサイトを評価します。
1. Performance（パフォーマンス）
ページの読み込み速度や応答性を測定します。Core Web Vitals（LCP、INP、CLS）を含む複数の指標でパフォーマンスを評価し、ユーザー体験を最適化するための改善点を提示します。
2. Accessibility（アクセシビリティ）
障害を持つユーザーや高齢者など、すべてのユーザーがサイトを利用しやすいかをチェックします。代替テキストの設定、コントラスト比、キーボード操作への対応などを評価します。
3. Best Practices（ベストプラクティス）
WebサイトがセキュリティやモダンなWeb標準に沿っているかを確認します。HTTPS化、非推奨APIの使用、JavaScriptのエラーなどをチェックします。
4. SEO
検索エンジンがサイトを適切に認識・インデックスできるかをチェックします。メタタグの設定、モバイルフレンドリー対応、クローラビリティなど、技術的なSEO要素を診断します。
PageSpeed InsightsとLighthouseの違い
PageSpeed InsightsとLighthouseは、どちらもGoogleが提供するパフォーマンス測定ツールですが、以下の違いがあります。
| 比較項目 | Lighthouse | PageSpeed Insights |
|---|---|---|
| 利用方法 | Chrome DevTools、CLI、拡張機能 | Webブラウザからアクセス |
| データの種類 | ラボデータのみ | フィールドデータ＋ラボデータ |
| ローカル環境 | ◎ 測定可能 | × 測定不可 |
| 認証ページ | ◎ 測定可能 | × 測定不可 |
| 詳細設定 | ◎ カスタマイズ可能 | △ 限定的 |
| 継続的監視 | ◎ CI/CDに組み込み可能 | × 手動のみ |
PageSpeed Insightsは実際のユーザーデータ（フィールドデータ）を確認できる点が強みですが、Lighthouseはローカル環境や認証が必要なページも測定できる柔軟性があります。目的に応じて使い分けるのがおすすめです。
Lighthouseの使い方【Chrome DevTools編】
Lighthouseを使う方法は複数ありますが、最もおすすめなのはChrome DevToolsを使う方法です。Googleも公式にこの方法を推奨しています。
Chrome DevToolsでの基本的な使い方
Step 1：Chromeで対象ページを開く
Google Chromeブラウザで、診断したいWebページを開きます。
Step 2：DevToolsを開く
以下のいずれかの方法でDevToolsを開きます。
- キーボードショートカット：F12キー（Windows）/ Cmd+Option+I（Mac）
- 右クリック→「検証」を選択
- Chromeメニュー→「その他のツール」→「デベロッパーツール」
Step 3：Lighthouseタブを選択
DevToolsの上部にあるタブの中から「Lighthouse」を選択します。タブが見当たらない場合は、「>>」をクリックして隠れているタブを表示させてください。
Step 4：設定を確認
診断前に以下の設定を確認・調整します。
- Mode（モード）：通常は「Navigation」を選択
- Device（デバイス）：「Mobile」または「Desktop」を選択
- Categories（カテゴリ）：診断したい項目にチェック
Step 5：分析を実行
「Analyze page load」（ページ読み込みを分析）ボタンをクリックします。分析には30秒〜1分程度かかります。
Step 6：レポートを確認
分析が完了すると、各カテゴリのスコアと詳細なレポートが表示されます。
3つの測定モード
Lighthouseには3つの測定モードがあり、目的に応じて使い分けることができます。
Navigation（ナビゲーション）モード
最も一般的なモードで、ページの初回読み込みを分析します。通常のSEO診断やパフォーマンス測定にはこのモードを使用します。
Timespan（タイムスパン）モード
一定期間のユーザー操作を含めて分析します。「Start timespan」をクリックしてからページを操作し、「End timespan」で測定を終了します。SPAなどの操作中のパフォーマンスを測定したい場合に有効です。
Snapshot（スナップショット）モード
ページを再読み込みせずに、現在の状態をそのまま分析します。モーダルを開いた状態や、特定の操作後の状態を診断したい場合に使用します。
DevToolsの詳細設定
DevToolsのLighthouseパネルでは、以下の詳細設定が可能です。
Clear storage（ストレージをクリア）
キャッシュやCookieをクリアした状態で測定します。初回訪問時のユーザー体験をより正確にシミュレートできます。
Enable JS sampling（JSサンプリングを有効化）
より詳細なJavaScriptのサンプリングデータを取得します。パフォーマンスパネルでトレースを開く場合に便利です。
Throttling（スロットリング）
ネットワークやCPUの速度を制限して、低速な環境をシミュレートします。「Simulated throttling」（シミュレート）と「DevTools throttling」（実際に制限）から選択できます。
Lighthouseの使い方【その他の方法】
Chrome拡張機能を使う方法
ChromeウェブストアからLighthouse拡張機能をインストールして使用する方法もあります。
インストール手順
- Chromeウェブストアで「Lighthouse」を検索
- 「Chromeに追加」をクリックしてインストール
- 診断したいページでLighthouseアイコンをクリック
- 「Generate report」をクリック
ただし、Googleは「特別な理由がない限り、Chrome DevToolsを使用してください」と公式に推奨しています。DevToolsの方がローカルサイトや認証済みページのテストが可能で、精度も高いためです。
コマンドライン（CLI）を使う方法
Node.jsがインストールされている環境では、コマンドラインからLighthouseを実行できます。
インストール
npm install -g lighthouse
実行
lighthouse https://example.com --view
CLIを使用すると、CI/CDパイプラインに組み込んで自動テストを行ったり、複数ページを一括で診断したりすることが可能です。開発チームでの継続的な品質監視に適しています。
PageSpeed Insightsを使う方法
PageSpeed Insights（https://pagespeed.web.dev/）からもLighthouseのレポートを確認できます。URLを入力するだけで診断でき、フィールドデータ（実際のユーザーデータ）も同時に確認できるのがメリットです。
スコアの見方と評価基準
スコアの色分けと基準
Lighthouseのスコアは0〜100点で評価され、以下のように色分けされます。
- 90〜100点（緑）：Good（良好）
- 50〜89点（オレンジ）：Needs Improvement（改善が必要）
- 0〜49点（赤）：Poor（不良）
一般的に、各カテゴリで90点以上を取得していれば、その項目において優れた品質が担保されていると考えられます。
スコアが変動する理由
Lighthouseのスコアは測定するたびに変動することがあります。主な原因は以下の通りです。
- ネットワーク状況の変化
- サーバーの応答速度の変動
- 広告やサードパーティスクリプトの読み込み状況
- ブラウザのバックグラウンドプロセス
- ABテストによるコンテンツの変化
正確な評価を得るためには、複数回測定して平均的なスコアを把握することをおすすめします。また、シークレットモードで測定すると、ブラウザ拡張機能の影響を排除できます。
ラボデータとフィールドデータ
Lighthouseで取得できるのは「ラボデータ」のみです。ラボデータとは、特定の条件下でシミュレートされたデータのことで、実際のユーザー体験とは異なる場合があります。
実際のユーザーデータ（フィールドデータ）を確認するには、Google Search Consoleの「ウェブに関する主な指標」レポートや、PageSpeed Insightsを併用することをおすすめします。
Performance（パフォーマンス）の評価項目
パフォーマンスカテゴリでは、ページの読み込み速度や応答性を測定します。Core Web Vitalsを含む6つの主要指標でスコアが算出されます。
主要な指標（Metrics）
First Contentful Paint（FCP）
ページの読み込みが開始されてから、最初のコンテンツ（テキスト、画像など）が表示されるまでの時間です。
- 良好：1.8秒以下
- 改善が必要：1.8〜3.0秒
- 不良：3.0秒超
Largest Contentful Paint（LCP）
ページ内で最も大きなコンテンツ（メインビジュアルなど）が表示されるまでの時間です。Core Web Vitalsの1つ。
- 良好：2.5秒以下
- 改善が必要：2.5〜4.0秒
- 不良：4.0秒超
Total Blocking Time（TBT）
FCPからTTI（操作可能になるまでの時間）の間に、メインスレッドがブロックされていた時間の合計です。INP（Interaction to Next Paint）の代替指標として使用されます。
- 良好：200ミリ秒以下
- 改善が必要：200〜600ミリ秒
- 不良：600ミリ秒超
Cumulative Layout Shift（CLS）
ページ読み込み中に発生する予期しないレイアウトのズレを数値化した指標です。Core Web Vitalsの1つ。
- 良好：0.1以下
- 改善が必要：0.1〜0.25
- 不良：0.25超
Speed Index
ページのコンテンツがどれだけ速く視覚的に表示されるかを示す指標です。
- 良好：3.4秒以下
- 改善が必要：3.4〜5.8秒
- 不良：5.8秒超
改善機会（Opportunities）
「Opportunities」セクションには、パフォーマンスを向上させるための具体的な改善提案が表示されます。各項目には、改善によって短縮できる推定時間も表示されます。
よく表示される改善項目
- Eliminate render-blocking resources（レンダリングをブロックするリソースの除外）
- Properly size images（適切なサイズの画像）
- Defer offscreen images（オフスクリーン画像の遅延読み込み）
- Minify CSS/JavaScript（CSS/JavaScriptの圧縮）
- Remove unused CSS/JavaScript（未使用のCSS/JavaScriptの削除）
- Serve images in next-gen formats（次世代フォーマットでの画像配信）
- Enable text compression（テキスト圧縮の有効化）
- Reduce server response time（サーバー応答時間の短縮）
診断（Diagnostics）
「Diagnostics」セクションには、パフォーマンスに関する詳細な診断結果が表示されます。スコアには直接影響しませんが、改善の参考になる情報です。
- Avoid enormous network payloads（巨大なネットワークペイロードを避ける）
- Minimize main-thread work（メインスレッドの作業を最小化）
- Reduce JavaScript execution time（JavaScript実行時間の短縮）
- Avoid large layout shifts（大きなレイアウトシフトを避ける）
- Avoid long main-thread tasks（長いメインスレッドタスクを避ける）
Accessibility（アクセシビリティ）の評価項目
アクセシビリティカテゴリでは、すべてのユーザーがサイトを利用しやすいかをチェックします。視覚障害、聴覚障害、運動機能障害などを持つユーザーへの配慮が評価されます。
主なチェック項目
画像関連
- Image elements have [alt] attributes（画像にalt属性が設定されているか）
- Image elements have redundant text（alt属性が重複していないか）
コントラスト関連
- Background and foreground colors have a sufficient contrast ratio（背景色と前景色のコントラスト比が十分か）
フォーム関連
- Form elements have associated labels（フォーム要素にラベルが関連付けられているか）
- Buttons have an accessible name（ボタンにアクセシブルな名前があるか）
ナビゲーション関連
- Links have a discernible name（リンクに識別可能な名前があるか）
- Heading elements are in a sequentially-descending order（見出し要素が順序正しく配置されているか）
言語関連
- html element has a [lang] attribute（html要素にlang属性があるか）
アクセシビリティ改善のメリット
アクセシビリティの改善は、障害を持つユーザーへの配慮だけでなく、以下のメリットがあります。
- SEOへの好影響：適切な見出し構造やalt属性は、クローラビリティの向上にもつながる
- ユーザビリティの向上：すべてのユーザーにとって使いやすいサイトになる
- 法的リスクの軽減：アクセシビリティに関する法規制への対応
Best Practices（ベストプラクティス）の評価項目
ベストプラクティスカテゴリでは、WebサイトがセキュリティやモダンなWeb標準に沿っているかを確認します。
主なチェック項目
セキュリティ関連
- Uses HTTPS（HTTPSを使用しているか）
- Avoids requesting the geolocation permission on page load（ページ読み込み時に位置情報の許可を求めていないか）
- Avoids requesting the notification permission on page load（ページ読み込み時に通知の許可を求めていないか）
JavaScript関連
- No browser errors logged to the console（コンソールにブラウザエラーが記録されていないか）
- Avoids deprecated APIs（非推奨のAPIを使用していないか）
- Uses passive listeners to improve scrolling performance（スクロールパフォーマンス向上のためにpassiveリスナーを使用しているか）
画像関連
- Displays images with correct aspect ratio（正しいアスペクト比で画像を表示しているか）
- Serves images with appropriate resolution（適切な解像度で画像を配信しているか）
その他
- Page has the HTML doctype（HTMLのdoctypeがあるか）
- Properly defines charset（文字コードが適切に定義されているか）
SEOの評価項目
SEOカテゴリでは、検索エンジンがサイトを適切に認識・インデックスできるかをチェックします。技術的なSEOの基本項目が評価対象です。
Content Best Practices（コンテンツのベストプラクティス）
Document has a <title> element
ページにtitleタグが設定されているかをチェックします。titleタグは検索結果に表示される重要な要素です。
Document has a meta description
ページにmeta descriptionが設定されているかをチェックします。検索結果のスニペットに表示される可能性があります。
Links have descriptive text
リンクテキストが具体的で意味のあるものになっているかをチェックします。「こちら」「詳細」などの曖昧なテキストは避けるべきです。
Image elements have [alt] attributes
画像にalt属性が設定されているかをチェックします。検索エンジンが画像の内容を理解するために重要です。
Crawlability（クローラビリティ）
Page isn’t blocked from indexing
ページがrobots.txtやnoindexタグによってインデックスをブロックされていないかをチェックします。
robots.txt is valid
robots.txtファイルが正しく設定されているかをチェックします。
Links are crawlable
ページ内のリンクがクローラーによってたどれる形式になっているかをチェックします。
Mobile Friendly（モバイルフレンドリー）
Has a <meta name=”viewport”> tag with width or initial-scale
viewportメタタグが適切に設定されているかをチェックします。モバイルSEOの基本要素です。
Document uses legible font sizes
フォントサイズが読みやすい大きさになっているかをチェックします。モバイルデバイスでの可読性が評価されます。
Tap targets are sized appropriately
タップターゲット（ボタンやリンク）が十分な大きさで、適切な間隔で配置されているかをチェックします。
Additional items to manually check（手動で確認が必要な項目）
Lighthouseでは自動チェックできないが、SEOに重要な項目として以下が表示されます。
- Structured data is valid（構造化データが有効か）
- Page has valid hreflang（hreflang属性が正しく設定されているか）
- Page has valid canonical（canonicalタグが正しく設定されているか）
- Page avoids plugins（Flash等のプラグインを避けているか）
Lighthouseを使ったSEO診断の実践手順
Step 1：現状のスコアを把握する
まず、自社サイトの主要ページでLighthouse診断を実行し、現状のスコアを把握します。測定すべきページの優先順位は以下の通りです。
- トップページ
- 主要なランディングページ
- コンバージョンに関わるページ（問い合わせフォーム、購入ページなど）
- アクセスの多いページ
- テンプレートの異なるページ（ブログ記事、商品ページなど）
Step 2：問題点を特定する
各カテゴリのスコアを確認し、改善が必要な項目を特定します。特に以下の点に注目してください。
- 赤（不合格）の項目：最優先で改善すべき
- Core Web Vitals：検索ランキングに影響する重要指標
- 改善効果の大きい項目：「Opportunities」で推定改善時間が大きいもの
Step 3：優先順位をつけて改善する
すべての問題を一度に解決する必要はありません。以下の基準で優先順位をつけましょう。
高優先度
- SEOカテゴリで不合格の項目（インデックスに直接影響）
- Core Web Vitals（LCP、CLS）が不良の項目
- セキュリティ関連の問題（HTTPS化など）
中優先度
- パフォーマンスの改善機会で効果の大きい項目
- アクセシビリティの重要な問題
低優先度
- 診断（Diagnostics）で指摘される軽微な問題
- ベストプラクティスの推奨事項
Step 4：改善後に再測定する
改善を実施したら、再度Lighthouseで測定してスコアの変化を確認します。改善効果が確認できたら、次の項目に取り組みましょう。
よくある問題と改善方法
パフォーマンスの問題
問題：画像が最適化されていない
- 画像をWebP形式に変換する
- 適切なサイズにリサイズする
- 圧縮ツールで容量を削減する
- loading=”lazy”でレイジーロードを実装する
問題：レンダリングをブロックするリソースがある
- クリティカルCSSをインライン化する
- JavaScriptにasync/defer属性を追加する
- 不要なCSS/JavaScriptを削除する
問題：サーバー応答時間が遅い
- 高速なホスティングサービスに移行する
- CDNを導入する
- サーバーサイドキャッシュを有効化する
SEOの問題
問題：meta descriptionがない
各ページに固有のmeta descriptionを設定します。120〜160文字程度で、ページの内容を端的に説明しましょう。
問題：リンクテキストが曖昧
「こちら」「詳細」などの曖昧なテキストを避け、リンク先の内容がわかる具体的なテキストに変更します。
問題：viewportが設定されていない
head内に以下のmetaタグを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">
アクセシビリティの問題
問題：画像にalt属性がない
すべての画像にalt属性を設定します。装飾目的の画像はalt=””（空のalt）を設定します。
問題：コントラスト比が不十分
テキストと背景のコントラスト比を4.5:1以上（大きなテキストは3:1以上）に調整します。
問題：見出しの順序が正しくない
h1→h2→h3…と順序正しく見出しを配置します。見出しレベルをスキップしないようにしましょう。
Lighthouseの活用ポイント
定期的な測定で品質を維持する
Lighthouseの診断は、一度実施して終わりではありません。以下のタイミングで定期的に測定することをおすすめします。
- 新しいコンテンツを追加した後
- サイトのデザインやコードを変更した後
- 新しいプラグインやスクリプトを導入した後
- 月次の定期チェック
競合サイトの分析に活用する
Lighthouseは自社サイトだけでなく、競合サイトの分析にも活用できます。競合サイトのスコアを把握することで、自社サイトの改善目標を設定する際の参考になります。
Lighthouse CIで自動化する
開発チームでは、Lighthouse CIを使ってCI/CDパイプラインに組み込むことで、コードの変更がパフォーマンスに与える影響を自動的にチェックできます。品質の低下を事前に検知し、問題のあるコードがデプロイされるのを防ぐことができます。
他のツールと併用する
Lighthouseだけでは把握できない情報もあります。以下のツールと併用することで、より包括的なSEO対策が可能になります。
- Google Search Console：フィールドデータ、インデックス状況、検索クエリの確認
- PageSpeed Insights：フィールドデータとラボデータの両方を確認
- Ahrefs/SEMrush：被リンク分析、キーワード調査など
よくある質問（FAQ）
Q1. Lighthouseは無料で使えますか？
A. はい、完全無料で使用できます。Chrome DevToolsに標準搭載されており、追加の料金や契約は不要です。
Q2. Lighthouseのスコアは検索順位に直接影響しますか？
A. Lighthouseのスコア自体が直接検索順位に使用されることはありません。ただし、Core Web Vitals（LCP、INP、CLS）はGoogleのランキング要因として公式に採用されています。
Q3. モバイルとデスクトップ、どちらを優先すべきですか？
A. Googleはモバイルファーストインデックスを採用しているため、モバイルの改善を優先することをおすすめします。ただし、ターゲットユーザーのデバイス比率も考慮しましょう。
Q4. スコアが毎回変わるのはなぜですか？
A. ネットワーク状況、サーバーの応答速度、広告の読み込み状況などが影響します。複数回測定して平均的なスコアを把握することをおすすめします。
Q5. 100点を取る必要がありますか？
A. 必ずしも100点を目指す必要はありません。90点以上であれば「良好」と評価されます。機能が豊富なサイトでは100点達成が困難な場合もあるため、ユーザー体験とのバランスを考慮しましょう。
Q6. ローカル環境のサイトも測定できますか？
A. はい、Chrome DevToolsを使用すれば、localhost上のサイトや開発環境のサイトも測定できます。これは拡張機能やPageSpeed Insightsにはないメリットです。
Q7. 認証が必要なページも測定できますか？
A. はい、Chrome DevToolsを使用すれば、ログイン後のページや会員専用ページも測定できます。事前にログインした状態でLighthouseを実行してください。
Q8. SEOカテゴリで100点を取ればSEO対策は完璧ですか？
A. いいえ、Lighthouseがチェックするのは技術的なSEOの基本項目のみです。コンテンツの質、被リンク、キーワード選定など、SEOには他にも多くの要素があります。
Q9. Chrome以外のブラウザでも使えますか？
A. Lighthouse拡張機能はFirefoxにも対応しています。また、コマンドライン（CLI）を使用すれば、ブラウザに依存せずに実行できます。
Q10. Lighthouseのバージョンによってスコアは変わりますか？
A. はい、Lighthouseはバージョンアップごとに評価基準やスコアの計算方法が変更されることがあります。最新バージョンを使用し、バージョン間のスコア比較は参考程度にとどめてください。
まとめ
Lighthouse（ライトハウス）は、Googleが提供する無料のWebサイト品質監査ツールです。Chrome DevToolsに標準搭載されており、パフォーマンス、アクセシビリティ、ベストプラクティス、SEOの4つの観点からサイトを診断できます。
Lighthouseのメリット
- 完全無料で利用可能
- Chrome DevToolsに標準搭載（インストール不要）
- 4つの観点から総合的にサイトを評価
- 具体的な改善提案を提示
- ローカル環境や認証ページも診断可能
- CI/CDに組み込んで自動化可能
Lighthouseの注意点
- ラボデータのみ（フィールドデータは取得不可）
- スコアは測定ごとに変動する
- SEOの全要素をカバーしているわけではない
Lighthouseは、テクニカルSEOの基本的なチェックや、パフォーマンス改善の指針を得るのに非常に有効なツールです。ただし、SEO対策の全てをカバーしているわけではないため、コンテンツの質や被リンク戦略など、他の要素にも目を配る必要があります。
まずはChrome DevToolsでLighthouseを実行し、自社サイトの現状を把握することから始めてみてください。定期的な診断と改善を繰り返すことで、ユーザーにも検索エンジンにも評価されるサイトを構築できます。
コンテンツSEOやサイト全体のSEO戦略についてのご相談は、オムニウェブのSEO対策サービスまでお気軽にお問い合わせください。
