ECサイトの表示速度改善｜CVRとの関係と、ページ別に見直すべき箇所・計測方法

ECサイトの表示速度改善は、「どのページで、どんな遅さが離脱を生んでいるか」を切り分けるところから始めます。
表示速度の遅さには、ページが表示されるまでの「読み込みの遅さ」と、ボタンを押してから画面が変わるまでの「操作への反応の遅さ」の2種類があります。どちらも、お客様が商品を見る前や、買うと決めた後に離脱する原因になります。

EC Intelligenceを提供する株式会社シナブルは、ECサイトで購入が止まる原因を6つの観点で整理しており、表示速度はその中の「信頼性・技術基盤」に含まれます。この記事では、表示速度とCVRの関係、ページごとに見直すべき箇所、計測の方法、改善の進め方を、この観点に沿って解説します。

ECサイトの表示速度は、CVRにどう影響するのか？

表示が遅いと、お客様は商品の魅力に触れる前に離脱し、買うと決めた後でも手続きの途中で離脱します。
ページの読み込みが遅ければ、TOPページや広告から着地したページで直帰が増えます。カートボタンを押しても反応しなかったり、画面が切り替わるまで何も表示されなかったりすると、「ちゃんと動いているのか」という不安から購入をやめてしまいます。 表示速度の遅さは、商品や価格に問題がなくても売上を取りこぼす原因になります。

表示速度の問題は、6つの観点のどこに入るのか？

シナブルの6つの観点では、表示速度は「信頼性・技術基盤」に入ります。この観点は、お客様が安心して購入を進められるか、サイトが正しく動くかを見るものです。レビューや会社情報などの心理的な安心と、表示速度・決済エラー・入力内容の引き継ぎなどの技術的な安定の両方を含みます。
技術的な安定の問題は、特定のページだけでなくサイト全体に関わります。どの段階で起きても離脱につながるため、ほかの観点の改善の効果を打ち消してしまうこともあります。信頼性・技術基盤の全体像は「ECサイトの信頼性を高めるには？」で解説しています。

「読み込みの遅さ」と「操作への反応の遅さ」は、何が違うのか？

読み込みの遅さは、ページを開いてから画像や商品情報が表示されるまでの時間の問題です。主にTOPページ・商品一覧・検索結果で、直帰や離脱として表れます。
操作への反応の遅さは、カートに入れる・数量を変えるなどのボタンを押してから、画面が反応するまでの問題です。主に商品詳細やカートで、「ボタンが反応しない」「操作しづらい」という不満として表れます。
計測ツールのスコアが良くても、操作への反応が遅ければお客様は離脱します。 読み込みと操作の両方を確認しないと、本当の原因を見落とします。

離脱の原因が表示速度かどうかは、どう見分けるのか？

アクセスデータの数値と、実際の画面で確かめる症状の2つを組み合わせて判断します。
シナブルのCVR診断でも、1つの指標だけで原因を決めつけず、数値と実機の症状が同じ観点を指しているかを確かめます。表示が遅いページと離脱が多いページが一致し、実機でも遅さを体感できるなら、表示速度が原因である疑いは強くなります。

数値では、何を確かめればよいのか？

ページごとの表示速度と、直帰率・離脱率の関係を確かめます。表示が遅いページ群と、直帰率・離脱率が高いページ群が重なっているかを見てください。
あわせて、デバイス別の直帰率も比べます。スマートフォンだけ直帰率が高い場合は、スマートフォンでの表示や操作に原因がある可能性があります。直帰率とは、サイトに着地したセッションのうち、そのページだけを見て離脱したセッションの割合のことです。離脱率とは、あるページを含むセッションのうち、そのページを最後にサイトを離れたセッションの割合のことです。

実機では、何を確かめればよいのか？

担当者自身がスマートフォンで、お客様と同じ流れでサイトを操作します。TOPページから商品を探し、商品詳細を見て、カートに入れ、注文手続きに進むまでを試します。表示が止まる場面や、ボタンを押しても反応がない場面がないかを確認してください。
社内の高速な回線やPCだけで確認すると、遅さに気づけないことがあります。お客様が実際に使う環境に近い状態で確かめることが大切です。

表示速度以外の原因が疑わしいときは、どう切り分けるのか？

表示速度と離脱の関係が弱いときは、ほかの観点を疑います。症状ごとに、次のように切り分けると、打つべき施策がずれません。

