【2026年版】Webサイトの表示速度を劇的に改善する方法｜Core Web Vitalsの対策完全マニュアル
あなたのサイト、「遅い」だけで年間数百万円を失っているかもしれません
このページが表示されるまでに、何秒かかりましたか？
もし3秒以上かかっていたら、僕の記事に辿り着く前に53%の人がページを閉じていた計算になります。これはGoogleの公式調査データです。モバイルユーザーの53%が、表示に3秒以上かかるページを放棄する——2026年の今でも、この数字はほとんど変わっていません。
「うちのサイト、なんか重い気がするな……」と薄々感じていながら放置している方、今すぐGoogleのPageSpeed Insights（https://pagespeed.web.dev/）で自社サイトのスコアを確認してください。スコアが50点以下なら、この記事は御社のためのものです。
この記事では、Webサイトの表示速度を改善するための具体的な施策を、「原因の特定方法」→「対策の優先順位」→「実装手順」の流れで徹底解説します。2026年のGoogleが重視するCore Web Vitalsの3指標も含めて、全て対応できるようになります。
この記事で分かること
- サイト速度が遅い原因の特定方法（無料ツール活用）
- Core Web Vitals（LCP, INP, CLS）の意味と対策
- 画像・CSS・JavaScript・サーバーの最適化手順
- WordPressサイトの具体的な高速化プラグインと設定
- 施策の優先順位（効果が大きい順）
なぜサイト速度が「売上」に直結するのか
数字で見る：速度とビジネスの相関
サイト速度はUX（ユーザー体験）の問題であると同時に、直接的なビジネス指標に影響します。
| 表示時間 | 直帰率への影響 | CVRへの影響 |
|---|---|---|
| 1秒→3秒に遅延 | 直帰率 +32% | CVR -7% |
| 1秒→5秒に遅延 | 直帰率 +90% | CVR -20% |
| 1秒→6秒に遅延 | 直帰率 +106% | CVR -27% |
| 1秒→10秒に遅延 | 直帰率 +123% | CVR -40%以上 |
例えば月間1万訪問・CVR 2%のサイトが、表示速度の遅延でCVRが20%低下していたとすると：
- 本来のCV数：200件/月
- 実際のCV数：160件/月
- 月間40件のCVを「遅さ」だけで失っている
1件あたりの顧客単価が5万円なら、年間で2,400万円の機会損失です。
GoogleはCore Web Vitalsを「ランキング要因」として公式採用している
2021年からGoogleは、ページの表示パフォーマンスを測定するCore Web Vitalsを検索ランキングの公式指標に組み込みました。2024年にはINP（Interaction to Next Paint）がFID（First Input Delay）に代わる新指標として導入され、2026年現在はこの3指標が評価基準です。
- LCP（Largest Contentful Paint）: ページの主要コンテンツが表示されるまでの時間。目標：2.5秒以内。
- INP（Interaction to Next Paint）: ユーザーの操作（クリック、タップ等）に対する応答速度。目標：200ms以内。
- CLS（Cumulative Layout Shift）: ページ読み込み中のレイアウトのズレ。目標：0.1以下。
💡 ポイント：Core Web Vitalsのスコアが「不良」のサイトは、同品質のコンテンツを持つ「良好」なサイトと比較して、Google検索で不利になります。つまり、どれだけSEO対策を頑張っても、サイト速度が遅いだけで順位が上がらない可能性があるのです。
原因の特定——何がサイトを遅くしているのか
ステップ1：PageSpeed Insightsで診断する
最初にやるべきことは、Google PageSpeed Insights（https://pagespeed.web.dev/）で自社サイトのURLを入力することです。モバイルとデスクトップの両方のスコアが表示され、「何が遅いのか」の原因が具体的に特定されます。
スコアの目安：
- 90〜100点：優秀（現状維持でOK）
- 50〜89点：改善の余地あり（この記事の施策を実施）
- 0〜49点：要緊急対応（ビジネスに深刻な影響が出ている可能性大）
ステップ2：「改善できる項目」を優先度で読む
PageSpeed Insightsは「改善できる項目（Opportunities）」と「診断（Diagnostics）」の2つのセクションで具体的な問題点を表示します。
よく表示される項目と、その意味：
| 表示される項目 | 意味 | 対策の優先度 |
|---|---|---|
| 次世代フォーマットでの画像配信 | JPEG/PNGではなくWebPを使え | ★★★★★ |
| 適切なサイズの画像 | 画像が実際の表示サイズより大きすぎる | ★★★★★ |
| 使用されていないJavaScriptの削減 | 読み込んでいるが使っていないJSがある | ★★★★☆ |
| レンダリングを妨げるリソースの排除 | CSS/JSがページ表示をブロックしている | ★★★★☆ |
| テキスト圧縮の有効化 | Gzip/Brotli圧縮がされていない | ★★★☆☆ |
ステップ3：実測データ（フィールドデータ）を確認する
PageSpeed Insightsの上部に「フィールドデータ（実際のユーザーデータ）」が表示されている場合は、こちらの方が重要です。ラボデータ（シミュレーション）は理想環境での測定値ですが、フィールドデータは実際のユーザーの通信環境・デバイスでの体験を反映しています。
改善施策を効果が大きい順に実行する
施策1【最重要】：画像の最適化（LCP改善に直結）
Webページの総ファイルサイズの平均60%以上を画像が占めています。つまり、画像を最適化するだけで、サイト速度の大部分が改善されるということです。
やるべきこと：
- WebP形式に変換する
– JPEG/PNGと比較して30〜50%のファイルサイズ削減
– 2026年現在、全ブラウザがWebPに対応済み
- 適切なサイズにリサイズする
– 表示幅が600pxの場所に4000px幅の画像を入れている……こういうケースが驚くほど多い
– 表示サイズの2倍（Retina対応）を上限にリサイズ
- 遅延読み込み（lazy loading）を設定する
✅ 実績：あるコーポレートサイトで画像最適化のみ実施した結果、LCPが4.8秒→1.6秒に改善。PageSpeedスコアが32点→78点に跳ね上がりました。まず画像から手をつけてください。
施策2【高優先】：キャッシュの活用
ブラウザキャッシュを正しく設定すると、2回目以降の訪問時にページが瞬時に表示されます。
エックスサーバーの場合：
サーバーパネル → 高速化 → ブラウザキャッシュ設定 → ONにするだけ。
.htaccessで手動設定する場合：
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
施策3【高優先】：CSS/JavaScriptの最適化
レンダリングを妨げるCSSやJavaScriptは、ページの表示を物理的にブロックします。
対策：
- CSSの縮小（Minify）: 改行やスペースを削除してファイルサイズを圧縮
- JSの遅延読み込み:
deferまたはasync属性を追加
- 不要なプラグインのCSS・JSの削除: 全ページで読み込まれているが特定ページでしか使わないリソースを条件付き読み込みに
施策4【中優先】：サーバー応答時間（TTFB）の改善
TTFB（Time to First Byte）が遅い場合、サーバー自体がボトルネックです。
- PHPのバージョンを最新にする（PHP 8.x系はPHP 7.x比で20〜30%高速）
- データベースの最適化（不要なリビジョン・スパムコメントの削除）
- サーバーの変更（格安共有サーバーからエックスサーバー等への移行）
施策5【WordPress限定】：高速化プラグインの導入
WordPressユーザーなら、以下のプラグインの導入で劇的な改善が見込めます。
| プラグイン名 | 主な機能 | 料金 | おすすめ度 |
|---|---|---|---|
| EWWW Image Optimizer | 画像の自動WebP変換・圧縮 | 無料（有料版あり） | ★★★★★ |
| WP Super Cache | ページキャッシュの生成 | 無料 | ★★★★☆ |
| Autoptimize | CSS/JSの縮小・結合 | 無料 | ★★★★☆ |
| WP Fastest Cache | キャッシュ＋CSS/JS最適化（オールインワン） | 無料（有料版あり） | ★★★★★ |
⚠️ 注意：キャッシュプラグインは2つ以上同時に使わないでください。競合してサイトが不安定になるケースが頻発します。WP Fastest CacheかWP Super Cacheのどちらか1つを選んでください。
CLS（レイアウトシフト）の対策——見落とされがちだが重要
CLSとは「読んでいる途中でページがガタッとズレる」現象
あるあるです。記事を読んでいて、突然広告画像が読み込まれて文章がガクッと下にズレる。スマホでボタンを押そうとした瞬間にバナーが表示されて、隣のリンクを誤タップしてしまう。
これがCLS（Cumulative Layout Shift）です。ユーザー体験を著しく損ない、Googleもペナルティの対象としています。
CLS対策の基本
- 画像・動画にサイズ属性を必ず指定する
- 広告枠のスペースをCSSで事前確保する
.ad-slot {
min-height: 250px; /* 広告の予想サイズ分のスペースを確保 */
}- Webフォントの読み込みで
font-display: swapを指定する
@font-face {
font-family: 'NotoSansJP';
src: url('/fonts/NotoSansJP.woff2') format('woff2');
font-display: swap; /* フォント読み込み中もテキストを表示 */
}まとめ：まず画像を直せ、それだけで世界が変わる
サイト速度の改善は、一見すると技術的で難しそうに見えます。でも実際には、「画像の最適化」だけで問題の半分以上が解決するケースがほとんどです。
今日やるべきことは3つだけ：
- PageSpeed Insightsで自社サイトのスコアを確認する（1分）
- EWWW Image Optimizerをインストールし、既存画像を一括最適化する（10分）
- 全画像に
loading="lazy"を追加する（または自動的に追加するプラグインを有効化）
この3ステップだけで、来週のPageSpeedスコアは確実に20点以上改善しているはずです。
この記事を書いた人：進藤 優介｜株式会社Acqua 代表取締役 飲食業界18年の実務経験を経て、Web制作・デジタルマーケティングの世界へ転身。2020年にAcquaを設立し、AI×Webの力で中小企業のビジネスを加速させることをミッションに、HP制作・LP制作からAI導入支援まで代表自らが伴走しています。