PageSpeed InsightsとLighthouseの違い｜ブログ

はじめに Lighthouse と PageSpeed Insights はどちらも Google が提供する Web パフォーマンス診断ツールですが、それぞれ異なる目的と機能を持っています。 🚀 Lighthouseとは？ Webページの総合的な評価ツール（開発者向け） Lighthouse は ページのパフォーマンスや品質を測定する開発者ツール で、以下の5つのカテゴリを評価します。 📊 Lighthouse の評価項目 Performance（パフォーマンス） ページの読み込み速度や最適化状況 Accessibility（アクセシビリティ） 画面リーダー対応やコントラスト比のチェック Best Practices（ベストプラクティス） セキュリティや最新の技術を適用しているか SEO（検索エンジン最適化） 検索エンジン向けの最適化が適切か Progressive Web App（PWA） PWA（オフライン対応アプリ）としての適性 🛠 Lighthouse の特徴 開発者向け（ブラウザの DevTools で利用可能） ローカル環境で測定可能（ネットワークや端末の影響を受ける） オフラインでも利用できる より詳細な技術的な指摘を提供 📌 使い方 Chrome の DevTools（開発者ツール）から実行 F12 → Lighthouse タブ → Generate Report Web版 Lighthouse（PageSpeed Insights でも利用される） 🚀 PageSpeed Insights とは？ ✅ Webページのパフォーマンス測定ツール（一般ユーザー向け） PageSpeed Insights (PSI) は、Google のサーバーを通じて Webサイトのパフォーマンスを評価し、改善点を提示するツール です。 📊 PSI の評価項目 Lighthouseの「Performance」スコアを使用 Core Web Vitals（重要指標） をチェック LCP（Largest Contentful Paint）: 表示速度 FID（First Input Delay）: インタラクションの速さ CLS（Cumulative Layout Shift）: レイアウトの安定性 サーバー側の最適化（キャッシュ、圧縮、リソース最適化など） モバイル・デスクトップの両方の測定が可能 🛠 PSI の特徴 Google のサーバーを通じて測定（環境に依存しない） リアルユーザーデータ（フィールドデータ）を提供 簡単なレポート表示（技術者でなくても使いやすい） Lighthouse のパフォーマンス評価を利用 Page Experience（UX指標）にも関連 📌 使い方 Googleの PSI サイトでURLを入力 PageSpeed Insights モバイル・デスクトップのパフォーマンスを比較 改善点を確認し、最適化を実施 まとめ Lighthouse は 開発者向け の総合診断ツール PageSpeed Insights は 一般向け で、主に ページ速度とCore Web Vitals に特化 PageSpeed Insights は Lighthouse の「パフォーマンス」スコアを利用しているが、リアルデータも考慮する どちらのツールが優れているとかではなく、特徴を踏まえた上で、適切に使い分けてサイトのパフォーマンスをよくしていきましょう。