なお、特定の流入元だけ直帰率が高い場合は、ページの改善より先に流入の質と広告の訴求を確認します。また、ページごとの表示速度や離脱率を計測できていない場合は、計測の環境を整えることが最初の改善テーマになります。

ECサイトの表示を重くしている原因は、どこにあることが多いのか？

ECサイトの表示を重くしやすい原因は、大きく4つです。商品画像の容量、外部ツールのタグ（スクリプト）の数、1ページで一度に表示する商品の数、そしてカートなどの操作を処理する仕組みです。
商品点数が多いECほど、画像や商品情報の量が増え、これらの影響を受けやすくなります。

商品画像の容量が、大きすぎていないか？

ECサイトは商品を魅力的に見せるために多くの画像を使います。1枚あたりの容量が大きいと、商品一覧のように画像を一度にたくさん表示するページほど、表示までの時間が長くなります。見た目を損なわない範囲で、画像の容量を小さくすることが基本です。

外部ツールのタグが、増えすぎていないか？

アクセス解析、広告の計測、Web接客など、外部のサービスを使うためのタグは、ページを開くたびに読み込まれます。使わなくなったツールのタグが残っていると、成果を生まないまま表示だけを遅くします。 施策のために入れたタグが、別の離脱を生んでいないかを定期的に見直すことが大切です。

1ページで、一度に読み込む量が多すぎないか？

商品一覧や検索結果で一度に表示する商品が多いと、読み込む画像や情報も増えます。表示件数を見直したり、画面に入るまで画像を読み込まない遅延読み込みを使ったりすると、最初の表示を速くできます。

カートなどの操作に、時間がかかっていないか？

カートに入れる、数量を変えるといった操作のたびに画面全体を読み込み直す仕組みだと、反応が遅く感じられます。処理中であることが分からないと、お客様はボタンを何度も押したり、操作をやめたりします。

ECサイトで表示速度を見直すべきページは、どこか？

シナブルのCVR診断では、表示速度の問題を5つのページで確認します。ページごとに、お客様の不満の出方と、見るべき指標、施策の方向性が異なります。

TOPページでは、何を見直せばよいのか？

TOPページは多くのお客様が最初に見るページで、表示が遅いと直帰につながります。大きなメイン画像やバナーの容量、ファーストビューより下の画像の読み込み方を見直しましょう。
あわせて、文字の大きさや背景とのコントラストなど、スマートフォンでの読みやすさも確認します。表示が速くても読みにくければ、お客様は同じように離れていきます。

商品一覧では、何を見直せばよいのか？

商品一覧は、画像を最もたくさん読み込むページです。商品画像の容量と、一度に表示する件数を見直しましょう。表示件数を減らしてページを分ける、スクロールに合わせて画像を読み込むといった方法で、最初の表示を速くできます。

検索結果では、何を見直せばよいのか？

検索結果の表示が遅いと、お客様は探す途中でサイトを離れます。商品点数が増えるほど検索の処理は重くなるため、検索の仕組みそのものの速さと、結果を表示する画面の速さを分けて確認しましょう。 目的の商品を探しているお客様ほど、検索の遅さには敏感です。

商品詳細では、何を見直せばよいのか？

商品詳細では、画像の読み込みに加えて、カートボタンの反応を確認します。ボタンを押してから反応までに時間がかかる場合は、処理中であることを表示するだけでも、お客様の不安を減らせます。エラーが起きていないかも、あわせて確認しましょう。

カートでは、何を見直せばよいのか？

カートは、買うと決めたお客様が操作するページです。数量の変更や商品の削除のたびに反応が遅いと、手続きへの不安につながります。 購入意欲の高いお客様を手放すことになるため、カートの反応は優先して確認したい箇所です。

ECサイトの表示速度は、どう計測すればよいのか？

ウェブサイトの表示速度の計測には、Googleが無料で提供している「PageSpeed Insights」を使うのが手軽です。ウェブサイトのURLを入力するだけで、PCとスマートフォンそれぞれの表示速度のスコアと、改善すべき点を診断できます。PageSpeed Insightsの見方は「PageSpeed Insightsの見方｜表示速度のスコア改善方法を解説」で解説しています。

どのページを計測すればよいのか？

前の章で挙げた5つのページ（TOP・商品一覧・検索結果・商品詳細・カート）を、PCとスマートフォンの両方で計測します。すべてのページを一度に計測するより、アクセスが多く、離脱が目立つページから順に計測するほうが効率的です。

計測結果では、どの指標を見ればよいのか？

