ChromeでLighthouseを使う方法：DevToolsと拡張機能でモバイル監査

Chrome DevTools、Lighthouse拡張機能、コマンドラインでLighthouseのモバイル監査を行う方法。設定、スコアの読み方、結果がぶれる理由、優先して直すべき項目を解説します。

ChromeでLighthouseのモバイル監査を行うには、DevToolsを開いてLighthouseパネルを選び、DeviceをMobileにし、必要なカテゴリ（Performance、Accessibility、Best practices、SEO）を選んでAnalyze page loadをクリックします。Lighthouseは、通信を制限したミドルレンジのスマホをエミュレートしてページを再読み込みし、0〜100のスコアと修正すべき問題の一覧をレポートにまとめます。ほかの拡張機能が結果をゆがめることがあるので、シークレットウィンドウで実行しましょう。

Lighthouseは、Googleが終了したモバイルフレンドリーテストの代わりとして案内しているツールでもあります。モバイルフレンドリーテストの代替ツールもご覧ください。

Chrome DevToolsでの手順

ページをシークレットウィンドウ（Ctrl + Shift + NまたはCmd + Shift + N）で開きます。初期設定では拡張機能が動きません。
DevTools（F12またはCmd + Option + I）を開き、Lighthouseを選びます。見当たらなければ>>の中を探してください。
Modeを選びます。
- Navigation（初期値）：ページを新たに読み込んで監査します。通常はこれを使います。
- Timespan：操作中の動きを記録します。メニューやフォームの計測に便利です。
- Snapshot：モーダルを開いた状態など、現在の状態のページを監査します。
DeviceをMobileにします。
必要なCategoriesを選びます。
Analyze page loadをクリックし、30〜60秒ほど待ちます。

LighthouseはChromeで開けるページならどこでも使え、オンラインツールでは届かないlocalhostやログインが必要なページも監査できます。

Chrome用Lighthouse拡張機能

LighthouseはChromeウェブストアで拡張機能としても提供されています。インストールしてページを開き、LighthouseのアイコンをクリックしてGenerate reportを選びます。Googleの公式ドキュメントでは、特別な理由がない限りDevToolsのパネルを推奨しています。DevToolsならローカルのサイトやログインが必要なページも監査できますが、拡張機能ではできないからです。実際には、DevToolsを開かずに公開ページをワンクリックで監査したいときに拡張機能が便利で、それ以外は上記の手順で十分です。

コマンドラインでLighthouseを実行する

繰り返し実行する場合やCIでは、Node版のCLIを使います。

npx lighthouse https://example.com --view

CLIは初期設定でモバイルとして監査します。PC向けには--preset=desktop、カテゴリを絞るには--only-categories=performance,seo、スクリプトで結果を処理するには--output=jsonを付けます。PageSpeed Insightsは、公開URLに対して同じエンジンをGoogleのサーバー上で実行しています。

レポートの読み方

各カテゴリにはスコアが付きます。90〜100は良好（緑）、50〜89は要改善（オレンジ）、0〜49は不良（赤）です。

Performanceは、First Contentful Paint、Largest Contentful Paint、Total Blocking Time、Cumulative Layout Shift、Speed Indexといったラボ指標に基づきます。スコアの下のInsightsとDiagnosticsには、大きすぎる画像、発見の遅いLCP画像、描画をブロックするリソースなど、具体的な改善点が並びます。Lighthouse 13（2025年10月）以降、従来のパフォーマンス監査はこれらのInsightsにまとめられ、DevToolsのPerformanceパネルと同じ内容が表示されるようになりました。

Accessibilityでは、色のコントラスト、ラベルや代替テキストの欠落、見出しの順序、ビューポートの拡大設定、タップ領域のサイズなどを自動でチェックします。

Best practicesでは、HTTPS、コンソールに出るブラウザのエラー、非推奨のAPI、画像の縦横比などを確認します。

SEOでは、titleとmeta description、正常なステータスコードでインデックス可能なページか、説明的なテキストを持つクロール可能なリンク、画像の代替テキスト、有効なrobots.txt、hreflangとcanonicalタグといった基本を確認します。Lighthouse 13では旧来の「読みやすいフォントサイズ」の監査が廃止され、viewportのチェックはパフォーマンスのInsightsに移りました。これらに合格しても上位表示が約束されるわけではなく、基本的な障害がないことを意味するだけです。

モバイルのスコアが低く、実行ごとにぶれる理由

モバイルモードでは遅いスマホと通信をシミュレートするため、PCで95点のページがモバイルでは60点になることもあります。この差こそが重要で、多くの実際の訪問者の体験に近い数値を示しています。

スコアは実行するたびに5〜10点ほど変わることもあります。通信状況、サーバーの応答時間、PCで動いているほかの処理が影響するためです。信頼できる数値を得るには、次の点を守りましょう。

3〜5回監査して中央値を使う
重いタブやアプリを閉じる
同じ端末設定、同じページ、同じPCで比較する

速度に関してLighthouseはラボテストです。実際の訪問者の体験を反映するのは、PageSpeed InsightsやSearch Consoleの実ユーザーによるフィールドデータです。違いはモバイルの表示速度テストのガイドで説明しています。

優先して直すべき項目

AccessibilityとSEOで赤になっている項目すべて。 ラベル、代替テキスト、コントラスト、meta descriptionの欠落、クローラーのブロックなど、すぐ直せるものがほとんどです。
LCPで最も改善余地が大きい項目。 大きすぎる、遅延読み込みされている、発見が遅いといったメイン画像が原因であることが多いです。
時間のかかるJavaScriptのタスク。 外部スクリプトが原因になりがちです。遅らせるか削除できるものを探しましょう。
レイアウトのずれ。 画像、埋め込みコンテンツ、広告枠にサイズを指定します。

Lighthouseは問題を一覧にしてくれますが、スマホでページがどう見えるかは示しません。DevToolsのデバイスモードや、実際のスマホサイズとモバイルのユーザーエージェントでページを再読み込みするMobile View Extensionで、見た目も確認しましょう。そのうえで、ナビゲーションやフォームなど自動監査では判断できない点をスマホサイトのテストチェックリストで確認します。

よくある質問

ChromeでLighthouseをモバイルで実行するには？

DevToolsを開いてLighthouseパネルに移動し、DeviceをMobileにしてカテゴリを選び、Analyze page loadをクリックします。より正確な結果を得るにはシークレットウィンドウを使いましょう。

Lighthouseのモバイルスコアは何点なら良好ですか？

90点以上が良好とされます。パフォーマンスについては、実ユーザーのデータでCore Web Vitalsに合格することを重視し、ラボのスコアは問題を見つける目安として使いましょう。

LighthouseとPageSpeed Insightsは同じものですか？

PageSpeed InsightsはGoogleのサーバー上でLighthouseを実行し、データがあればChrome User Experience Reportの実ユーザーデータを加えます。DevToolsのLighthouseは自分のPCで動くので、ローカルや非公開のページもテストできます。