Google Lighthouseを調べてみたメモ

Web制作してると、よく耳にする Google Lighthouse。
正直これまで「PageSpeed Insightsと同じもの？」くらいに思っていて、ちゃんと触ったことがありませんでした。でも最近「Insights Auditsに変わる」とかニュースを見かけて、いよいよちゃんと調べておかないとな…と。

ということで、自分なりに触ってみたときのメモです。

Lighthouseって？

ざっくりいうと Google公式のウェブページ診断ツール。
ページをチェックして、

• 表示速度（Performance）
• アクセシビリティ（Accessibility）
• セキュリティやベストプラクティス（Best Practices）
• SEO（基本的な部分だけ）
• PWA（プログレッシブWebアプリ対応）

をスコア化してくれます。
「あなたのサイトは今こんな状態ですよ」と見せてくれる健康診断みたいなやつですね。

どこから使えるの？

いざ触ってみると、いろんな入口がありました。

1. Chrome DevTools開発者ツール

Chromeの拡張機能でインストールし、灯台アイコンの「Lighthouse」タブから実行。
実際にはこんな感じになっていて、表示タイプが2つあるみたいです。

「改善点をざっくり見たい」なら PSI Frontend、
「細かくチェックしたい」なら Lighthouse Viewer が向いているようです。

2. PageSpeed Insights

以下にアクセスしてチェックしたいURLを入れるだけでOK。裏側ではLighthouseが動いてるみたい。
https://pagespeed.web.dev/

3. Node.js CLI / Lighthouse CI

コマンドラインやCI/CDで自動チェックできるみたい。GitHubActionsなどに組み込むにはこれがいいですね。

最初は PageSpeed Insights が一番ラクでした。Chrome拡張やDevToolsは「自分のローカル環境での挙動」を試したいときに便利。

やってみた感想

• スコアが100点じゃなくても「じゃあどこを直せばいいか」がリストで出るのが助かる。
• SEO対策というより「ユーザー体験をよくするチェックリスト」って感じ。

初見だと指摘が細かすぎる気がするんですが、最近は Insights Audits に統合されてきて、見やすくなりつつあるみたいです。

まとめ

• Lighthouseは「点数で一喜一憂するためのツール」じゃなくて「改善のヒント集」。
• 最初はPageSpeed Insightsで十分。
• 慣れてきたらDevTools版やCIで自動計測にステップアップ。

自分もまだ触り始めたばかりなので、次は「2025年のInsights Auditsへの移行」でどう変わるのかを追ってみようと思います。

今回は以上です！