ECサイトの表示速度改善ガイド｜Core Web Vitals対応でSEOとCVRを同時に伸ばす
ECサイトの表示速度は、検索順位（SEO）・購入率（CVR）・直帰率・広告費の効率といった、売上に直結する指標すべてに影響します。本記事では、GoogleがSEOの評価要素として採用している**Core Web Vitals（LCP／INP／CLS）**の基準と計測方法、そしてShopifyをはじめとしたECサイトで実行しやすい高速化施策を、担当者が明日から動けるレベルで整理します。
はじめに
「画像を増やしたら重くなった」「TOPページの読み込みが遅いと言われた」「広告のクリック単価は下がらないのに、なぜかCVRだけ落ちている」——ECサイト運営において、表示速度の悪化は静かに売上を削っていきます。
結論を先に述べると、ECサイトの速度改善は次の3ステップで進めるのが実用的です。
- 計測する：PageSpeed Insights・Search Console・Shopifyの速度レポートで現状値を把握する
- 原因を特定する：画像・サードパーティスクリプト・テーマ・配信まわりのどこが遅いかを切り分ける
- 優先順位を付けて直す：LCP（表示速度）→ CLS（レイアウト安定性）→ INP（操作応答性）の順で着手する
ECサイトで表示速度が重要な3つの理由
1. Googleの検索順位評価に直接影響する
GoogleはCore Web Vitalsをランキングシグナルの一部として扱っており、閾値を満たさないページはたとえコンテンツが優れていても検索順位で不利になります。
（出典：Google Search Central | Understanding Core Web Vitals and Google search results）
2. CVR・直帰率・カゴ落ち率と強い相関がある
一般的に、ページ表示が1秒遅くなるごとにCVRは数%単位で低下する傾向があるとされています。モバイル比率が高いECでは特に、ファーストビューが3秒以上表示されないと離脱が急増します。広告経由の流入では、LP速度の差がそのまま広告費用対効果（ROAS）の差として現れます。
3. AI検索・生成AIからの引用にも影響する
生成AI検索（AI Overview／ChatGPT検索など）は、クロール可能で高速に取得できるページの情報を優先的に引用する傾向があります。サーバー応答が遅い・JavaScript描画に強く依存しているサイトは、AIクローラーから内容を正しく読み取ってもらえず、AI回答経由の流入機会を逃します。
Core Web Vitals とは？3つの指標と合格基準
Core Web Vitals（CWV）は、Googleが提唱するユーザー体験の中核指標で、2024年3月にFID（First Input Delay）が廃止され、代わりに**INP（Interaction to Next Paint）**が導入されました。
| 指標 | 測定対象 | 合格基準（Good） | 要改善 | 不合格（Poor） |
|---|---|---|---|---|
| LCP | 主要コンテンツの表示完了時間 | 2.5秒以下 | 2.5〜4.0秒 | 4.0秒超 |
| INP | あらゆる操作への応答速度 | 200ms以下 | 200〜500ms | 500ms超 |
| CLS | レイアウトのずれの累積量 | 0.1以下 | 0.1〜0.25 | 0.25超 |
基準は「全ページビューの75パーセンタイル値」で判定されます。つまり75%以上のユーザー体験が合格ラインに入っている必要があるため、平均値ではなく悪い方のユーザー体験まで含めて改善する必要があります。
（出典：web.dev | Web Vitals）
LCP（Largest Contentful Paint）
ビューポート内で最も大きな要素（多くのECではヒーロー画像や商品メイン画像）が表示されるまでの時間。ECではファーストビューの商品画像・バナー画像がLCP要素になるケースが大半で、画像最適化が最も効きやすい指標です。
INP（Interaction to Next Paint）
ユーザーのクリック・タップ・キー入力に対し、画面が次に更新されるまでの時間。カート追加ボタン・バリアント選択・検索ボックスなど、ECで重要な操作はすべてこの指標に関わります。重いJavaScript・計測タグの遅延が主な原因です。
CLS（Cumulative Layout Shift）
ページ読み込み中・閲覧中に、レイアウトが意図せずずれた量の累積。「買うつもりのボタンの位置がずれて違うものを押してしまった」体験を防ぐ指標です。サイズ未指定の画像・遅延挿入される広告・Webフォントの差し替えが主因になります。
表示速度の計測・分析ツール
無料で使える主要ツール
| ツール | 計測データ | 主な用途 |
|---|---|---|
| PageSpeed Insights | ラボデータ＋実ユーザーデータ（CrUX） | URL単位の診断と改善提案 |
| Search Console「ウェブに関する主な指標」 | 実ユーザーデータ | サイト全体の合格率モニタリング |
| Chrome DevTools Performance | ラボデータ | 開発中のボトルネック特定 |
| Lighthouse CI | ラボデータ | CI上での回帰検知 |
| WebPageTest | ラボデータ | 回線・端末条件を変えた詳細検証 |
Shopifyストアの場合
Shopifyは管理画面内に**「オンラインストアの速度レポート」**を標準搭載しており、過去30日の実ユーザーデータに基づくLCP・INP・CLSと、同規模の他ストアとの比較を確認できます。テーマ編集後の速度変化もトラッキングできるため、改善施策のABテストに有用です。
（出典：Shopifyヘルプセンター | オンラインストアのウェブパフォーマンス）
ECサイトを高速化する具体的な施策
画像の最適化（LCP改善の本命）
ECサイトの総転送量の大半は画像です。以下を順番に実施するだけで、LCPは大きく改善します。
- WebP／AVIFへの切り替え：JPEG比で30〜50%の軽量化が見込める
- 適切なサイズでの配信：画面幅に応じて
srcsetで出し分け、過剰な高解像度を配信しない - 遅延読み込み（lazy loading）：ファーストビュー外の画像に
loading="lazy"を付与 - ファーストビュー画像は優先読み込み：
fetchpriority="high"やpreloadでLCP要素を早く取得 - CDN配信：Shopify・BASE・STORESなどは標準でCDNを使用。独自構築の場合はCloudflareやFastlyなどを導入
JavaScriptとサードパーティタグの削減（INP改善の本命）
ECの速度低下の多くは、マーケティング計測タグ・チャットツール・レコメンドウィジェットなど、後から追加された外部スクリプトが原因です。
- 使っていないアプリ・タグマネージャ内の停止タグを棚卸しして削除する
- 計測タグは
asyncまたはdeferで読み込む - チャットウィジェット・レビューウィジェットは遅延ロード（ファーストビュー描画後に初期化）
- アフィリエイト／ABテストツールはサーバーサイドで処理できる選択肢を検討する
- Shopifyの場合はWeb Pixels API経由での計測に移行し、メインスレッドの負荷を分離する
テーマ・フロントエンド実装の見直し
- 不要なセクション／メニュー階層を削り、HTMLサイズ自体を縮小する
- Webフォントはサブセット化し、
font-display: swapを指定してCLSを抑える - 画像・動画・広告枠にはwidth／heightを必ず明示（CLS対策の基本）
- カルーセル・モーダルはインタラクション時に初期化する「ユーザーが操作する（クリックするなど）まで読み込みを開始しない方式にする」方式にする
- Shopifyテーマは最新バージョン（Online Store 2.0対応の軽量テーマ）を採用する
キャッシュ・配信の最適化
- ブラウザキャッシュ（Cache-Control）の適切な設定
- CDNのエッジキャッシュで静的コンテンツを配信
- HTTP/2・HTTP/3対応のサーバーを利用する
- 1ページで読み込むドメイン数を減らす（多くの外部サービス（ドメイン）からファイルを読み込むと、接続に時間がかかり遅くなる原因になります）
計測→改善→再計測のPDCA
速度改善は「一度やって終わり」ではなく、施策を打つたびに計測し直すことが大切です。以下のサイクルを月次で回すと、実効性が高まります。
- Search Console「ウェブに関する主な指標」で不合格URLを特定
- PageSpeed InsightsでLCP要素・INPのロングタスクを原因分析
- 優先度の高い1〜2施策に絞って1〜2週間の短期間で内で実装
- 施策反映後、実ユーザーデータで28日待って再評価（ラボ値だけで判断しない）
- 結果をSEO順位・CVR・直帰率と突き合わせてビジネス指標への効果を確認
よくある失敗パターンと対策
失敗1：アプリを入れすぎて重くなる
「便利そう」という理由でShopifyアプリを10本以上導入すると、アプリごとのスクリプトが積み重なりINPが悪化します。導入前に想定されるスクリプト追加量を確認し、四半期ごとに棚卸ししましょう。
失敗2：ラボ値だけで合格と判断する
PageSpeed Insightsのラボ値（シミュレーション）は合格でも、実ユーザーデータ（CrUX）では不合格というケースは珍しくありません。ラボ値は参考程度にとどめ、最終判断はSearch Consoleやフィールドデータで行うのが鉄則です。
失敗3：TOPページだけ改善して満足する
ECではTOPよりも商品詳細・カート・カテゴリページのほうがCVRに直結します。テンプレート単位（product.liquid／collection.liquidなど）で代表URLを抽出し、各テンプレートの速度を個別に改善する視点が必要です。
まとめ
ECサイトの表示速度は、SEO・CVR・広告ROAS・AI検索の引用率まで影響する、見落とされやすい「地味だが効く」施策領域です。Core Web Vitals（LCP／INP／CLS）という共通指標があるからこそ、計測→原因特定→優先順位付けの手順が再現可能であり、正しい順番で手を入れれば成果が出ます。
自社リソースだけでは計測・改善の優先順位付けが難しい場合や、テーマ・アプリ構成の根本見直しが必要な場合は、Shopifyを中心としたECサイト制作・運用支援を行うFASTMAKEまでお気軽にご相談ください。速度改善とSEO・CVR向上を一気通貫でご支援します。
