EC・通販サイトの表示速度最適化【LCPがCVR・売上に直結する業種】
EC サイトは表示速度がCVR・売上に直結する業種です。Amazon の調査で「100ms 表示が遅れると売上 1% 減」が示されており、LCP 2秒→4秒で離脱率は2倍。商品画像最適化・カート遅延読込・JS最小化が ECの利益を左右します。
▼ あなたのサイトを30秒で採点
01 WHY IT MATTERS
なぜEC・通販でこの対策が特に重要か
EC は速度 = 売上の業種です。Google も EC サイトは Core Web Vitals 評価を最も厳しく適用し、INP(操作応答性)が悪いとカート離脱率が上がります。Shopify / BASE / EC-CUBE等のEC基盤上での最適化テクニックが、楽天・Amazonと戦う中小ECの核です。
02 STEPS · 5 STAGES
具体的に何をすればいいか
STEP 1: 商品画像のAVIF/WebP変換 + 段階的読み込み
商品画像1枚あたり多サイズ(サムネイル/ミドル/拡大)を AVIF + WebP で生成 + display:none の拡大画像は lazy loading。商品100点×10枚=1000枚を最適化すると総容量が10分の1に。
STEP 2: カート・チェックアウト系JSの最適化
Shopify / WooCommerce のカートJSは重くINPを悪化させる主因。重複読込チェック + 不要プラグイン削除 + JS minify + 遅延読込の組合せで100KB以上削減可能。
STEP 3: 商品一覧ページの virtual scroll + ページネーション
商品10000点を1ページに表示は無謀。20件×ページネーション + 商品サムネイル lazy loading + virtual scroll (react-window) でメモリと描画負荷を軽量化。
STEP 4: レビュー・口コミセクションの遅延表示
レビュー100件を初期表示するとLCP致命傷。最初の3件 + 「もっと見る」クリックで展開、または下部にスクロールしたら lazy loading の方式に。
STEP 5: CDN(Cloudflare / Fastly)+ HTTP/2 サーバー
ECは画像配信規模が大きいのでCDN必須。Cloudflare 無料プランでも10TBまで無料。Pro プラン($20/月)の Polish で自動 AVIF/WebP化 + Mirage で接続最適化。
03 COMMON FAILURES
EC・通販でありがちな3つの失敗
FAIL #1
商品画像が JPEG のオリジナル6MB
EC で最も多い致命傷。1ページ内の商品サムネイルが10枚×6MB=60MBで、4G回線で30秒。AVIF/WebP化+サムネイル別解像度生成が必須です。
FAIL #2
カート機能のための重い JavaScript ライブラリ
古い jQuery + 重いカート JS の組合せで INP(応答性)が悪化。INP が200ms 超えると Google評価でCVR で大きく不利になります。
FAIL #3
商品レビュー外部サービス埋込
Yotpo・Reviewsio等の外部レビュー iframe は重く、商品ページが固まる原因に。サムネイル + クリックで展開するか、自社レビューに置換を検討。
04 FAQ
よくある質問
Q. Shopify は速度的に有利ですか?+
Shopify自体はCDN前提で速いですが、テーマ+大量アプリで遅くなりがち。テーマを Dawn 等の軽量公式テーマ + 必須アプリ最小限が速度確保のコツです。
Q. 速度改善でどれくらい売上が変わりますか?+
Walmart の調査で「LCP 1秒短縮 = CVR +2%」、Amazonの「100ms遅延 = 売上 -1%」が公開データ。中小ECなら速度改善で月10〜30%売上増の事例が多いです。
Q. WooCommerce + WordPress で十分速くできますか?+
可能です。軽量テーマ(Astra Pro 等)+ Cloudflare CDN + 必須プラグイン最小化 + Object Cache(Redis)で Shopify 同等速度を出せます。
05 YOUR TURN
あなたのEC・通販サイトを30秒で採点
URL を入れるだけで20項目を100点満点で自動採点します。本記事の5ステップが実装できているか、すぐに確認できます。登録不要・完全無料。
RELATED TOPICS
EC・通販の他のチェックリスト
OTHER INDUSTRIES · 表示速度最適化