ページ表示速度の改善方法10選｜PageSpeed Insightsの使い方と計測手順

サイトの読み込みが遅いと、訪問者の離脱率が上がり、SEO評価にも悪影響を与えることがわかっています。

表示速度はGoogleのランキング要因の一つであり、コンバージョンや売上にも直結する重要な指標です。

本記事では、PageSpeed Insightsを使った計測手順から画像圧縮・キャッシュ活用まで、表示速度を改善する方法を10個まとめて解説します。

ページ表示速度がSEO・売上に与える影響

ページの表示速度は、SEO評価とビジネス成果の両方に深く関わる重要指標です。

Googleのランキングアルゴリズムにはサイトスピードが組み込まれており、Core Web Vitalsとも密接に連動しています。

また、読み込みが遅いことで直帰率が上昇し、CVRや売上アップの機会を逃すリスクも生じます。

このセクションでは、なぜ今すぐ改善に取り組むべきかをSEOとビジネスの両面から解説します。

表示速度はGoogleの検索ランキング要因

Googleは2018年の「Speed Update」以降、モバイル検索においても表示速度をランキング要因として明確に採用しています。

さらに2021年からはCore Web Vitals（LCP・INP・CLS）がPage Experienceシグナルの一部として評価されるようになりました。

PageSpeed Insightsを使った診断でパフォーマンスの問題を確認し、これらの指標を改善することが検索順位向上への近道です。

SEO対策として、コンテンツ品質と並行して取り組む必要があります。

表示速度がコンバージョン・売上に直結する理由

Googleの調査によると、ページの読み込みが1秒から3秒に延びると直帰率は約32%上昇することが示されています。

また、読み込み速度をわずかに改善するだけでCVRが向上するというデータも報告されています。

サイトスピードの改善は単なるパフォーマンス向上にとどまらず、直帰率の低下・滞在時間の延長・売上アップに直結する施策です。

サイト制作会社への依頼時にも、速度最適化を要件として明示することが重要です。

ユーザー満足度と表示速度の目安

Webページの表示速度の目安として、一般的にはモバイルで3秒以内、PCで2秒以内が推奨されています。

スマホユーザーはモバイル回線の制約があるため、サイトの読み込みが遅いと感じやすく、離脱につながるリスクが特に高まります。

PageSpeed InsightsやChromeのデベロッパーツールで計測し、まずはこの目安を達成できているかを確認することが改善の第一歩です。

ページ表示速度が遅くなる主な原因

ページの表示速度を改善するには、まず速度低下の原因を正確に把握することが欠かせません。

原因を特定せずに施策を実施しても、効果は限定的です。

主な原因は、画像・動画ファイルのサイズ、CSS・JavaScriptのソースコードの最適化不足、サーバー性能や計測タグの過多など複数のカテゴリに分類できます。

以降のセクションで各原因を詳しく解説します。

画像・動画ファイルのサイズが大きい

ページの読み込みを遅くする最も一般的な原因の一つが、最適化されていない画像・動画ファイルの容量の大きさです。

未圧縮のJPEGやPNG、高解像度のまま掲載した動画は、ブラウザが取得すべきデータ量を大幅に増加させます。

特にスマホユーザーはモバイル回線の帯域幅が限られるため、サイトの読み込みが遅いと感じやすく、離脱率の上昇につながります。

画像サイズの圧縮と適切なリサイズは、サイトスピード改善における最優先項目の一つです。

CSSやJavaScriptが最適化されていない

未圧縮・未minify状態のCSS・JavaScript・HTMLソースコードも、ページの表示速度を低下させる大きな要因です。

特に問題となるのがレンダーブロッキングリソースで、ブラウザがページを描画する前にCSSやJavaScriptファイルの読み込みを完了させる必要が生じ、表示開始が遅延します。

コードの軽量化（minify）や読み込み順序の最適化を行うことで、診断スコアを大幅に改善できる場合があります。

サーバー性能や効果計測タグの過多

サーバーの応答時間（TTFB：Time To First Byte）も、ページの表示速度に直接影響します。

低価格なレンタルサーバーはリソースが共有されるため、サーバー応答が遅くなる傾向があります。

