WEBサイトの表示速度の計測ツールは？PageSpeed InsightsとLighthouseの特徴と使い方

現代のWebサイト運営において、表示速度は単なる技術的な要素ではなく、ユーザー体験やSEO、そして最終的なコンバージョン率にまで直結する重要な要素となっています。

このような背景から、Webサイトの表示速度を正確に測定し、改善していくことは、あらゆるWebサイト運営者にとって必須の課題となっています。しかし、表示速度を測定するためのツールは数多く存在し、それぞれに特徴や用途が異なるため、どのツールを使うべきか迷ってしまう方も多いでしょう。

今回は、Googleが提供する代表的な表示速度計測ツールである「PageSpeed Insights」と「Lighthouse」について、その特徴から使い方、そして具体的な改善方法まで、初心者の方でも理解できるよう詳しく解説していきます。

主なWEBサイトの表示速度の計測ツールは2つ

Webサイトの表示速度を計測するツールは多数存在しますが、その中でも特に信頼性が高く、多くのWeb制作者や運営者に愛用されているのが、Googleが提供する「PageSpeed Insights」と「Lighthouse」です。

これらのツールは、いずれもGoogleが開発した無料のツールでありながら、プロフェッショナルレベルの詳細な分析を提供してくれます。

PageSpeed InsightsとLighthouseの比較表

これらの2つのツールは、それぞれ異なる目的と特徴を持っており、使い分けることでより効果的な表示速度の改善が可能になります。

PageSpeed Insightsは表示速度の測定に特化し、安定した測定結果を提供してくれる一方で、Lighthouseはより幅広い観点からWebサイトの品質を評価してくれます。

PageSpeed Insightsの特徴

PageSpeed Insightsは、Googleが2010年から提供している老舗の表示速度計測ツールです。その最大の特徴は、シンプルな操作でありながら、非常に詳細で実用的な分析結果を提供してくれることです。URLを入力して「分析」ボタンをクリックするだけで、わずか数十秒でWebページの表示速度を100点満点で評価し、具体的な改善提案まで提示してくれます。

このツールの優れた点は、実際のユーザーデータに基づいた「フィールドデータ」と、統制された環境で測定した「ラボデータ」の両方を提供することです。フィールドデータは、過去30日間に実際にそのページを訪問したユーザーの体験データを元にしており、現実的なユーザー体験を反映しています。一方、ラボデータは特定の条件下でのシミュレーション結果であり、サイト側の技術的な問題を特定するのに役立ちます。

また、PageSpeed Insightsは、Googleが検索ランキングの要因として採用しているCore Web Vitals（LCP、FID、CLS）の測定にも対応しており、SEO対策の観点からも非常に重要なツールとなっています。これらの指標は、ページの読み込み速度、インタラクティブ性、視覚的安定性を測定し、ユーザー体験の質を総合的に評価します。

どんな時に使うのがおすすめか

PageSpeed Insightsは、以下のような場面で特に威力を発揮します。

• 定期的な監視と改善のタイミング
• 競合サイトとの比較分析
• SEO対策の一環として
• クライアントへの報告資料として

Webサイトの表示速度は、コンテンツの更新や新機能の追加によって変動することがあります。

PageSpeed Insightsを定期的に使用することで、これらの変化を早期に発見し、適切な対策を講じることができます。

自社サイトだけでなく、競合他社のWebサイトの表示速度も測定できるため、業界内での自社の位置を把握し、差別化のポイントを見つけることができます。

Core Web Vitalsの測定結果は、検索エンジンの評価に直接影響するため、SEO対策の効果測定や改善方針の決定に活用できます。

Web制作会社や代理店の方々にとって、PageSpeed Insightsの結果は、クライアントに対して技術的な改善効果を視覚的に示すための重要な資料となります。

Lighthouseの特徴

Lighthouseは、PageSpeed Insightsと同じくGoogleが開発したツールですが、より包括的なWebサイト品質評価を行うことができます。表示速度だけでなく、アクセシビリティ、SEO、PWA（Progressive Web App）対応、セキュリティなど、現代のWebサイトに求められるあらゆる要素を5つの観点から評価してくれます。

このツールの最大の特徴は、開発者向けの詳細な診断機能です。各項目について、単に点数を表示するだけでなく、具体的な問題点と改善方法を詳しく説明してくれます。例えば、画像の最適化が必要な場合、どの画像をどのように圧縮すれば良いか、具体的なファイル形式の推奨まで提示してくれます。

