ページ表示速度と売上・離脱率の関係を正直に解説

結論ボックス｜先に答えます
ページの表示速度は、売上（コンバージョン率）と離脱率にそのまま影響します。海外の調査では「1秒→3秒」で離脱が大きく増え、「0.1秒の改善」でも成約が伸びる例が報告されています（Google/Deloitte ほか）。まずはモバイルで体感2〜3秒（LCP 2.5秒未満）を目標に。やり方はこのあと具体的に。

• なぜ小さな差が売上・離脱に効くかの根拠
• 目標とする秒数とCore Web Vitalsの基準
• 今日からできる改善の手順と優先順位

早く判断したい方は、無料チャットで5分診断も可能です。今のサイト状況と優先度をその場で一緒に整理します。

ページの表示速度は売上にどれだけ効く？根拠だけ

公開データの要点のみを拾います。

• モバイルで0.1秒速くなるごとに、小売でCVR平均8.4%増、旅行で10.1%増（Google & Deloitte, 2020）。小さな改善でも効果が出やすい傾向。
• 表示が遅いほど成約が落ち、0〜5秒では1秒ごとに平均4.42%のCVR低下（一般に指摘される集計知見）。
• VodafoneはLCPを31%改善し、売上8%・リード15%増（web.dev掲載, 2024）。
• Rakuten24はCore Web Vitals改善で訪問者あたり収益53%増・CVR33%増（web.dev掲載, 2022）。

方向性は一貫しています。微差の積み上げでも効く／まとめて最適化するとさらに効く、この2点がポイントです。

離脱率（バウンス）は何秒から増える？

Googleの調査（2017）では、

• 1→3秒で離脱率32%増
• 1→5秒で離脱率90%増
• 1→10秒で離脱率123%増

モバイルは忍耐が短め。2〜3秒を超えると離脱が増えやすいと覚えておくと判断が早いです。

目標ラインはどこ？Core Web Vitalsで判断

実務のものさしはCore Web Vitals（2026年時点）。

• LCP（最大コンテンツの表示）：2.5秒未満が良好
• INP（操作→反応の速さ）：200ms未満が良好（2024年にFIDから置換）

検索流入を重視するなら、コンテンツ品質とセットでこの基準を満たす設計が安心です。

まずどこを直す？小さな会社・お店向けの優先順位

今日からできる順で、画面に沿って進めます。

1. 画像を軽くする（効果が大きい）

• サイズは用途に合わせて縮小（例：横1200px以内）。
• 形式はWebP/AVIFへ。難しければJPEGの「画質70前後」。
• ヒーロー画像（最初に大きく出る1枚）から着手＝LCPに直結。

現場の知見（デザイン）：よく使われる人物画像や、サイトのトーンと明るさが合っていない写真は写真だけが浮いて安っぽく見えるという指摘があります。見た目の印象だけでなく、差し替えの手戻りが増えて実装が遅くなる原因にも。同じライティング・明度の写真で統一し、流用の人物素材は避けると安定します。

2. 不要なアプリ・スクリプトを外す

• 使っていない計測タグ、チャット、ポップアップ、外部ウィジェットを停止。
• 地図は「リンクにする」か「静止画像＋タップで地図を開く」に。

3. フォントと動画の扱いを見直す

• Webフォントは本数を絞る（見出しだけに）。
• 自動再生動画はサムネにして、再生はユーザー操作後に。

4. 画像の遅延読み込み（Lazy load）をオン

• 画面外の画像は後で読み込む設定に。多くのCMSで標準機能です。

5. モバイルでの体感チェック

• Wi‑Fiだけでなく4G/5Gで自分のスマホから開く。ファーストビューが2〜3秒で見えるか体感で確認。

技術が難しければ、まずはヒーロー画像1枚の圧縮と、不要プラグインの停止だけでもOK。「0.1秒」の積み上げが効いてきます（Google & Deloitte, 2020）。

