1. Lighthouse（ライトハウス）とは？
Lighthouse（ライトハウス）は、Google Chrome に標準で入っている「ウェブサイト診断ツール」です。
自分のサイトや作成中のページに対して、
表示速度（パフォーマンス）
SEO（検索エンジン対策）
ユーザビリティ（モバイル対応など）
アクセシビリティ（見えづらい人・操作しづらい人への配慮）
コードや構造がベストプラクティスに沿っているかどうか
といった項目を、自動でチェックしてスコア化してくれます。
「なんとなく重い気がする」「コアウェブバイタルって聞くけど何から見たらいいの？」
というときに、まず最初に使ってみると全体の課題がざっくりつかめる便利なツールです。
2. どこから使える？Lighthouse の開き方
Lighthouse は Google Chrome の「デベロッパーツール（開発者ツール）」の中に入っています。
大まかな手順は次のとおりです。
診断したいページを Chrome で開く
右クリック →「検証」をクリック（または F12 キー）
画面右（もしくは下）に「デベロッパーツール」が開く
上部のタブから「Lighthouse」または「Audits」と書かれたタブを選択
測定したい項目・デバイス（モバイル／デスクトップ）を選んで「Analyze」「Generate report」などのボタンを押す
しばらく待つと、自動でページを読み込み直しながら計測が始まり、レポート画面が表示されます。
3. Lighthouse で何がわかるのか？
Lighthouse の結果画面には、主に次のような項目が表示されます。
3-1. パフォーマンス（Performance）
ページの表示速度やレスポンスを数値化したものです。
上部に「Performance ○○」とスコアが表示され、その下に
First Contentful Paint（最初にコンテンツが表示されるまでの時間）
Speed Index（見た目としてどれくらいの速さで表示されたか）
Largest Contentful Paint（大きな要素が表示されるまでの時間）
Total Blocking Time（ユーザー操作をブロックしている時間）
Cumulative Layout Shift（レイアウトがどれくらいガタガタ動いたか）
などの指標が並びます。
数値だけ見ると難しく感じますが、「どのタイミングで重くなっているのか」「どんな要素が足を引っ張っているのか」を把握するためのヒントになります。
3-2. アクセシビリティ（Accessibility）
色のコントラストや、画像の代替テキスト、フォームのラベル、キーボード操作のしやすさなど、
「さまざまなユーザーにとって使いやすいサイトかどうか」をチェックしてくれます。
例えば、
テキストと背景色のコントラストが弱くて読みにくい
画像に alt 属性が入っていない
ラベルがない入力欄がある
といった点を指摘してくれるので、誰にとっても見やすく使いやすいサイト作りの参考になります。
3-3. ベストプラクティス（Best Practices）
セキュリティ面や最新のブラウザ機能への対応状況など、
「Webサイトとしての基本的な品質が守られているか」をチェックする項目です。
例えば、
安全でない古い JavaScript を読み込んでいないか
HTTPS 化（SSL）が正しくされているか
使わない API を呼び出していないか
といった点を確認してくれます。
エラーや警告が出ている場合は、クリックすると詳細な説明が表示されます。
3-4. SEO（Search Engine Optimization）
Google 検索に評価されやすい構造になっているか、
最低限の SEO 設定ができているかをざっくりチェックしてくれます。
例えば、
タイトルや meta description は入っているか
モバイル向けに viewport が設定されているか
リンクテキストがわかりやすいか
など、コンテンツの中身そのものではなく、「技術的な SEO」の観点からチェックが入ります。
3-5. PWA（Progressive Web App）
サイトをアプリのようにインストールできる「PWA」としての要件を満たしているかを見る項目です。
通常のコーポレートサイトやブログでは必須ではありませんが、
「Webアプリっぽいサービスを作る」「ホーム画面に追加して使ってもらいたい」といった場合は参考になります。
4. スコアの見方と目安
Lighthouse のスコアは 0〜100 点で表示されます。
90〜100：良好（緑）
50〜89：改善の余地あり（オレンジ）
0〜49：要改善（赤）
ここで大事なのは、「100 点を目指すこと」よりも「ユーザー体験を損ねないこと」です。
例えば、
実際のユーザーが多く使うページ
モバイルからのアクセスが多いサイト
フォームや決済など、離脱されたくないページ
など、重要なページから優先的にスコアを改善していくのがおすすめです。
また、スコアはネット環境や端末性能によって多少ブレるので、「1 回だけの結果」に過度に振り回されないこともポイントです。
5. レポートの「改善提案」の読み方
Lighthouse の下部には、「Opportunities（改善できそうなポイント）」や「Diagnostics（診断）」といった項目が並びます。
ここには、具体的にどんな改善をすればパフォーマンスが良くなりそうかが書かれています。
よく出てくる例としては、
画像を適切なサイズにする
画像を WebP などの軽い形式にする
不要な JavaScript・CSS を減らす
レンダリングをブロックするリソースを減らす
キャッシュ（ブラウザキャッシュ）を活用する
などがあります。
最初は専門用語が多くてとっつきにくいかもしれませんが、
黄色や赤になっている項目をざっと眺める
何度も出てくる内容から優先的に対応していく
この2ステップで少しずつ理解していくと、「自分のサイトのクセ」が見えてきます。
6. モバイルとデスクトップ両方で見るのが大事
Lighthouse では、モバイル・デスクトップどちらの条件でも計測できます。
最近はスマホからのアクセスが圧倒的に多いので、
まずは「モバイル」で測定して現状を把握する
そのあと「デスクトップ」でも測定して、差を確認する
という流れで見るのがおすすめです。
モバイルの方が回線が遅く、端末性能も低い前提で計測されるため、
同じページでも
モバイル：スコア 50
デスクトップ：スコア 90
といったことがよくあります。
「スマホだと重く感じる…」というユーザーの感覚は、モバイル計測のスコアに出やすいです。
7. コアウェブバイタルとの関係
Lighthouse のパフォーマンス項目で出てくる指標の中には、
Google が公式にランキング要因として扱っている「コアウェブバイタル」の内容も含まれています。
代表的なものは
LCP（Largest Contentful Paint）：一番大きなコンテンツが表示されるまでの時間
CLS（Cumulative Layout Shift）：レイアウトのガタつき具合
などで、どちらも「ユーザーがどれだけストレスなくページを見られるか」に直結します。
Lighthouse でこれらの数値が悪い場合、
ヒーロー画像が重すぎる
広告や埋め込みコンテンツの読み込みでレイアウトがずれる
フォント読み込みのタイミングが悪い
といった問題が潜んでいる可能性が高いです。
コアウェブバイタルは SEO とも関係するため、Lighthouse で確認しておくと安心です。
8. 「一度きり」ではなく「定期的に見る」ツール
Lighthouse は、「サイト公開前に一度だけチェックして終わり」というツールではありません。
サイトは運用していくうちに、
画像が増えてだんだん重くなる
新しいスクリプトを追加して処理が増える
デザイン改修でレイアウトが複雑になる
など、少しずつ変化していきます。
そのため、
大きな改修をしたとき
新しいテンプレートやLPを作ったとき
表示速度が気になってきたとき
などのタイミングで、定期的に Lighthouse を回してチェックする習慣をつけておくと、
「いつの間にかすごく重くなっていた…」という事態を防ぎやすくなります。
9. Lighthouse をうまく活用するコツ
最後に、Lighthouse を使いこなすためのポイントをまとめます。
スコアに一喜一憂しすぎない
100 点を取ることが目的ではなく、「ユーザー体験の改善」がゴール。
モバイルスコアを特に重視する
実際のアクセスの多くはスマホなので、まずはモバイルで快適に。
重要なページから改善する
トップページやお問い合わせページ、LP など、ビジネス上重要なページから手を付ける。
改善提案をひとつずつ消していくイメージで
いきなり全部は無理なので、「今日は画像の最適化だけ」「次は不要なスクリプトを見直す」と、テーマを決めて対応する。
開発者や制作者との共通言語にする
クライアントやチームとのやり取りの中で、「LCP が遅いので画像を軽くしたい」「CLS を下げたい」といった具体的な会話ができるようになると、改善がスムーズになります。
まとめ
Google Chrome の Lighthouse は、
サイトの「健康診断」をしてくれる
表示速度、アクセシビリティ、SEO などをまとめてチェックできる
改善の方向性を教えてくれる
とても便利な無料ツールです。
最初は数値や英語の指標が難しく見えるかもしれませんが、
「スコアの色」と「改善提案」をざっくり眺めるだけでも、
自分のサイトの課題が少しずつ見えてきます。
「なんとなく重い」「ちゃんと作れているか不安」というときは、
まず Lighthouse を一度回してみるところから始めてみてください。
