「自分のWebページは、表示が遅くないか」「読みにくい色や、使いにくい部分はないか」と気になったことはないでしょうか。
こうした問題を自動でチェックしてくれるのが、Googleが提供している無料のツール「Lighthouse(ライトハウス)」です。
この記事では、Google Lighthouseとは何か、Chromeでの使い方、スコアの見方を、実際に試せる見本ページと動画を使って初心者向けに解説します。
Google Lighthouseの基本
まずはLighthouseとは何か、何をチェックしてくれるのか、どこで使えるのかを押さえましょう。
Lighthouseとは何か
Lighthouseとは、Webページの品質を自動で検査し、点数と改善のヒントを示してくれる、Googleが開発しているオープンソース(誰でも無料で使え、中身も公開されている)のツールです。
ページのURLを指定して実行するだけで、次の4つの観点から0〜100点で採点してくれます。
| カテゴリ | チェックする内容 |
|---|---|
| Performance(パフォーマンス) | ページが表示されるまでの速さや、読み込み中の操作のしやすさ |
| Accessibility(アクセシビリティ) | 目や耳が不自由な人、キーボードだけで操作する人なども使えるか(文字色のコントラスト、画像の代替テキストなど) |
| Best Practices(ベストプラクティス) | セキュリティや、ブラウザのエラーなど、Web制作の推奨ルールを守れているか |
| SEO | 検索エンジンがページの内容を正しく読み取れるか(説明文の有無、検索結果への表示を禁止していないかなど) |
人の目だけでは見落としがちな問題を、数分で一覧にしてくれるのが大きな魅力です。
Lighthouseを使える場所
Lighthouseは、目的に合わせていくつかの方法で使えます。
| 使う場所 | 特徴 |
|---|---|
| Chromeのデベロッパーツール | Chromeに最初から入っていて、インストール不要。ログインが必要なページや、公開前のページも検査できる |
| PageSpeed Insights | Webサイト上でURLを入力するだけで使える。公開中のページ向けで、実際のユーザーの表示速度のデータもあわせて見られる |
| Chromeの拡張機能 | Chromeウェブストアから追加して使う。公式にはデベロッパーツールの利用が勧められている |
| コマンドライン(CLI) | Node.jsを使い、コマンドで実行する。多くのページをまとめて検査したり、自動化したりするのに向いている |
初めて使うなら、追加の準備がいらないChromeのデベロッパーツールがおすすめです。
この記事でも、デベロッパーツールでの使い方を中心に解説します。
Lighthouseの使い方(Chromeのデベロッパーツール)
ここからは、Chromeのデベロッパーツールで実際にLighthouseを動かす手順を、見本ページを使って見ていきましょう。
練習用の見本ページ
この記事のために、架空のカフェを題材にした見本ページを2つ用意しました。
見た目はほとんど同じですが、Lighthouseにかけると点数が大きく変わります。
このあとの手順を読みながら、実際に試してみてください。
手順1:検査したいページをシークレットウィンドウで開く
まず、検査したいページをChromeのシークレットウィンドウで開きます。
シークレットウィンドウは、Chromeのメニュー(右上の「︙」)から「新しいシークレット ウィンドウ」を選ぶと開けます。
普段のウィンドウでは、追加している拡張機能が動いて検査結果に影響することがあるため、拡張機能が無効になるシークレットウィンドウで測るのが確実です。
手順2:デベロッパーツールを開いて「Lighthouse」タブを選ぶ
ページ上で右クリックして「検証」を選ぶか、F12キー(Macならcommand+option+I)を押すと、デベロッパーツールが開きます。
英語やコードがたくさん並んだ画面が開きますが、見るだけでページが壊れることはないので安心してください。
上部に並んだタブから「Lighthouse」を選びます。
見当たらないときは、タブの並びの右端にある「»」をクリックすると出てきます。
手順3:Mode・Device・Categoriesを選ぶ
Lighthouseのタブを開くと、検査の条件を選ぶ画面が表示されます。
選ぶ項目は「Mode(モード)」「Device(端末)」「Categories(カテゴリ)」の3つです。
Modeは、どんな場面を検査するかを選ぶ項目で、次の3種類があります。
| Mode | 検査する内容 | 使いどころ |
|---|---|---|
| Navigation(初期設定) | ページを読み込むところから検査する | まずはこれでOK。4つのカテゴリすべてを採点できる |
| Timespan | 記録を始めてから止めるまでの操作中の動きを検査する | クリックや入力をしたときの動きを調べたいとき(アクセシビリティは検査できない) |
| Snapshot | 今表示されている状態のページを検査する | メニューを開いた状態など、操作したあとの画面を調べたいとき(パフォーマンスの点数は出ない) |
Deviceは「Mobile(スマホ)」と「Desktop(パソコン)」から選びます。
初期設定はMobileで、スマホでの閲覧を想定し、通信速度や処理性能を抑えた環境で検査されます。
Categoriesでは、採点したいカテゴリにチェックを入れます。
4つすべてにチェックが入った状態で問題ありませんが、文字の読みやすさなどだけを確かめたいときは「Accessibility」だけにすると、早く結果が出ます。
Chromeのバージョンによっては、5つめに「Agentic browsing」という項目も表示されますが、この記事の動画のようにチェックを外したままで構いません。
手順4:「Analyze page load」で検査を始める
条件を選んだら、「Analyze page load」(ページの読み込みを分析)ボタンをクリックします。
ページが自動で読み込み直され、数十秒ほどで結果のレポートが表示されます。
検査中はページを操作したり、タブを切り替えたりしないようにしましょう。
ここまでの操作を、改善前と改善後の見本ページで行った様子が次の動画です(Navigationモード・Desktop)。
Lighthouseのスコアとレポートの見方
検査が終わったら、表示されたスコアとレポートから、直すべき点を読み取ります。
スコアは3色で良し悪しを判断する
レポートの一番上には、カテゴリごとのスコアが丸いグラフで表示されます。
スコアは0〜100点で、色によって次の3段階に分かれています。
| スコア | 色 | 意味 |
|---|---|---|
| 0〜49 | 赤 | 悪い(Poor) |
| 50〜89 | オレンジ | 改善が必要(Needs Improvement) |
| 90〜100 | 緑 | 良い(Good) |
まずは赤やオレンジのカテゴリを見つけて、そこから改善していくのが効率的です。
見本ページの検査結果
2つの見本ページをLighthouseで検査すると、次のような結果になりました(上の動画と同じ、Navigationモード・Desktop)。
| カテゴリ | 改善前 | 改善後 |
|---|---|---|
| Performance | 95 | 100 |
| Accessibility | 52 | 100 |
| Best Practices | 100 | 100 |
| SEO | 50 | 66 |
改善前のページの検査結果は、次のような画面で表示されます。
Accessibilityは、問題を直すだけで52点から100点まで上がっています。
改善前のPerformanceが95点なのは、画像に幅と高さ(width・height)を指定していないため、画像が読み込まれたときに下の文章が押し下げられて、レイアウトがずれるからです。上の画面でも、METRICS(指標)のうちCumulative Layout Shift(レイアウトのずれ)だけがオレンジで表示されています。
画像がすぐに読み込まれたときはずれが起きないので、改善前のページは測るたびに100点になったり、90点台になったりします。改善後のページは画像にwidthとheightを指定しているので、毎回100点です。
一方、改善後のSEOが66点なのは、見本ページが検索結果に出ないよう、わざと「noindex」(検索エンジンにページを登録しないよう伝える指定)を入れているためです。
このように、点数が低い理由が「意図どおり」の場合もあるので、点数だけでなく、次に説明する減点の理由まで確認しましょう。
減点された項目と直し方を確認する
スコアの下には、カテゴリごとに減点された項目が一覧で表示されます。
項目をクリックすると、問題のある要素(HTMLの該当箇所)と、詳しい解説ページへのリンク(Learn more)が表示されます。
改善前の見本ページでは、Accessibilityで次の7つの項目が指摘されました。
| レポートの表示(英語) | 意味 | 改善後のページでの直し方 |
|---|---|---|
| Buttons do not have an accessible name | ボタンに名前がない | アイコンだけの検索ボタンにaria-label="検索"を付けた |
| Background and foreground colors do not have a sufficient contrast ratio. | 文字色と背景色の明るさの差が足りない | 薄いグレー(#AAAAAA)の文字を濃いグレー(#595959)にした |
| Heading elements are not in a sequentially-descending order | 見出しの階層が飛んでいる | h1のすぐ下にあったh4をh2にした |
<html> element does not have a [lang] attribute | ページの言語が指定されていない | <html lang="ja">にした |
Image elements do not have [alt] attributes | 画像に代替テキストがない | 画像にaltで内容の説明を付けた |
| Links do not have a discernible name | リンクに名前がない | アイコンだけのリンクにaria-label="お問い合わせ"を付けた |
[user-scalable="no"] is used in the <meta name="viewport"> element… | スマホでの拡大を禁止している | 拡大を禁止する指定を外した |
2つの見本ページは、ブラウザで右クリックして「ページのソースを表示」を選ぶと、HTMLを見比べられます。
文字色と背景色のコントラストについては、コントラスト比とは?で基準と直し方を詳しく解説しています。
Performanceのスコアは5つの指標で決まる
Performanceのスコアは、表示の速さに関する5つの指標を、それぞれの重みで合計して計算されています。
| 指標 | 意味 | 重み |
|---|---|---|
| First Contentful Paint(FCP) | 最初に文字や画像が表示されるまでの時間 | 10% |
| Speed Index | ページの表示が埋まっていく速さ | 10% |
| Largest Contentful Paint(LCP) | 一番大きな画像や文章のかたまりが表示されるまでの時間 | 25% |
| Total Blocking Time(TBT) | 読み込み中に、クリックなどの操作を受け付けられなかった時間の合計 | 30% |
| Cumulative Layout Shift(CLS) | 読み込み中に、レイアウトがどれだけずれたか | 25% |
レポートの「Insights」(改善のヒント)や「Diagnostics」(診断)の欄には、画像を軽くする、使っていないコードを減らすといった、パフォーマンス改善のヒントも表示されます。
見本ページはとても軽いので、減点されるのは改善前のレイアウトのずれ(CLS)くらいですが、画像の多い実際のサイトでは、ここから改善点を探していくことになります。
実践のポイント
Lighthouseを使うときに知っておきたい注意点と、よくある疑問をまとめます。
注意点・よくある間違い
- Accessibilityが100点なら完璧、と思い込んでしまうことがあります。
たとえば改善前の見本ページでは、入力欄に見出し(ラベル)がなくても、薄い説明文(placeholder)があるため減点されませんでした。
レポートの「Additional items to manually check」(手動で確認する項目)も参考にし、実際に操作して確かめましょう。 - Performanceのスコアが1回ごとに上下して、慌ててしまうことがあります。
通信状況やパソコンの負荷によって数点〜十数点変わるのはよくあることなので、何回か測って傾向で判断しましょう。 - 画像の中の文字や、写真の上に重ねた文字のコントラストは、Lighthouseでは正しく判定できないことがあります。
こうした部分は、目で見ても確かめましょう。
よくある質問
- Q. PageSpeed Insightsとの違いは?
A. PageSpeed Insightsは、Lighthouseの検査をGoogleのサーバー上で実行してくれるWebサービスです。
URLを入れるだけで使えて、実際のユーザーの表示速度のデータもあわせて見られますが、公開されていないページやログインが必要なページは検査できません。
公開前のページを確かめるなら、Chromeのデベロッパーツールを使いましょう。 - Q. 何点を目指せばいい?
A. 目安は、すべてのカテゴリで緑(90点以上)です。
ただし点数そのものより、赤く表示された減点項目を1つずつ直していくことが大切です。 - Q. コマンドライン(CLI)で使うには?
A. Node.js(LTS版)とGoogle Chromeが入ったパソコンで、次のコマンドを実行します。
多くのページをまとめて検査したいときや、自動化したいときに便利です。
CLIでLighthouseをインストールして、検査結果をブラウザで開くコマンドの例です。
npm install -g lighthouse
lighthouse https://naoq.net/samples/lighthouse/before.html --viewまとめ
Google Lighthouseとは、Webページの表示の速さ、アクセシビリティ、制作の推奨ルール、SEOの4つを自動で採点し、改善のヒントを示してくれる無料のツールです。
Chromeのデベロッパーツールから、インストールなしですぐに使えます。
スコアは赤・オレンジ・緑の3色で判断し、減点された項目を開いて、問題のある箇所と直し方を確認しましょう。
まずはこの記事の改善前の見本ページでLighthouseを動かしてみて、慣れたら自分のサイトのトップページを検査してみてください。