作業中に迷ったら、チャットで画面を見ながら一緒に確認できます。無理なく進めましょう。

測定のやり方（無料ツール）

• PageSpeed Insights（Google）：URLを入れるとLCP/INPなどの数値と改善提案が表示。まずは「モバイル」タブから。
• Chromeの「Lighthouse」：開発者ツール→「Lighthouse」で計測。変更前後のスコアをスクショで残すと効果検証が楽。

数値の見方が不安な方は、実践ガイド「ホームページが遅いときの原因と直し方」も参考になります。

制作と見積もりでの落とし穴：ページ数だけの単価は危険

ここは現場の実務でよく聞くポイント。「ページ数×単価」だけの見積もりは判断を誤りやすいです。ページごとに工数と負荷がまったく違うためです。

• TOP／商品・メニューのように要素が多いページは、デザイン・画像最適化・スクリプト整理など作業が多く、時間がかかります。
• プライバシーポリシー等のテキスト中心ページは、レイアウトがシンプルで工数が小さくなりやすいです。
• アニメーションや機能（スライダー、予約カレンダー、地図埋め込み等）の有無でも最適化の手当てが変わります。機能が多いほど、読み込みの工夫や代替案の検討が必要です。

現場の知見（費用）：ページ数の見積もりには注意が必要という声があります。アニメーションや機能の有無、主要ページか否かで工数が変わるためです。例えばプライバシーポリシーは工数が小さめですが、TOPページ同様のデザインボリュームがあるページは工数が大きくなり、費用も高くなります。

現場の知見（見積もりの進め方）：デザインやアニメーションを実装しながら微調整したいという要望がある場合、工数が膨らみやすく、途中の追加請求もしづらいことが多い。初期見積もり段階で工数を多めに確保しておくと、後から揉めにくく進行が安定します。

依頼時に伝えると良いチェック項目

• 主要ページ（TOP／商品・サービス／問い合わせ）と補助ページを分けた見積もり
• 各ページで使うアニメーション・外部スクリプトの有無と代替案
• 目標：モバイルのLCP 2.5秒未満（計測ツールと確認タイミング）
• 「実装しながら調整」希望の有無と、その場合の工数バッファ

よくある勘違いを正す

• 「画像は大きいほどキレイ」→用途に合うサイズで十分。ヒーロー以外は小さめでOK。
• 「計測タグは全部入れておけば安心」→使わないタグは遅くなるだけ。必要最小限に。
• 「PCで速ければ大丈夫」→実測ではモバイルが遅くなりがち。スマホ基準で確認。
• 「人物素材を足すと高級感が出る」→トーンが合わない人物画像は浮いて安っぽく見えることが多い。写真の明るさ・質感をサイト全体で揃えると印象が安定。

ビジネス側の目標設定

• 目安：ファーストビューが2〜3秒で見える（LCP 2.5秒未満）。
• 効果検証：改修前後で「問い合わせ・購入率」「直帰（離脱）率」を同期間で比較。
• 優先ページ：トップ、商品・メニュー、問い合わせ・予約。まずは上位3ページから。

急いで公開したい方は、まず土台を整えてから細かい最適化でもOK。何から手をつけるか迷っている方は、無料チャットで状況に合う進め方（自分で直す／依頼する）を一緒に整理できます。

今日からやるチェックリスト

• ヒーロー画像をWebP化し、横1200px以内にした
• 使っていない計測タグ／プラグインを停止した
• トップの動画はサムネ＋クリック再生にした
• 画像の遅延読み込みが有効になっている
• スマホ回線で2〜3秒以内に主要要素が見える
• PageSpeed InsightsでLCP／INPを計測し、改善前後を比較した

さらに深掘りは関連記事「スマホ優先で順位が決まる時代、お店が今やること」もどうぞ。作りたい・直したい・集客したい、どの相談でもチャットで気軽に聞けます。