また、Lighthouseは Chrome DevTools に組み込まれているため、開発者にとって非常に使いやすい環境が整っています。コードの変更を行いながら、リアルタイムで改善効果を確認できるため、効率的な開発サイクルを構築することができます。

どんな時に使うのがおすすめか

Lighthouseは、以下のような場面で特に有効です。

• Webサイトの総合的な品質チェック
• 開発プロセスでの継続的な品質管理
• アクセシビリティの改善
• PWA対応の検討

新しいWebサイトの公開前や、既存サイトの大幅なリニューアル時に、技術的な品質を総合的に評価したい場合に最適です。

開発中に定期的にLighthouseを実行することで、品質の低下を未然に防ぎ、高品質なWebサイトを維持することができます。

視覚障害者や高齢者など、あらゆるユーザーが利用しやすいWebサイトを作るために、アクセシビリティの観点から詳細な分析を行いたい場合に役立ちます。

モバイルアプリのような体験を提供するPWAの導入を検討している場合、現状の対応状況と改善点を把握することができます。

PageSpeed Insightsの使い方

PageSpeed Insightsの使い方は非常にシンプルですが、その結果を正しく理解し、効果的に活用するためには、いくつかのポイントを押さえておく必要があります。

基本的な使用手順

ステップ1: PageSpeed Insightsにアクセス Googleで「PageSpeed Insights」と検索するか、直接 https://pagespeed.web.dev/ にアクセスします。シンプルな画面が表示され、中央に URL 入力欄があります。

ステップ2: 分析したいページのURLを入力 測定したいWebページの完全なURLを入力します。トップページだけでなく、商品ページや記事ページなど、任意のページを分析することができます。

ステップ3: 分析の実行 「分析」ボタンをクリックします。分析には通常30秒から1分程度かかります。この間、Googleのサーバーが指定されたページにアクセスし、様々な測定を行います。

ステップ4: 結果の確認 分析が完了すると、モバイルとデスクトップの両方の結果が表示されます。初期状態ではモバイルの結果が表示されますが、画面上部のタブでデスクトップの結果に切り替えることができます。

結果画面の見方

PageSpeed Insightsの結果画面は、大きく「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」の2つのセクションに分かれています。

実際のユーザーの環境で評価する（フィールドデータ） このセクションでは、過去30日間に実際にそのページを訪問したユーザーの体験データが表示されます。ここで重要なのは、Core Web Vitals の3つの指標です：

• LCP（Largest Contentful Paint）: ページの最も大きなコンテンツが表示されるまでの時間
• FID（First Input Delay）: ユーザーの最初の操作に対する応答時間
• CLS（Cumulative Layout Shift）: ページ読み込み中のレイアウトの変化

これらの指標は、それぞれ「良好」「改善が必要」「不良」の3段階で評価されます。

パフォーマンスの問題を診断する（ラボデータ） このセクションでは、統制された環境でのシミュレーション結果が表示されます。ここでは、より技術的な詳細を確認できます：

• Total Blocking Time: ページの応答性を阻害している時間
• Speed Index: ページの視覚的な表示速度
• Time to Interactive: ページが完全に操作可能になるまでの時間

改善提案の活用方法

PageSpeed Insightsの真の価値は、問題点を指摘するだけでなく、具体的な改善方法を提案してくれることにあります。結果画面の下部には、「改善できる項目」と「診断」のセクションがあり、ここで詳細な改善提案を確認できます。

改善できる項目では、実装することで表示速度の向上が期待できる具体的な施策と、その効果の予測時間が表示されます。例えば、「画像を最適化する」「未使用のJavaScriptを削除する」「次世代フォーマットでの画像の配信」などです。

診断では、Webページの技術的な問題点と推奨される対策が詳しく説明されます。これらの情報を基に、優先度の高い改善から順次実装していくことで、効果的な表示速度の改善が可能になります。

Lighthouseの使い方

Lighthouseは、PageSpeed Insightsよりも多機能で詳細な分析を提供してくれるツールです。使い方も複数の方法があり、用途に応じて最適な方法を選択することができます。

基本的な使用手順

方法1: Chrome拡張機能を使用

ステップ1: 拡張機能のインストール Chrome ウェブストアから「Lighthouse」拡張機能を検索し、インストールします。インストール後、ブラウザの右上にオレンジ色の灯台アイコンが表示されます。

ステップ2: 分析したいページを開く 測定したいWebページをChromeで開きます。この際、できるだけ他のタブを閉じて、測定環境を整えることが推奨されます。

ステップ3: Lighthouseの実行 拡張機能のアイコンをクリックし、「Generate report」ボタンを押します。分析には1-2分程度かかります。

方法2: Chrome DevToolsを使用

