Lighthouseは、Googleが提供するWebサイト品質測定ツールです。Performance・Accessibility・Best Practices・SEOといった観点でサイトを採点し、改善ポイントを具体的に提示してくれます。本記事では、Lighthouseを使ったサイト速度改善の10のチェックポイントを紹介します。
Lighthouseとは
LighthouseはChrome DevToolsに標準搭載されている監査ツールです。コマンドライン版・CI連携用（lighthouse-ci）もあり、品質改善を継続的に行えます。PageSpeed Insightsの背後でも同じエンジンが動いています。
改善チェックポイント10選
1. 画像の最適化
WebP / AVIFへの変換、適切なサイズ配信、loading="lazy"属性の活用、<picture>でのレスポンシブ画像配信を行います。
2. JavaScriptの削減
未使用JSの削除、code splitting（dynamic import）、サードパーティスクリプトの遅延ロード（async/defer）でメインスレッドの負荷を下げます。
3. CSSの最適化
Critical CSSの抽出・インライン化、未使用CSSの削除、CSSの圧縮で初期描画を高速化。Tailwind CSSなら自動でJITが効きます。
4. フォントの最適化
サブセット化・font-display: swap・preloadでCLS（レイアウトシフト）を抑える。Next.jsのnext/fontは自動最適化が効きます。
5. キャッシュヘッダーの設定
静的アセットに Cache-Control: public, max-age=31536000, immutable を設定し、再訪問時のロードを極小化します。
6. テキスト圧縮
Brotli または gzip でHTML/CSS/JSを圧縮。配信量が60-80%削減されます。
7. preconnect / preload
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="/hero.webp" as="image">8. CLS対策
画像・iframe・広告枠に width/heightを明示し、レイアウトシフトを防止。フォントロード時のFOUTにも注意。
9. 第三者スクリプトの削減
分析・広告・チャットなど第三者JSはサイト速度の最大要因。本当に必要か精査し、必要なものは遅延ロード化します。
10. サーバーレスポンス（TTFB）の改善
静的化（SSG）、CDN前段化、エッジ実行（Cloudflare Workers / Vercel Edge）でTTFBを短縮。動的ページもキャッシュ可能な箇所はCDNで保持します。
計測の流れ
# CLI
npm i -g lighthouse
lighthouse https://example.com --view
# Docker
docker run --rm patrickhulce/lighthouse-ci ...まとめ
Lighthouseは「数値で改善を可視化」できる強力なツールです。本記事の10項目を順番にチェックすれば、ほとんどのサイトでパフォーマンススコアを大幅に改善できます。Core Web Vitalsの3指標（LCP / INP / CLS）と合わせてモニタリングする運用が定石です。