また、広告やアクセス解析などの効果計測用タグをGoogleタグマネージャー（GTM）を経由せずに多数直接埋め込むと、タグの実行処理が積み重なりページの読み込みを遅延させます。

PageSpeed Insightsで診断し、サーバーとタグ管理の両面から原因を確認することが重要です。

PageSpeed Insightsの使い方と結果の見方

PageSpeed Insights（ページスピードインサイト）は、Googleが無料で提供するWebページの表示速度診断ツールです。

URLを入力するだけでモバイルとPCの両方のパフォーマンスを計測・評価できるため、サイトスピードの改善に取り組む第一歩として最適です。

ここでは計測手順から結果の読み解き方まで詳しく解説します。

PageSpeed InsightsでURLを計測する手順

計測方法はシンプルな3ステップです。

Webページの表示速度の目安を把握したい場合は、まずこの手順で計測を行いましょう。

なお、ChromeブラウザのデベロッパーツールからLighthouseを使って同様の診断を行うことも可能です。

スコアとフィールドデータ・ラボデータの見方

診断結果画面には、0〜100点のパフォーマンススコアが表示されます。

90点以上が緑（良好）、50〜89点がオレンジ（改善が必要）、49点以下が赤（不良）の評価基準となっています。

結果はさらに「フィールドデータ」と「ラボデータ」の2種類に分かれます。

フィールドデータは実際のユーザーの計測結果を集計した実測値であり、ラボデータは模擬環境で行ったテスト結果です。

サイトスピードの評価としてはフィールドデータが優先されますが、再現性の高いラボデータも改善の原因特定に有効です。

両方を組み合わせて診断することで、より精度の高いパフォーマンス改善が可能になります。

Core Web Vitals（LCP・INP・CLS）の確認方法

PageSpeed Insightsでは、SEOのPage Experienceシグナルとして重要なCore Web Vitalsの3指標も確認できます。

各指標の意味と合格基準は以下の通りです。

赤や橙の項目が改善優先度の高い箇所です。

特にLCPは画像の最適化と直結するため、スコア改善の第一施策として取り組む効果が大きい項目です。

ページ表示速度の改善方法10選

表示速度を改善するには、PageSpeed Insightsの診断結果をもとに優先度の高い施策から順に着手することが効率的です。

改善の手段は大きく「画像・コード最適化といったフロントエンド系の施策」と「サーバー設定やCDN活用といったインフラ系の施策」の2軸に整理できます。

以下では、スコアへの影響が大きい順に10の具体策を解説します。

【改善1〜3】画像の最適化と次世代フォーマット変換

ページの読み込みを高速化するうえで、画像の最適化は最も効果の大きい施策の一つです。

PageSpeed Insightsの診断でも上位に挙がりやすい原因であり、以下の3つの方法を組み合わせることでパフォーマンスを大きく改善できます。

改善1：WebP・AVIFなど次世代フォーマットへの変換

JPEGやPNGと比較して、WebPはファイルサイズを約25〜35%、AVIFは最大50%程度圧縮できる次世代フォーマットです。

画像圧縮による容量削減は、直接的な読み込み時間の短縮につながります。

変換ツールとしては、ブラウザ上で手軽に操作できるSquooshや、まとめて圧縮できるTinyPNGが代表的です。

WordPressを利用している場合は「EWWW Image Optimizer」などのプラグインで自動変換も可能です。

改善2：表示サイズに合わせた適切なリサイズ

実際の表示領域よりも大きな解像度の画像を配信すると、不要なデータ転送が発生してサイトスピードを低下させます。

srcset属性を活用してデバイスごとに最適なサイズの画像を配信する「レスポンシブイメージ」の実装が推奨されます。

スマホでサイトの読み込みが遅いと感じる場合、過大なサイズの画像が原因であるケースは非常に多いため、モバイル向けの画像サイズを見直すことが優先施策となります。

改善3：遅延読み込み（loading=”lazy”）の適用

ファーストビューに表示されない画像に対してloading=”lazy”属性を付与することで、スクロールして画面に入るタイミングまで読み込みを遅延できます。

これにより初期ロードに必要なデータ量を削減でき、LCPの改善にも直結します。

