表示速度と売上の関係 — データで見る

ECサイトの表示速度と売上の関係は、複数の大規模調査で実証されています：

これらの数字は「感覚」ではなく「データ」です。表示速度の改善は、広告費を増やすことなく売上を向上させる、最もROIの高い施策の1つです。

なぜ表示速度が売上に影響するのか

離脱のメカニズム

ユーザーは意識的に「遅い」と判断しているわけではありません。待ち時間が長くなると、無意識に以下の行動が起きます：

信頼の方程式

ECサイトでは、表示速度は「技術力」のシグナルになっています。ページが遅いサイトは：

即実行可能な改善手順

ステップ1：ボトルネックの特定

改善の前に、何が遅いのかを正確に特定する必要があります。

Chrome DevTools のNetworkタブで以下を確認：

ステップ2：画像の最適化（効果：最大）

ECサイトの総ページサイズの60-80%を画像が占めています。

施策A フォーマット変換

効果：30-50%削減

JPEG/PNG → WebP に変換するだけで、画質を維持したまま30-50%のファイルサイズ削減が可能です。

  • 要素でWebP非対応ブラウザにフォールバック
  • CDNの画像変換機能（Cloudflare Polish等）を活用

施策B 適切なサイズでの配信

効果：50-80%削減

2000px幅の商品画像をモバイルでそのまま表示していませんか？ srcset を使って、デバイス幅に応じた適切なサイズの画像を配信してください。

モバイル（400px幅）に2000px画像を送るのは、帯域幅の96%を無駄にしているのと同じです。

施策C 遅延読み込み

効果：初期読み込みの高速化

ファーストビュー外の画像に loading="lazy" を設定し、スクロールされるまで読み込みを遅延させます。

注意： ファーストビューの商品メイン画像（LCP要素）には loading="lazy" を付けないでください。

ステップ3：スクリプトの整理

施策D サードパーティスクリプトの棚卸し

効果：中〜高

ECサイトに導入されているスクリプトを棚卸ししてください。以下が「あるある」です：

  • 使われていない旧A/Bテストツールのスクリプト
  • 導入を検討して結局採用しなかったチャットツール
  • 重複しているアナリティクスタグ（GA4 + UA + 独自計測）
  • 2つ以上のリターゲティングピクセル

不要なスクリプトを削除し、必要なものは async or defer で非同期化してください。

ステップ4：CDNの活用

施策E CDN導入

効果：TTFBの大幅改善

CDN（Content Delivery Network）は、世界中のエッジサーバーにコンテンツをキャッシュし、ユーザーに最も近いサーバーから配信します。

  • Cloudflare（無料プランあり）: 日本を含む300+拠点
  • AWS CloudFront: EC2と統合しやすい
  • Fastly: 設定の柔軟性が高い

ECサイトでは、商品画像・CSS・JSをCDN経由で配信するだけで、TTFBが50-80%改善するケースが多いです。

改善効果の測定方法

改善前後の数値を比較するために、以下の指標を記録してください：

| 指標 | 測定ツール | 目標値 |
|------|----------|--------|
| LCP | PagePulse / PSI | 2.5秒以下 |
| TTFB | Chrome DevTools | 200ms以下 |
| 総ページサイズ | Chrome DevTools Network | 2MB以下 |
| リクエスト数 | Chrome DevTools Network | 80以下 |
| CVR | GA4 | 改善前比 +5-10% |

まとめ

表示速度の改善は、広告費ゼロで売上を向上させる最も確実な施策です。

まずは画像の最適化から始めてください。WebPへの変換と適切なサイズでの配信だけで、多くのECサイトでLCPが1秒以上改善します。

PagePulseは、LCP・TTFB・リソース読み込み時間をワンクリックで測定し、改善すべきポイントを優先度付きで表示します。表示速度の定期チェックに最適です。