Webサイトの表示速度が遅くて悩んでいませんか？「PageSpeed Insightsで測定したけど、どの指標を見ればいいのかわからない」「スコアが低いけど、何から改善すればいいの？」そんな悩みを抱えている方も多いのではないでしょうか。
実は、PageSpeed Insightsの各指標には、それぞれ異なる意味があり、改善の優先順位も変わってきます。この記事では、PageSpeed Insightsの重要な指標について、見方から具体的な改善方法まで、初心者の方でもわかりやすく解説していきます。
記事の最後では、表示速度の改善を本格的に検討されている方向けに、landinghubの最適化サービスについても紹介していますので、ぜひ最後までご覧ください。
目次
PageSpeed Insightsとは？基本を理解しよう
PageSpeed Insightsは、Googleが無料で提供するWebサイトの表示速度測定ツールです。URLを入力するだけで、そのページの表示速度を0〜100点のスコアで評価し、具体的な改善提案まで提示してくれる優れものです。
このツールの特徴は、単純にスコアを表示するだけでなく、実際のユーザー体験を反映した指標で評価を行うことです。デスクトップとモバイルの両方に対応しており、現代のマルチデバイス環境に適した分析が可能です。
なぜPageSpeed Insightsが重要なのか
Webサイトの表示速度がなぜ重要なのか、その理由を具体的に見ていきましょう。
1. SEOへの直接的な影響
Googleは2018年7月から、モバイル検索でも表示速度をランキング要因として使用することを明言しています。これは「Speed Update」と呼ばれ、表示速度の遅いサイトが検索順位で不利になる可能性があることを意味しています。
2. ユーザー体験への影響
Googleの調査によると、モバイルページの読み込み時間が1秒から3秒に増加すると、直帰率が32%増加することが判明しています。さらに深刻なのは、1秒から5秒に増加すると90%以上も直帰率が増加することです。
つまり、たった数秒の違いで、多くのユーザーがサイトを離れてしまうということですね。これは売上やコンバージョンに直結する重要な問題です。
3. ビジネス成果への影響
実際に、表示速度の改善によってビジネス成果が向上した事例は数多くあります。楽天24では表示速度改善により、コンバージョン率が33.13%向上したという報告もあります。
PageSpeed Insightsの2つの評価軸を理解する
PageSpeed Insightsの結果を正しく理解するためには、2つの異なる評価軸があることを知っておく必要があります。
「実際のユーザーの環境で評価する」（フィールドデータ）
これは、実際のユーザーがそのページを訪問した際のパフォーマンスデータを基に算出されるものです。過去28日間のデータを使用し、Chrome User Experience Report（CrUX）から取得されます。
この評価方法の最大の特徴は、実際のユーザー環境（デバイス、ネットワーク速度、地理的位置など）を反映していることです。そのため、理論値ではなく、実際のユーザーが体験している速度を知ることができます。
「パフォーマンスの問題を診断する」（ラボデータ）
一方、こちらはGoogleの標準化された測定環境（Lighthouse）を使用して算出されます。毎回同じ条件で測定されるため、改善の効果を正確に比較できます。
ラボデータは、問題の特定や改善提案の根拠として活用されます。フィールドデータで問題が見つかった場合、ラボデータで具体的な原因を特定し、改善策を検討するという流れが効果的です。
Core Web Vitals：最も重要な3つの指標
2021年5月から、GoogleはCore Web Vitalsを検索ランキングの要因として導入しました。これらの指標は、ユーザー体験の質を測定する上で最も重要な要素とされています。
LCP（Largest Contentful Paint）：読み込み速度の王様
LCPは、ページの最も大きなコンテンツ要素が表示されるまでの時間を測定します。通常、メイン画像やヘッダー画像、大きなテキストブロックなどが対象となります。
評価基準：
- 良好：2.5秒以内
- 改善が必要：2.5～4.0秒
- 不良：4.0秒超
LCPの改善は、ユーザーが「ページが読み込まれた」と感じる時間を短縮する効果があります。特に、ファーストビューの印象を大きく左右するため、優先的に改善すべき指標といえるでしょう。
LCP改善の具体的な方法：
- 画像の最適化（圧縮、次世代フォーマットの使用）
- 重要でないJavaScriptやCSSの読み込み遅延
- サーバー応答時間の改善
- キャッシュの効果的な活用
FID/INP（First Input Delay / Interaction to Next Paint）：応答性の指標
FIDは、ユーザーが最初にページと相互作用（クリック、タップ、キー入力など）を試みてから、ブラウザがその入力に応答するまでの時間を測定します。
2024年3月からは、FIDに代わってINPが重要指標となりました。INPは、ページ上で発生するすべてのクリック、タップ、キーボード入力の応答時間を評価します。
評価基準（INP）：
- 良好：200ミリ秒以内
- 改善が必要：200～500ミリ秒
- 不良：500ミリ秒超
応答性の改善は、ユーザーの操作に対する「サクサク感」を向上させ、サイトの使い勝手を大きく改善します。特に、フォーム入力やメニュー操作などで効果を実感できるはずです。
INP改善の具体的な方法：
- 長時間実行されるJavaScriptの最適化
- 非同期処理の活用
- 不要なJavaScriptの削除
- サードパーティースクリプトの見直し
CLS（Cumulative Layout Shift）：視覚的安定性の守護者
CLSは、ページの読み込み中に発生する予期しないレイアウトの変化を数値化した指標です。よくある例として、広告や画像の遅延読み込みにより、ユーザーがクリックしようとしたボタンが突然移動してしまうケースがあります。
評価基準：
- 良好：0.1以下
- 改善が必要：0.1～0.25
- 不良：0.25超
CLSの改善は、ユーザーの誤操作を防ぎ、ストレスフリーなブラウジング体験を提供します。特に、ECサイトでは購入ボタンの誤クリックを防ぐ重要な指標となります。
CLS改善の具体的な方法：
- 画像や動画にwidth、height属性を指定
- 広告スペースの事前確保
- Webフォントの最適化
- 動的コンテンツの挿入位置の調整
その他の重要な指標を詳しく解説
Core Web Vitals以外にも、ページのパフォーマンスを総合的に評価する重要な指標があります。これらも理解しておくことで、より効果的な改善策を立てることができます。
FCP（First Contentful Paint）：初期表示の速さ
FCPは、ページが読み込まれ始めてから、最初のコンテンツ（テキスト、画像、SVGなど）が表示されるまでの時間を測定します。
評価基準：
- 良好：1.8秒以内
- 改善が必要：1.8～3.0秒
- 不良：3.0秒超
FCPは、ユーザーが「ページが読み込まれ始めた」と感じる瞬間を示します。この時間が短いほど、ユーザーの離脱率を下げる効果があります。
Speed Index：体感速度の指標
Speed Indexは、ページコンテンツが視覚的に表示される速度を測定します。完全に読み込まれるまでの時間ではなく、どれだけ速く内容が見えるようになるかを評価します。
この指標は、ユーザーの「体感速度」により近い評価を提供するため、実際のユーザー体験を改善する上で重要な参考値となります。
TBT（Total Blocking Time）：操作可能性の指標
TBTは、FCPからTTI（Time to Interactive）までの間で、メインスレッドが50ミリ秒以上ブロックされた時間の合計を測定します。
この時間が長いほど、ユーザーの操作に対する応答が遅くなり、フラストレーションを与える可能性が高くなります。
TTFB（Time to First Byte）：サーバー応答時間
TTFBは、ユーザーがページをリクエストしてから、サーバーが最初の1バイトを返すまでの時間を測定します。
評価基準：
- 良好：800ミリ秒以内
- 改善が必要：800～1800ミリ秒
- 不良：1800ミリ秒超
TTFBは、サーバーの性能やネットワーク状況を反映する指標であり、特にサーバー側の改善が必要な場合に重要な指標となります。
PageSpeed Insightsの正しい使い方
ここで、PageSpeed Insightsの基本的な使用方法から、結果の正しい解釈方法まで詳しく解説します。
基本的な使用手順
1. URLの入力
PageSpeed Insightsのページ（https://pagespeed.web.dev/）にアクセスし、測定したいページのURLを入力します。自社サイトだけでなく、競合サイトの測定も可能です。
2. デバイス別の評価確認
デフォルトでは「携帯電話」（モバイル）の評価が表示されます。「デスクトップ」タブをクリックすることで、PC版の評価も確認できます。
3. 結果の解釈
スコアは色分けされて表示されます：
- 0-49点：低速（赤色）
- 50-89点：改善が必要（オレンジ色）
- 90-100点：良好（緑色）
測定結果の変動について
PageSpeed Insightsの測定結果は、ネットワーク状況やサーバー負荷により変動することがあります。これは決して珍しいことではありません。
正確な評価を行うためには、2-3回測定し、最も良い結果を参考値として使用することが推奨されます。また、測定タイミングによっても結果が変わるため、定期的な測定を行い、トレンドを把握することが重要です。
表示速度改善の実践的手法
ここからは、具体的な改善手法について詳しく解説していきます。効果の高い手法から順番に説明しますので、ぜひ参考にしてください。
1. 画像最適化：最も効果的な改善手法
画像ファイルは、多くのWebページで最も容量を占める要素です。適切な最適化を行うことで、大幅な速度改善が期待できます。
ファイル形式の最適化
- JPEG：写真や複雑な画像に適している
- PNG：透明度が必要な画像に適している
- WebP：Googleが推奨する次世代フォーマット（20-35%の容量削減可能）
- AVIF：WebPよりもさらに高い圧縮率を実現
画像圧縮の実施
画像の品質を保ちながら、ファイルサイズを削減する圧縮は必須です。多くのオンラインツールやWordPressプラグイン（EWWW Image Optimizerなど）が利用可能です。
レスポンシブ画像の実装
デバイスに応じた適切なサイズの画像を配信することで、無駄な容量を削減できます。HTMLのsrcset属性やpicture要素を活用しましょう。
遅延読み込み（Lazy Loading）の実装
画面に表示されない画像の読み込みを遅らせることで、初期読み込み速度を向上させます。最近のブラウザでは、loading=”lazy”属性で簡単に実装できます。
2. コード最適化：技術的な改善
CSS・JavaScript・HTMLの軽量化
- 不要な空白や改行の削除
- 使用していないコードの削除
- ファイルの圧縮（minify）
- 複数ファイルの結合
非同期読み込みの実装
重要でないJavaScriptファイルを非同期で読み込むことで、レンダリングブロックを回避できます。async属性やdefer属性を適切に使用しましょう。
CSSの最適化
- Critical CSSのインライン化
- 不要なCSSの削除
- CSS配信の最適化
3. サーバー・インフラの改善
サーバー応答時間の改善
- 高性能サーバーの使用
- SSDの採用
- サーバーの地理的位置の最適化
- データベースクエリの最適化
キャッシュの活用
- ブラウザキャッシュの適切な設定
- サーバーサイドキャッシュの実装
- CDNの活用
gzip圧縮の有効化
HTTPレスポンスの圧縮により、転送量を大幅に削減できます。Apacheの場合はmod_deflate、Nginxの場合はgzipモジュールを使用します。
4. WordPressでの改善手法
多くのWebサイトで使用されているWordPressにおいても、専用の改善手法があります。
推奨プラグイン
- EWWW Image Optimizer：画像最適化
- Autoptimize：CSS・JavaScript最適化
- WP Fastest Cache：キャッシュ機能
- WP Rocket：総合的な高速化
テーマの最適化
軽量なテーマの選択や、不要な機能の削除により、基本的な速度向上が期待できます。高速化に特化したテーマを選ぶことも重要です。
改善の優先順位と戦略
PageSpeed Insightsで表示される改善項目は多岐にわたりますが、すべてを同時に行う必要はありません。効果的な改善を行うためには、適切な優先順位を設定することが重要です。
影響度の高い改善項目
1. 画像最適化（最優先）
- 即座に効果が現れやすい
- 技術的な難易度が比較的低い
- 大幅な改善が期待できる
2. サーバー応答時間の改善
- 全体的な速度向上に寄与
- ユーザー体験の根本的改善
- TTFBの大幅な改善が可能
3. JavaScript最適化
- 操作性の向上
- INPスコアの改善
- ユーザーインタラクションの改善
4. CSS最適化
- 初期表示速度の向上
- レイアウトシフトの削減
- FCP、LCPの改善
スコアにこだわりすぎない重要性
PageSpeed Insightsのスコアは重要ですが、100点を目指すことが必ずしも最適解ではありません。実際の検索結果を分析すると、PageSpeed Insightsのスコアが低くても上位表示されているページが多数存在します。
表示速度は重要ですが、コンテンツの質やユーザーの検索意図との関連性がより重要な要素となります。50点未満の場合は積極的な改善が必要ですが、50点以上であれば、他のSEO対策とのバランスを考慮した改善が効果的です。
具体的な改善事例とケーススタディ
実際の改善事例を見ることで、より具体的なイメージを持つことができます。ここでは、よくある問題と解決策を紹介します。
事例1：画像が多いECサイトの改善
問題：商品画像が多く、LCPが5秒を超えていた
解決策：
- WebP形式への変換で容量を40%削減
- 遅延読み込みの実装
- 適切なサイズの画像を配信
結果：LCPが2.2秒まで改善、コンバージョン率が15%向上
事例2：WordPress企業サイトの改善
問題：プラグインが多く、INPが800ミリ秒を超えていた
解決策：
- 不要なプラグインの削除
- 軽量テーマへの変更
- キャッシュプラグインの導入
結果：INPが180ミリ秒まで改善、直帰率が20%減少
PageSpeed Insights以外の総合的なSEO対策
表示速度の改善は重要ですが、それだけでは十分ではありません。総合的なSEO対策と組み合わせることで、より大きな効果を得ることができます。
トピッククラスターモデルの構築
関連するコンテンツを戦略的にまとめることで、サイト全体のSEO評価を向上させます。表示速度の改善と合わせて実施することで、より高い効果が期待できます。
コンテンツ品質の向上
どんなに表示速度が速くても、コンテンツの質が低ければ意味がありません。ユーザーの検索意図を満たす、価値のあるコンテンツを提供することが重要です。
メタディスクリプションの最適化
検索結果でのクリック率向上のため、魅力的なメタディスクリプションの作成も忘れずに実施しましょう。
改善後の効果測定と継続的な監視
改善を実施したら、その効果をしっかりと測定することが重要です。単純にPageSpeed Insightsのスコアが上がっただけでは不十分で、実際のビジネス指標への影響を確認する必要があります。
測定すべき指標
- PageSpeed Insightsスコアの変化
- Google Search ConsoleのCore Web Vitalsデータ
- 直帰率、滞在時間の変化
- コンバージョン率の変化
- 検索順位の変化
継続的な監視の重要性
表示速度の改善は一度行えば終わりではありません。新しいコンテンツの追加、システムの更新、外部サービスの変更などにより、パフォーマンスが低下する可能性があります。
定期的（月1回程度）にPageSpeed Insightsでチェックし、問題があれば早期に対処することが重要です。
よくある質問と回答
Q1: PageSpeed Insightsで100点を取る必要がありますか？
A1: 必ずしも100点を目指す必要はありません。50点以上であれば実用的な範囲です。重要なのは、実際のユーザー体験が良いかどうかです。100点を目指すあまり、サイトの機能を削減してしまっては本末転倒です。
Q2: モバイルとデスクトップ、どちらを優先すべきですか？
A2: 現在はモバイルファーストインデックスの時代なので、モバイルの改善を優先すべきです。ただし、デスクトップユーザーも多い場合は、両方のバランスを考慮した改善が必要です。
Q3: 改善効果が現れるまでどのくらい時間がかかりますか？
A3: 改善内容によって異なりますが、画像最適化やキャッシュ設定などは即座に効果が現れます。検索順位への影響については、数週間から数ヶ月かかる場合があります。
まとめ：総合的な改善戦略で成果を最大化
PageSpeed Insightsの各指標を理解し、適切な改善を行うことで、ユーザー体験の向上とSEO効果の両方を実現できます。重要なのは、スコアの向上だけでなく、実際のユーザー体験の改善を意識することです。
改善を進める際は、以下の順序で進めることをお勧めします：
- 現状分析：PageSpeed Insightsでの測定と問題点の特定
- 優先順位の決定：影響度と実装難易度を考慮した改善計画
- 段階的な実施：リスクを最小化しながらの改善実施
- 効果測定：改善後の測定と継続的な監視
特に、画像最適化やサーバー応答時間の改善など、効果が高く実装しやすい項目から着手することが成功の鍵となります。