設定はHTMLの<img>タグに属性を追加するだけで完結するため、技術的なコストが低い割に効果が高い施策です。

【改善4〜5】CSS・JS・HTMLの圧縮とminify

改善4：ソースコードの軽量化（minify）

CSS・JavaScript・HTMLファイルには、開発時のコメントや余分な空白・改行が多数含まれています。

これらを削除してソースコードを軽量化する「minify」処理を施すことで、ファイルサイズを削減しサイトスピードの向上につながります。

JavaScriptの圧縮にはTerser、CSSの圧縮にはCSSNanoが代表的なツールです。

WordPressを使用している場合は、AutoptimizeやWP Rocketといったプラグインで手軽にminifyを自動化できます。

PageSpeed Insightsの診断結果に「CSSの縮小化」「JavaScriptの縮小化」と表示されていれば、優先的に対応すべき改善項目です。

改善5：レンダーブロッキングリソースの解消（async／defer）

ブラウザはHTMLを上から順に解析するため、<head>内に記述されたJavaScriptの読み込みが完了するまでページの描画が止まる「レンダーブロッキング」が発生します。

<script>タグにasyncまたはdefer属性を付与することで、JSの読み込みをHTMLの解析と並行・後回しにでき、ページ読み込みの高速化に効果的です。

WordPressではAutoptimizeのJS最適化オプションやWP Rocketの「JSを遅延読み込み」機能を活用することで、コードを直接編集せずに解消できます。

【改善6〜7】ブラウザキャッシュとCDNの活用

改善6：ブラウザキャッシュの設定（Cache-Control）

ブラウザキャッシュとは、一度読み込んだCSSや画像などの静的ファイルをユーザーのデバイス上に保存し、再訪問時にサーバーから再取得せずに表示する仕組みです。

サーバー側でCache-Controlヘッダーを適切に設定することで、ページの読み込みを高速化し、サーバーへの負荷も同時に軽減できます。

WordPressサイトであればWP RocketやW3 Total Cacheを活用することで、コードを直接編集せずにキャッシュを有効化できます。

診断結果に「効率的なキャッシュポリシーを使用して静的なアセットを配信する」と表示されている場合は、優先的に対応すべき改善項目として確認してください。

改善7：CDN（コンテンツデリバリーネットワーク）の導入

CDNは、世界各地に分散したサーバーから静的ファイルをユーザーの近くから配信することで、ページ表示速度を大幅に向上させる仕組みです。

物理的な距離による通信遅延が減り、サイトのパフォーマンス改善に直結します。

代表的なサービスであるCloudflareは無料プランでも高い効果が得られるため、まず試す価値があります。

画像や動画など容量の大きいリソースをCDN経由で配信するだけで、スマホでのサイト読み込みが遅い問題にも有効に対処できます。

モバイル3秒以内を実現するうえで、キャッシュの活用とCDN導入は費用対効果の高い施策です。

【改善8〜9】サーバー応答時間の短縮とHTTP/2対応

改善8：サーバーの応答時間を減らす

サーバーの応答時間（TTFB：Time To First Byte）は、ブラウザがリクエストを送信してから最初の1バイトを受信するまでの時間です。

このTTFBが長いと、いくらフロントエンドを最適化してもページの表示速度を改善する効果が限定的になります。

サーバースピードの改善策として、まず検討したいのが高性能レンタルサーバーへの移行です。

低コストの共有サーバーはリソースが他ユーザーと分散されるため、アクセス集中時にTTFBが悪化しやすい傾向があります。

あわせてPHPのバージョンを最新化することも有効で、PHP 8.x系は旧バージョンと比較して処理速度が大幅に向上しています。

診断で「サーバーの応答時間を短縮してください」と指摘された場合は、サーバー環境の見直しを優先施策として検討してください。

改善9：HTTP/2への対応

HTTP/2は旧来のHTTP/1.1と比較して、複数のリクエストを並列処理できる多重化機能を備えており、CSS・JavaScript・画像など多数のリソースを一括取得する際の待ち時間を大幅に削減できます。

サイトのパフォーマンス改善において費用対効果が高い施策の一つです。

