「ホームページの読み込みが遅い気がするけど、具体的に何を改善すればいいのかわからない」
こうした悩みを持つWeb担当者や経営者は多いです。
表示速度の問題は、目に見えにくいからこそ後回しにされがちです。 しかし、Googleの調査によると、ページの読み込みに3秒以上かかると53%のユーザーが離脱するというデータがあります。
表示速度が遅いサイトは、ユーザーを失い、検索順位を下げ、売上の機会を逃しています。 しかも、その損失は目に見えないため、問題に気づいていない企業がほとんどです。 安価に作ったHPほど、画像の最適化やコードの軽量化がされておらず、表示速度に問題を抱えているケースが目立ちます。 HPの表示速度はSEOのランキング要因のひとつです。SEO・MEO・口コミ施策と連携させて集客を設計するなら、HPの速度改善は避けて通れません。
この記事では、表示速度がSEOと集客に与える影響、改善すべき指標（Core Web Vitals）、そして具体的な改善施策を実践的に解説します。
ホームページ制作の基礎知識はホームページ制作の基礎知識にまとめています。 Core Web Vitalsの詳細な解説はCore Web Vitalsとは？指標の意味と改善方法、表示速度に特化した情報はページスピードの改善方法もご覧ください。
表示速度がSEOと集客に与える影響
表示速度は「ユーザー体験」と「検索順位」の両方に影響を与えます。
ユーザー行動への影響
表示速度とユーザー行動の関係は、複数の調査で明確になっています。
Googleの調査結果を紹介します。
| 読み込み時間 | 離脱率の増加 |
|---|---|
| 1秒 → 3秒 | 32%増加 |
| 1秒 → 5秒 | 90%増加 |
| 1秒 → 6秒 | 106%増加 |
| 1秒 → 10秒 | 123%増加 |
読み込みが1秒から3秒に遅くなるだけで、3人に1人が離脱する計算です。 5秒かかると約2倍、10秒ではほぼ全員が離脱します。
これは、どれだけ良いコンテンツを用意していても、読み込みが遅ければそもそも読まれないということを意味します。
ECサイトにおいては、表示速度とコンバージョン率の相関がさらに顕著です。 Amazonのデータでは、ページの読み込みが0.1秒遅くなるごとに売上が1%減少すると報告されています。
SEO（検索順位）への影響
Googleは2021年6月に「ページエクスペリエンスアップデート」を実施し、Core Web Vitals（後述）を正式にランキング要因として導入しました。
これにより、表示速度はSEOの直接的な評価指標になっています。
ただし、注意すべき点があります。 表示速度はあくまで「数百あるランキング要因の一つ」であり、コンテンツの質を上回ることはありません。 表示速度が遅くても、コンテンツが圧倒的に優れていれば上位表示されることはあります。
しかし、競合と同程度のコンテンツ品質であれば、表示速度の差が検索順位の差につながります。 特に、検索結果の1ページ目の1位と5位を分けるような僅差の競争では、表示速度の改善が順位を押し上げる可能性があります。
ブランドイメージへの影響
表示速度は、企業のブランドイメージにも影響します。
読み込みが遅いサイトに対して、ユーザーは無意識のうちに「信頼できない」「古い」「技術力が低い」という印象を持ちます。 特に、IT企業やWebサービスを提供する企業のサイトが遅い場合、信頼性への打撃は大きいです。
逆に、サクサク動くサイトは「きちんとしている」「最新技術を使っている」「ユーザーのことを考えている」というポジティブな印象を与えます。
改善すべき指標
Googleは、ユーザー体験の品質を測る指標として「Core Web Vitals（コアウェブバイタル）」を定義しています。 改善すべき指標は主に3つです。
LCP（Largest Contentful Paint）
LCPは、ページのメインコンテンツが表示されるまでの時間を測る指標です。 具体的には、ビューポート（画面に表示される範囲）内で最も大きなコンテンツ要素（画像やテキストブロック）が表示完了するまでの時間です。
評価基準は以下の通りです。
| 評価 | LCPの値 |
|---|---|
| 良好（Good） | 2.5秒以下 |
| 改善が必要（Needs Improvement） | 2.5〜4.0秒 |
| 不良（Poor） | 4.0秒超 |
LCPが遅い主な原因は以下の4つです。
- サーバーの応答が遅い（TTFB：Time To First Byteが長い）
- メインビジュアルの画像ファイルが大きすぎる
- CSS・JavaScriptのレンダリングブロック
- クライアントサイドレンダリングの遅延
多くのサイトで、LCPの低下原因はメインビジュアルの画像サイズにあります。 トップページに3MB以上のHero画像を使っているサイトは珍しくなく、これだけでLCPが4秒を超えることがあります。
INP（Interaction to Next Paint）
INPは、2024年3月にFID（First Input Delay）の後継として導入された新しい指標です。 ユーザーがページ上で操作（クリック、タップ、キー入力）をしてから、その操作に対する視覚的な応答が表示されるまでの遅延時間を測ります。
FIDが「最初の入力」のみを測定していたのに対し、INPはページ滞在中のすべての操作を対象にし、最も遅い操作の遅延時間を評価します。
評価基準は以下の通りです。
| 評価 | INPの値 |
|---|---|
| 良好（Good） | 200ミリ秒以下 |
| 改善が必要（Needs Improvement） | 200〜500ミリ秒 |
| 不良（Poor） | 500ミリ秒超 |
INPが遅くなる原因は、主にJavaScriptの処理の重さです。 大量のJavaScriptがメインスレッドをブロックすると、ユーザーの操作に対する応答が遅れます。
CLS（Cumulative Layout Shift）
CLSは、ページの読み込み中に発生する「レイアウトのずれ」を測る指標です。
例えば、テキストを読んでいる途中で広告が突然表示され、読んでいた場所がガクッとずれる。 ボタンを押そうとした瞬間にレイアウトが動いて、別のボタンを押してしまう。 こうした「意図しないレイアウトシフト」をスコア化したものがCLSです。
評価基準は以下の通りです。
| 評価 | CLSの値 |
|---|---|
| 良好（Good） | 0.1以下 |
| 改善が必要（Needs Improvement） | 0.1〜0.25 |
| 不良（Poor） | 0.25超 |
CLSの主な原因は以下の通りです。
- 画像・動画にサイズ属性（width/height）が指定されていない
- 遅延読み込みされた広告や埋め込みコンテンツ
- Webフォントの読み込みによるテキストのずれ（FOUT/FOIT）
- 動的に挿入されるコンテンツ（バナー、告知バーなど）
CLSは技術的には最も対処しやすい指標です。 画像にサイズ属性を指定するだけで、大幅に改善されるケースが多いです。
具体的な改善施策
Core Web Vitalsの各指標を改善するための具体的な施策を解説します。
画像の最適化（LCP改善に最も効果的）
表示速度改善の第一歩は、画像の最適化です。 多くのサイトで、画像ファイルの大きさが表示速度低下の最大の原因になっています。
具体的な施策は以下の通りです。
次世代フォーマット（WebP/AVIF）への変換。 JPEG・PNGに比べて、WebPは25〜35%、AVIFは50%以上ファイルサイズを削減できます。 WordPressの場合、「EWWW Image Optimizer」や「ShortPixel」などのプラグインで自動変換できます。
適切な画像サイズの設定。 1920px幅のフルサイズ画像をスマホで表示しても、実際に表示されるのは375px幅程度です。 画面サイズに応じて適切なサイズの画像を出し分ける「srcset属性」を活用しましょう。
遅延読み込み（Lazy Loading）の実装。
ファーストビュー以外の画像は、スクロールして表示範囲に入った時点で読み込むようにします。
HTMLのimg要素に loading="lazy" 属性を追加するだけで実装できます。
画像の圧縮。 画質を視覚的にほとんど変えずに、ファイルサイズを50〜80%削減できるツールがあります。 TinyPNG、Squoosh、ImageOptimなどが代表的です。
サーバーの応答速度改善（LCP改善）
サーバーの応答速度（TTFB：Time To First Byte）が遅い場合は、サーバー側の対策が必要です。
CDN（Content Delivery Network）の導入。 Cloudflare、AWS CloudFront、Fastlyなどのサービスを使えば、世界中のエッジサーバーからコンテンツを配信できます。 特に画像や静的ファイルの配信速度が大幅に向上します。 Cloudflareは無料プランでも基本的なCDN機能が使えます。
サーバーのスペックアップ。 共用サーバーで表示速度が遅い場合、VPS（仮想専用サーバー）やクラウドサーバーへの移行が効果的です。 日本のレンタルサーバーでは、エックスサーバー、ConoHa WING、さくらのVPSなどが速度に定評があります。
PHPバージョンの更新。 WordPressを使用している場合、PHPのバージョンが古い（7.x以前）と処理速度が大幅に遅くなります。 PHP 8.xに更新するだけで、処理速度が30〜50%改善されることがあります。
データベースの最適化。 WordPressの場合、記事のリビジョンデータ、スパムコメント、不要なプラグインのデータが蓄積し、データベースが肥大化することがあります。 「WP-Optimize」などのプラグインで定期的にクリーンアップしましょう。
CSS・JavaScriptの最適化（LCP・INP改善）
不要なCSS・JavaScriptの読み込みは、ページ表示を大幅に遅延させます。
レンダリングブロックの解消。 CSSとJavaScriptがHTMLの先頭（head要素内）で読み込まれると、ブラウザはそのファイルのダウンロードと処理が完了するまでページを描画しません。 これが「レンダリングブロック」です。
対策として、JavaScriptには defer または async 属性を付与し、HTMLの解析と並行してダウンロードさせます。
ファーストビューに不要なCSSは、読み込みを遅延させるか、インライン化（HTML内に直接記述）します。
ファイルの圧縮と結合。 CSS・JavaScriptファイルの不要な空白やコメントを削除する「minify（ミニファイ）」を行います。 WordPressの場合、「Autoptimize」や「WP Rocket」などのプラグインで自動化できます。
未使用コードの削除。 Google Chromeの開発者ツール「Coverage」タブを使えば、ページ上で実際に使われていないCSS・JavaScriptの割合を確認できます。 未使用率が高い場合は、不要なコードの削除やコード分割を検討しましょう。
レイアウトシフトの防止（CLS改善）
CLSの改善は、比較的簡単に実施できる施策が多いです。
画像と動画にサイズ属性を指定する。
すべてのimg要素に width と height 属性を明記します。
これにより、ブラウザは画像の読み込み前にスペースを確保でき、読み込み後のレイアウトシフトを防げます。
Webフォントの読み込みを最適化する。
Webフォント（Google Fontsなど）の読み込み中にシステムフォントが表示され、読み込み後にWebフォントに切り替わる際にレイアウトがずれることがあります。
CSSの font-display: swap を指定し、フォントのプリロード（<link rel="preload">）を行うことで、ずれを最小限にできます。
広告や埋め込みコンテンツのスペースを予約する。 広告バナーやYouTubeの埋め込みなど、遅延読み込みされるコンテンツには、あらかじめ表示領域のサイズをCSSで確保しておきます。
動的コンテンツの挿入位置に注意する。 ページ上部に後から挿入されるバナー（クッキー同意バナー等）は、既存コンテンツを押し下げてCLSを悪化させます。 画面下部に固定表示するか、ページ読み込み前にスペースを確保する設計にしましょう。
WordPressサイト向けの改善施策
WordPressサイトで表示速度を改善するための具体的な施策をまとめます。
キャッシュプラグインの導入。 ページキャッシュを有効にすることで、毎回のデータベースアクセスを減らし、表示速度を大幅に改善できます。 「WP Super Cache」「W3 Total Cache」「WP Rocket」（有料）がおすすめです。
不要なプラグインの削除。 プラグインが増えるほど、CSS・JavaScriptの読み込みが増え、表示速度は低下します。 「有効化しているが実際には使っていない」プラグインを定期的に見直し、削除しましょう。 目安として、プラグイン数は20個以下に抑えるのが理想です。
テーマの軽量化。 多機能テーマは便利ですが、使わない機能のためのコードが表示速度を低下させることがあります。 軽量さを重視したテーマ（SWELL、Lightning、GeneratePress等）を選びましょう。
FAQ
表示速度を無料で計測できるツールはありますか？
はい、Googleが提供する以下のツールが無料で使えます。 PageSpeed Insights（pagespeed.web.dev）は、URLを入力するだけでCore Web Vitalsのスコアと改善提案を表示します。 Google Search Consoleの「ウェブに関する主な指標」レポートでは、サイト全体のCore Web Vitals状況を確認できます。 Chrome DevToolsの「Lighthouse」タブでは、詳細なパフォーマンス分析が可能です。
表示速度のスコアは100点を目指すべきですか？
100点を目指す必要はありません。 PageSpeed Insightsのスコアは目安であり、90点以上が「良好」とされています。 50〜89点の「改善が必要」の範囲であっても、Core Web Vitalsの3指標（LCP・INP・CLS）がすべて「良好」であれば、SEOへの悪影響は限定的です。 100点を目指してデザインや機能を犠牲にするのは本末転倒です。
表示速度の改善にどのくらいの費用がかかりますか？
WordPressサイトの場合、プラグインの導入と設定だけで改善できるケースは0〜数万円程度です。 画像の最適化やサーバー移行を含めると10万〜30万円程度。 大規模なコード改修やサイトリニューアルが必要な場合は50万〜200万円程度かかります。 費用全般についてはホームページ制作の基礎知識をご参照ください。
スマホとPCでスコアが大きく違うのはなぜですか？
PageSpeed Insightsのモバイルスコアは、低スペックのスマホ（Moto G Power相当）をシミュレーションして計測されるため、PCよりも厳しい結果が出ます。 モバイルスコアが50点台でも、実際のスマホでは十分に快適に表示される場合があります。 ただし、Google検索ではモバイルの指標が重視されるため、モバイルスコアの改善を優先しましょう。
表示速度の改善はSEOにすぐ反映されますか？
すぐには反映されません。 Googleがサイトの速度データを更新するまでには、28日間のフィールドデータの蓄積が必要です。 改善後、少なくとも1〜2ヶ月は効果の反映に時間がかかると考えてください。 その間のSEO対策についてはCore Web Vitalsとは？指標の意味と改善方法も参考になります。
まとめ
ホームページの表示速度は、ユーザー体験・SEO・コンバージョン率のすべてに影響する重要な要素です。
改善すべき3つの指標（Core Web Vitals）を改めて整理します。
- LCP（2.5秒以下が目標）：メインコンテンツの表示速度。画像最適化とサーバー改善が有効
- INP（200ミリ秒以下が目標）：操作への応答速度。JavaScript最適化が中心
- CLS（0.1以下が目標）：レイアウトのずれ。画像サイズ指定とフォント最適化で改善
優先的に取り組むべき施策を3つに絞ると、以下の通りです。
- 画像の最適化（WebP変換・圧縮・遅延読み込み）
- キャッシュの有効化（特にWordPressサイト）
- 不要なCSS・JavaScriptの削除
表示速度の改善は、地味な作業の積み重ねです。 しかし、その効果は確実に数字として表れます。
まずはPageSpeed Insightsで現状を把握し、スコアの低い指標から順に改善していきましょう。
ホームページ制作全般の知識はホームページ制作の基礎知識、Core Web Vitalsの詳細はCore Web Vitalsとは？指標の意味と改善方法、ページスピードの改善方法はページスピードの改善方法でそれぞれ解説しています。