Googleが示す「Core Web Vitals（コアウェブバイタル）」の3つの指標を確認します。LCP（Largest Contentful Paint）は、ページの主要な内容が表示されるまでの時間です。INP（Interaction to Next Paint）は、ボタンを押すなどの操作に対する反応の速さです。CLS（Cumulative Layout Shift）は、読み込み中にレイアウトがずれる度合いです。
LCPは「読み込みの遅さ」、INPは「操作への反応の遅さ」を見る指標です。 スコアの数字そのものより、どのページのどの指標が悪いのかを、離脱率と並べて見ることが大切です。LCPの改善は、商品画像の最適化と遅延読み込みから着手するのが基本です。

表示速度の改善は、どの順番で進めればよいのか？

担当者だけで対応できる範囲から着手し、その後で専門的な改修をエンジニアに依頼する順番で進めます。費用をかけずにできることから始め、開発の時間は専門的な課題に集中させます。

担当者だけで、何から着手できるのか？

管理画面から対応できる、次の3つから始めます。

・商品画像の容量を小さくする（見た目を損なわない範囲で圧縮する）
・使っていない外部ツールのタグを削除する（タグマネージャーなどで棚卸しする）
・商品一覧や検索結果で、一度に表示する件数を見直す

エンジニアには、何を依頼すればよいのか？

担当者だけで対応できない改修は、エンジニアに依頼します。たとえば、画像の遅延読み込みの実装、カート操作の処理の見直し、処理中の表示の追加、サーバーの応答やキャッシュの設定の見直しなどです。
依頼するときは、「サイトを速くしてほしい」ではなく、次の4つをセットで伝えましょう。計測ツールの診断結果、対象ページのURL、改善したい指標、そのページで起きている事業上の課題（例：商品一覧の離脱率が高い）です。目的と根拠を共有することで、改修の優先順位について認識をそろえられます。

表示速度を改善した後は、何を見て効果を判断するのか？

計測ツールのスコアではなく、改善したページの事業の指標で判断します。
表示速度の改善の目的は、売上を取りこぼさないことです。ページごとに、次の指標が改善前と比べて変わったかを、同じ期間・同じデバイスで比べましょう。

スコアが改善しても指標が変わらない場合は、表示速度ではなく、ほかの観点に原因がある可能性があります。前の章の切り分けに戻って確認してください。

自社サイトの表示速度の改善は、今どの段階にあるのか？

表示速度の改善は、自社の現在地によって次にやるべきことが変わります。

ECサイトの表示速度の改善について、よくある質問は？

ここでは、ECサイトの表示速度の改善でよく寄せられる、目標の決め方、カートの種類による制約、SEOへの影響、改善後の効果についての質問に答えます。ウェブサイトのスピード改善を進めるときの参考にしてください。

表示速度は、何秒以内を目指せばよいですか？

特定の秒数を目標にするより、自社のページごとに改善前と比べてどれだけ速くなり、離脱率やカート投入率がどう変わったかで判断するのが現実的です。PageSpeed Insightsでは、Core Web Vitalsの各指標の評価も確認できるので、評価の低い指標から優先して改善しましょう。

SaaS型のカートを使っていても、表示速度は改善できますか？

できます。サーバーの設定は変えられなくても、商品画像の容量の見直し、使っていないアプリやタグの削除、テーマ（テンプレート）の見直し、一覧の表示件数の調整など、事業者側で対応できる改善は多くあります。

表示速度は、SEOにも影響しますか？

Googleは、Core Web Vitalsをページの体験を測る指標として示しています。ただし、ECサイトにとって表示速度を改善する一番の目的は、検索順位よりも、来てくれたお客様を購入まで案内することです。まずは離脱が多いページから改善しましょう。

表示速度を改善しても、CVRが上がらないのはなぜですか？

離脱の原因が、表示速度以外の観点にあるからです。商品が見つからない、買う理由が伝わらない、送料が分かりにくい、手続きが面倒など、ほかの原因を切り分けましょう。6つの観点の全体像は「ECサイトのCVR改善は何から始める？」で解説しています。

結局、ECサイトの表示速度の改善は何から始めればよいのか？

表示速度の改善は、計測ツールのスコアを上げることが目的ではありません。どのページで、どんな遅さが離脱を生んでいるかを切り分け、売上の取りこぼしを減らすことが目的です。

自社サイトが6つの観点のどこでつまずいているかは、シナブルの無料の「伸びしろ診断」で確認できます。表示速度を含む信頼性・技術基盤だけでなく、ほかの観点も含めて、優先して着手すべき箇所を整理します。