多くの主要レンタルサーバーやCDN（Cloudflareなど）はすでにHTTP/2に対応しており、SSL/TLS（HTTPS）化が前提条件となります。

まだHTTP/2を有効化していない場合は、サーバーの管理画面やサポートページで設定を確認しましょう。

モバイル3秒以内の達成を目指すうえで、HTTP/2対応はサーバー側で取り組める重要な改善方法です。

【改善10】不要なプラグインや計測タグの整理

WordPressサイトでは、プラグインを増やすほどPHPの処理量やHTTPリクエスト数が増加し、表示速度の低下につながります。

プラグインの軽量化を図るには、まずインストール済みのプラグイン一覧を見直し、使用頻度の低いものや機能が重複しているものを無効化・削除しましょう。

診断結果で「レンダーブロッキングリソース」や「未使用のJavaScript」が指摘されている場合、特定のプラグインが原因となっているケースが少なくありません。

また、広告・アクセス解析・ヒートマップなど効果計測用タグの削減も重要な改善方法です。

各タグを個別にページへ直接埋め込むと管理が煩雑になるうえ、スクリプトの読み込みが重なってサイトスピードに悪影響を及ぼします。

Googleタグマネージャー（GTM）を活用してタグを一元管理することで、不要なタグをすばやく停止・削除でき、パフォーマンスへの影響を最小限に抑えられます。

GTM導入後はPageSpeed Insightsで再計測し、スコアの変化を確認しながら運用しましょう。

表示速度チェックに使えるその他のツール

ページの表示速度を診断するツールは、PageSpeed Insightsだけではありません。

サイトスピードの改善を多角的に進めるには、目的や確認したい指標に応じてツールを使い分けることが重要です。

以下では、PageSpeed Insights以外で特に有用な計測ツールを紹介します。

Google Search ConsoleとChromeデベロッパーツール

Google Search Consoleでは、「ウェブに関する主な指標」レポートからCore Web Vitalsの実ユーザーデータをサイト全体にわたって確認できます。

特定のページだけでなく、問題のあるページをまとめて把握できる点が大きなメリットです。

また、Chromeデベロッパーツール（DevTools）のLighthouseパネルを使えば、ブラウザ上で直接パフォーマンス診断が可能です。

NetworkタブではHTTPリクエストの詳細やファイルサイズ、読み込み時間をウォーターフォール形式で確認でき、深い原因分析に役立ちます。

これらのツールを活用することで、サーバー応答時間やレンダリングの問題箇所を特定しやすくなります。

GTmetrix・WebPageTestの特徴と使い方

GTmetrixは、ウォーターフォールチャートによる詳細なリクエスト分析や、パフォーマンスのスコア推移をレポートとして保存できる機能が特徴のサイトスピード改善ツールです。

無料プランでも多くの診断項目を利用でき、PageSpeed Insightsと並んで定番の計測方法として活用されています。

WebPageTestは、実際の端末・ブラウザ・ネットワーク環境を細かく指定してテストできるため、スマホでのサイトの読み込みが遅い場合の原因究明にも適しています。

これらのツールをPageSpeed Insightsと組み合わせることで、より精度の高い診断と改善方法の優先順位付けが可能になります。

よくある質問

ここでは、ページの表示速度を改善するうえで多くの方が抱く疑問を、Q&A;形式でわかりやすくまとめています。

PageSpeed Insightsの目標スコアや、スマホでの読み込み遅延への対処法、SEO順位との関係、WordPressでの手軽な改善策、計測頻度の目安など、実践的な疑問にお答えします。

まとめ

本記事では、ページの表示速度を改善する重要性から、PageSpeed Insightsを使った計測方法、そして具体的な10の改善方法まで網羅的に解説しました。

まずはPageSpeed Insightsでサイトを診断し、スコアや各項目の原因を確認することからはじめましょう。

画像圧縮・キャッシュ活用・不要なプラグインの整理など、優先度の高い施策から順に取り組むことが、SEOとユーザー体験の両面で効果的です。

私たち株式会社Young Bushでは、サイトの表示速度改善やSEO最適化をはじめとするWeb制作・運用のご相談を承っています。

自社サイトのパフォーマンスにお悩みの際は、お気軽にお問い合わせください。