ステップ1: DevToolsを開く 分析したいページでF12キーを押すか、右クリックして「検証」を選択してDevToolsを開きます。

ステップ2: Lighthouseタブを選択 DevToolsの上部にあるタブから「Lighthouse」を選択します。

ステップ3: 分析設定の調整 分析したい項目（Performance、Accessibility、Best Practices、SEO、PWA）を選択し、デバイスタイプ（Mobile または Desktop）を設定します。

ステップ4: 分析の実行 「Generate report」ボタンをクリックして分析を開始します。

結果画面の詳細な読み方

Lighthouseの結果画面は、5つの主要カテゴリに分かれており、それぞれ0-100点のスコアで評価されます。

Performance（パフォーマンス） このセクションでは、ページの読み込み速度と応答性が評価されます。主要な指標として以下が含まれます：

• Metrics: 6つの主要パフォーマンス指標
• Opportunities: 改善により予想される時間短縮効果
• Diagnostics: 技術的な問題点の詳細分析

Accessibility（アクセシビリティ） 視覚障害者や高齢者など、あらゆるユーザーがWebサイトを利用しやすいかどうかを評価します：

• カラーコントラストの適切性
• 代替テキストの設定状況
• キーボードナビゲーションの対応状況
• スクリーンリーダーとの互換性

Best Practices（ベストプラクティス） 現代のWeb開発における推奨事項への準拠状況を確認します：

• HTTPS の使用
• セキュリティ関連の設定
• 画像のアスペクト比
• コンソールエラーの有無

SEO 検索エンジン最適化の観点から、技術的な問題点をチェックします：

• メタディスクリプションの設定
• タイトルタグの最適化
• robots.txtの適切な設定
• 構造化データの実装状況

PWA（Progressive Web App） モバイルアプリのような体験を提供するPWAの対応状況を評価します：

• サービスワーカーの実装
• ウェブアプリマニフェストの設定
• オフライン機能の対応
• インストール可能性

改善提案の活用方法

Lighthouseの各カテゴリでは、問題点と具体的な改善方法が詳しく説明されます。特に重要なのは、以下の3つのセクションです：

Passed Audits（合格した監査） 既に適切に実装されている項目が表示されます。これらは現在の実装を維持すべき項目です。

Failed Audits（失敗した監査） 改善が必要な項目が表示されます。各項目をクリックすると、詳細な説明と改善方法が確認できます。

Additional items to manually check（手動チェック項目） 自動検出できない項目で、手動での確認が推奨される項目が表示されます。

非同期読み込みの実装 重要でないリソースを非同期で読み込むことで、初期表示速度を改善：

• JavaScriptの非同期読み込み: async や defer 属性の活用
• フォントの最適化: font-display: swap の使用
• サードパーティスクリプトの遅延読み込み: 広告やソーシャルメディアウィジェットの遅延読み込み

データベースの最適化 動的サイトでは、データベースの最適化が重要です：

• クエリの最適化: 不要なデータベースクエリの削除
• インデックスの設定: 頻繁に使用される検索条件にインデックスを設定
• キャッシュシステムの導入: Redis や Memcached などのキャッシュシステムの活用

上級レベルの改善方法

サーバーサイドの最適化 サーバーの設定やインフラレベルでの改善：

• HTTP/2の導入: 多重化による効率的な通信
• Gzip圧縮の有効化: サーバーレベルでのファイル圧縮
• サーバーの性能向上: CPU、メモリ、ストレージの最適化

Service Worker の活用 PWA技術を活用した高度なキャッシュ制御：

• オフライン対応: 重要なリソースのローカル保存
• プリキャッシュ: 将来必要になるリソースの事前読み込み
• ストリーミング: 大きなファイルの段階的読み込み

LCP（Largest Contentful Paint）の改善

LCPは、ページの最も大きなコンテンツが表示されるまでの時間を測定する指標で、Core Web Vitalsの中でも特に重要です。

LCP改善の具体的な方法：

1. 重要な画像の最適化 LCPの対象となることが多い大きな画像の最適化：

• 画像の事前読み込み: <link rel="preload"> タグの使用
• 適切な画像形式の選択: WebP、AVIF などの次世代形式の活用
• レスポンシブ画像: デバイスに応じた最適なサイズの配信

2. サーバー応答時間の短縮 TTFBの改善がLCPに直接影響：

• サーバー処理の最適化: データベースクエリの高速化
• CDNの活用: 地理的に近いサーバーからの配信
• HTTP/2の活用: 効率的なリソース配信

3. レンダリングブロックの削除 重要でないリソースがレンダリングを阻害しないよう調整：

• クリティカルCSSの抽出: 初期表示に必要なスタイルのみを先読み
• JavaScriptの最適化: 非同期読み込みの積極的な活用

CLS（Cumulative Layout Shift）の改善

CLSは、ページ読み込み中のレイアウトの変化を測定する指標で、ユーザー体験に大きく影響します。

CLS改善の具体的な方法：

1. 画像・動画のサイズ指定 レイアウトシフトの最も一般的な原因の対策：

• widthとheightの明示的な指定: すべての画像に適切なサイズを設定
• アスペクト比の保持: CSSの aspect-ratio プロパティの活用
• プレースホルダーの使用: 画像読み込み前の領域確保

2. 動的コンテンツの制御 広告やウィジェットによるレイアウトシフトの対策：

• 広告スペースの事前確保: 広告が表示される領域を事前に確保
• フォントの最適化: フォント読み込み中のレイアウト変化を防止
• 動的コンテンツの制御: JavaScript による動的な要素追加の最適化

FID（First Input Delay）の改善

FIDは、ユーザーの最初の操作に対するページの応答時間を測定する指標です。

FID改善の具体的な方法：

1. JavaScriptの最適化 メインスレッドの負荷軽減：

• 長いタスクの分割: 50ms以上の処理を小さな単位に分割
• 不要なJavaScriptの削除: 使用していないライブラリの削除
• コード分割: 必要な機能のみを先に読み込み

2. Web Workers の活用 重い処理をバックグラウンドで実行：

• 計算処理の移譲: 複雑な計算をWeb Workerで実行
• データ処理の最適化: 大量のデータ処理をメインスレッドから分離

表示速度改善のビジネス効果

表示速度の改善は、単なる技術的な改善ではなく、ビジネスにとって大きな価値をもたらします。特に、landinghubのようなランディングページ制作サービスでは、表示速度の改善が直接的にコンバージョン率の向上につながることが多く報告されています。

コンバージョン率への影響

表示速度とコンバージョン率の関係性 Aberdeen Groupの調査によると、表示速度が1秒遅くなるとコンバージョン率が7%低下することが明らかになっています。これは、ECサイトであれば売上の直接的な減少を意味し、リード獲得サイトであれば機会損失を意味します。

具体的な影響：

• 1秒の遅延: コンバージョン率7%低下
• 2秒の遅延: コンバージョン率36.5%低下
• 3秒の遅延: 離脱率53%増加

ランディングページでの実例 landinghubでのランディングページ制作において、表示速度の改善により以下のような効果が確認されています：

• PageSpeed Insightsスコア40点→85点改善: コンバージョン率21%向上
• LCP 4.2秒→2.1秒改善: 離脱率32%減少
• CLS 0.35→0.08改善: ユーザー満足度向上

SEO効果

検索順位への影響 2021年6月のCore Web Vitalsのランキング要因導入以降、表示速度の改善は検索順位に直接的な影響を与えるようになりました。特に、競合サイトとの差別化要因として重要な役割を果たしています。

オーガニック流入の増加 表示速度の改善により、検索順位が向上し、オーガニック流入が増加することが多く報告されています。これは、SEO対策における新たな重要要素として認識されています。

ユーザー体験の向上

直帰率の改善 表示速度の改善により、ユーザーがページを離れる前にコンテンツを閲覧する機会が増加し、直帰率の改善が期待できます。

ブランドイメージの向上 高速で快適なWebサイトは、ユーザーに対して信頼感と満足感を提供し、ブランドイメージの向上にも寄与します。

まとめ

Webサイトの表示速度は、現代のデジタルマーケティングにおいて極めて重要な要素となっています。PageSpeed InsightsとLighthouseという2つの優れたツールを活用することで、技術的な専門知識がなくても、効果的な表示速度の測定と改善が可能です。

PageSpeed Insightsは、表示速度の測定に特化したツールとして、定期的な監視やSEO対策に最適です。一方、Lighthouseは、より包括的なWeb品質の評価が可能で、開発プロセスでの品質管理に威力を発揮します。どちらのツールも、それぞれの特徴を理解して適切に使い分けることが重要です。

表示速度の改善は、単なる技術的な改善ではなく、ユーザー体験の向上、SEO効果の獲得、そして最終的にはビジネス成果の向上に直結する重要な取り組みです。特に、ランディングページにおいては、表示速度の改善が直接的にコンバージョン率の向上をもたらすことが多く報告されており、landinghubのような専門的なランディングページ制作サービスでは、これらの最適化技術が標準的に提供されています。