ECプラットフォームで通販サイトの表示スピードに違いはあるのか?【主要5カートサービスの表示速度とコアウェブバイタルを分析】 | 勝手にスピードテスト Powered by SpeedCurve | ネットショップ担当者フォーラム

ネットショップ担当者フォーラム - 2022年3月16日(水) 08:00
このページは、外部サイト ネットショップ担当者フォーラム の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は 「ECプラットフォームで通販サイトの表示スピードに違いはあるのか?【主要5カートサービスの表示速度とコアウェブバイタルを分析】 | 勝手にスピードテスト Powered by SpeedCurve」 からご覧ください。
「ecbeing」「EC-cube」「EC-ORANGE」「Shopify」「CommerceCloud 」の表示スピードと「コアウェブバイタル」の違いを分析

Eコマースおいて、Web表示スピードの「速い」「遅い」というコンディションの違いにはどんな要因があるのでしょうか? その多くは、個々のWebサイトの状態に原因があるとされていますが、利用しているECカートのプラットフォームに依存している可能性もあるのでしょうか? その可能性がゼロではなければ、今後のECサイト新設やリニューアル時に、プラットフォームの各機能だけでなく、「表示スピードの速さ」を選定条件に入れるべきなのかもしれない――。こうした疑問を調査してみました。(この記事はPCでの閲覧をおすすめいたします)

結論! ECプラットフォームによる表示スピードの差異はない。設計や構築方法、運用ルールで「速い」「遅い」が発生

EC関係者の間で、さまざまな課題に関してよくあがる声が「カート依存問題」です。そこでWeb表示スピード研究会ではWebサイトの表示スピード依存の疑問について、「SpeedCurve」を使い、メジャーな5つのEコマース向けプラットフォームを導入しているECサイト150URLを、延べ3万7800回計測してみました。

各プラットフォームは、機能性、コスト優位性だけではなく、多くは利用企業のビジネス要件、ニーズに応じて導入されています。今回の計測は特徴が異なる、2つのグループ(A、B)に分けて、計測、考察しています。

グループA:ECパッケージ型・提供プラットフォーム
  • 今回の計測対象:EC-CUBE、ecbeing、EC-ORANGE
  • 特徴:利用企業のニーズに併せて、オンプレミス環境、クラウド環境のインフラ、サーバ構成を選択することが可能で、構成の自由度が比較的高い
グループB:ECクラウド型・提供プラットフォーム
  • 今回の計測対象:CommerceCloud 、Shopify
  • 特徴:SaaSサービス提供企業側により、インフラ、サーバ環境、EC機能がオールインワンで提供されるため、利用企業でのサーバー構築、インフラ運用が不要

結果としては、「ECパッケージ型での提供プラットフォーム」「ECクラウド型での提供プラットフォーム」の各グループでは、双方ともランキング順位には偏向は見られないものの、環境設定、チューニングによって大きなバラつきが生じていることがわかりました。

つまり、「ECパッケージ型での提供プラットフォーム」「ECクラウド型での提供プラットフォーム」のそれぞれのメリットを生かすも殺すも、サイトの設計や構築方法、運用ルール次第ということ。つまり、ECサイトの表示スピードが「速い」「遅い」は、設計や構築方法、運用ルールで変わるということ浮き彫りになりました。

昨今の変化スピードが速く、競合サイト間での競争も激しい環境で、EC事業会社は常に短期間でECサイトの機能改善、リニューアルを継続して行っていく必要があります

プラットフォームの計測データからわかったことは、「プラットフォームを活用すると、スクラッチ開発より比較的、短期間でビジネス要件を達成できるというメリットはありつつも、Web表示スピードのばらつきは、事業会社が主体的に意思を持ってコントロールしなければならない」ということ。

そのため、めざすべき顧客体験を損なわないように、Web表示スピードを担保するための日々の活動は、スクラッチのシステムと同様に、必要不可欠な日々の改善チューニングである、と強く感じる結果となりました。

まずは「ECパッケージ型」を計測、それぞれで大きな違いはあるか?

具体的に計測結果データを見ていきましょう。

今回、選んだのは「ecbeing」「EC-ORANGE」「EC-CUBE」Salesforceの「Commerce Cloud」「Shopify」です。調査対象サイトには、それぞれの公式サイトに掲載されている「導入事例」から、それぞれ10サイトを選定して計測しました。(詳細は調査概要を参照)

計測対象ページは①トップページ ②リストページ(カテゴリページ)③商品詳細ページの3つとし、それぞれの中央値(median)を平均した値で比較しています。

グループA:「ECパッケージ型・提供プラットフォーム」の表示速度ランキング(ECパッケージ型・提供プラットフォーム/計30サイト) 
速度
順位 サイト名 Speed
Index
(秒) LCP
(秒) TBT
(ミリ秒)
(※注①) CLS 採用
プラット
フォーム 1 ファミリア公式オンライン2.012.10 516 0.44 EC-ORANGE 2 ルピシアオンラインストア2.102.61 116 0.17 ecbeing 3 Back Market JP2.152.32 133 0.00 EC-CUBE 4 三栄自動車 レンタカー2.162.03 54 0.00 EC-CUBE 5 ダイドードリンコ公式通販2.242.34 430 0.00 ecbeing 6 ノエビアグループショッピングモール2.372.38 438 0.00 ecbeing 7 BMハンガー2.422.17 187 0.01 EC-CUBE 8 JILL STUART Beauty公式オンラインショップ2.543.03 169 0.18 ecbeing 9 SAKE CABINETオンラインストア2.932.46 191 0.05 EC-CUBE 10 nano・universe ONLINE STORE3.114.30 2397 0.83 ecbeing 11 トレンザオンライン3.204.75 3 0.06 EC-CUBE 12 KONAMI STYLE3.212.26 565 0.00 EC-ORANGE 13 瀬戸口精肉店3.253.00 394 0.14 EC-CUBE 14 mipe3.335.13 14 0.03 EC-CUBE 15 コナミスポーツクラブ オンラインショップ3.714.51 283 0.72 EC-ORANGE 16 TAMIYA SHOP ONLINE3.894.13 88 0.61 ecbeing 17 COREZO4.093.77 4 0.04 EC-ORANGE 18 au Wowma! ふるさと納税4.314.62 435 0.15 EC-ORANGE 19 blanche étoile4.322.75 0 0.04 EC-CUBE 20 WORK-UNIFORM4.384.12 150 0.00 EC-ORANGE 21 BEAMS(ビームス)公式サイト4.523.13 1000 0.61 ecbeing 22 タカラトミーモール4.574.51 513 0.00 ecbeing 23 unico公式通販サイト5.604.83 1922 0.26 ecbeing 24 お口の恋人ロッテオンラインショップ5.676.33 421 0.29 ecbeing 25 NISHIKIYA KITCHEN6.463.86 19 0.13 EC-CUBE 26 マイ ロイヤルカナン6.976.23 635 0.19 EC-ORANGE 27 小田急オンラインショッピング7.203.15 336 0.32 EC-ORANGE 28 ANNABELLE7.797.30 319 0.22 EC-CUBE 29 はるやまオンラインストア9.255.37 730 0.17 EC-ORANGE 30 P.S.FAオンラインストア11.074.46 677 0.12 EC-ORANGE
グループB:「ECクラウドサービス型・提供プラットフォーム」の表示速度ランキング(ECクラウドサービス提供プラットフォーム/計20サイト)

続いて「ECクラウドサービス型」の計測データです。

速度
順位 サイト名 Speed
Index
(秒) LCP
(秒) TBT
(ミリ秒)
(※注①) CLS 採用
プラット
フォーム 1 アディダス2.051.43 1754 0.08 Commerce Cloud 2 ゴーゴーカレー2.693.13 374 0.00 Shopify 3 Northmall (ノースモール)2.893.00 618 0.06 Commerce Cloud 4 LOVOT(ラボット)3.062.90 904 0.09 Commerce Cloud 5 Furbo3.102.54 1950 0.00 Shopify 6 FUJIFILM Prints&Gifts3.543.56 1222 0.01 Commerce Cloud 7 BARNEYS NEW YORK3.724.95 652 0.37 Commerce Cloud 8 Kakimori3.872.73 91 0.00 Shopify 9 amirisu3.883.65 260 0.02 Shopify 10 BODYBOSS3.892.44 952 0.00 Shopify 11 ワコール4.252.66 159 0.00 Commerce Cloud 12 BASE FOOD4.544.02 784 0.09 Shopify 13 PUMA4.545.01 1218 0.60 Commerce Cloud 14 土屋鞄製作所4.603.68 983 0.01 Shopify 15 KURAND4.634.14 544 0.07 Shopify 16 ホームセンター通販のカインズ4.745.37 250 0.01 Commerce Cloud 17 京都醸造5.303.23 5 0.00 Shopify 18 Allbirds(オールバーズ)5.475.33 8 0.00 Shopify 19 ミズノ公式通販サイト6.826.35 2116 0.52 Commerce Cloud 20 アシックスオンラインストア7.446.61 2867 0.67 Commerce Cloud
Web表示スピード、「コアウェブバイタル」数値の差はどの程度か?

2つのグループのWeb表示スピードのランキング、「コアウェブバイタル」にはどのような特徴が見えてくるでしょうか?

グループA:ECパッケージ型・提供プラットフォーム

表示スピードの評価を表すSpeedIndexでは「ファミリア公式オンライン」(EC-ORANGE)が1位です。「コアウェブバイタル」指標の総合評価を見てみると、グリーンが多い「blanche étoile」(EC-CUBE)がトップで、1位の「ファミリア公式オンライン」とのSpeedIndex差は0.9秒で、そこまで差が開いていません。

1位と5位のサイトにおけるSpeedIndex差は僅か0.23秒なので、表示速度上位グループでは、適切なチューニング、Web表示スピード対策が実施されていると考えられます。

グループB:ECクラウドサービス・提供プラットフォーム

表示スピードの評価を表すSpeedIndexでは「アディダス」(Commerce Cloud)がトップです。「コアウェブバイタル」指標の総合評価を見てみると、グループAと異なり、オールグリーンのECサイトは今回の計測対象では確認できませんでした。

こちらも、1位と5位のSpeedIndex差は約1.05秒なので、表示速度上位グループは適切なチューニング、Web表示スピード対策が実施されていると考えられます。

プラットフォーム別の平均値を見る

各グループのプラットフォームを比較すると、計測前の仮説ではもっと大きな差が出ると考えていましたが、平均値で見た場合、SpeedIndex、「コアウェブバイタル」の各指標に関しては、プラットフォームの違いによる明確な差異、特筆すべき違いは見られないと言っていいでしょう。

各グループのサンプル数が15サイト、10サイトなので、もう少し多くすれば違いが出てくるかもしれません。

グループA:ECパッケージ型提供・プラットフォーム別の平均値
プラットフォーム Speed
Index
(秒) Backend
(秒) Start
Render
(秒) LCP
(秒) TBT
(ミリ秒)
(※注①) CLS EC-CUBE 3.80 0.92 2.66 3.58 131 0.07 ecbeing 3.66 0.87 2.32 3.76 749 0.30 EC-ORANGE 5.62 0.87 2.71 4.06 433 0.22

※各プラットフォーム5サイトずつ、合計15サイト

グループB:ECクラウドサービス型・提供プラットフォームの平均値
プラットフォーム Speed
Index
(秒) Backend
(秒) Start
Render
(秒) LCP
(秒) TBT
(ミリ秒)
(※注①) CLS Shopify 4.20 0.77 2.98 3.49 595 0.02 Commerce Cloud 4.30 0.77 2.15 4.18 1176 0.24

※各プラットフォーム5サイトずつ、合計10サイト

サンプル数が少ないため参考値となるが、SpeedIndexでは「EC-CUBE」と「ecbeing」が良い数値。「コアウェブバイタル」では、EC-CUBEとShopifyが良好となった。

プラットフォーム別のばらつき。最小値と最大値の差を見ると?!

プラットフォームにおける各指標の幅の最小と最大の差に着目してみました。

SpeedIndexとBackendでは「Shopify」が比較的安定しています。またStartrenderでは「ecbeing」が最小値でした。幅が少ないほど安定した結果が出せるともいえます。注目したいのは「コアウェブバイタル」です。

どのプラットフォームでもオールグリーンを獲得できる可能性があることがわかります。CLSに関しては「Shopify」が最大値でも0.09のグリーンと良好となっています。

ECパッケージ編
プラットフォーム Speed
Index
(秒) Backend
(秒) Start
Render
(秒) LCP
(秒) TBT
(ミリ秒)
(※注①) CLS EC-CUBE 最大 7.79 3.67 5.65 7.30 394 0.22 最小 2.15 0.38 1.20 2.03 0 0.00 差分 5.64 3.28 4.45 5.28 394 0.22 EC-ORANGE 最大 11.07 1.17 4.10 6.23 730 0.72 最小 2.01 0.56 1.13 2.10 4 0.00 差分 9.06 0.61 2.97 4.13 726 0.72 ecbeing 最大 5.67 1.41 3.50 6.33 2397 0.83 最小 2.1 0.57 1.50 2.34 88 0.00 差分 3.57 0.85 2.00 3.99 2309 0.83
ECクラウドサービス編
プラットフォーム Speed
Index
(秒) Backend
(秒) Start
Render
(秒) LCP
(秒) TBT
(ミリ秒)
(※注①) CLS Shopify 最大 5.47 0.89 5.23 5.33 1950 0.09 最小 2.69 0.33 1.45 2.44 5 0.00 差分 2.78 0.55 3.78 2.88 1944 0.09 Commerce Cloud 最大 7.44 1.32 4.15 6.61 2867 0.67 最小 2.05 0.41 0.93 1.43 159 0.00 差分 5.39 0.92 3.22 5.18 2707 0.67

BackendとSpeedIndexで安定しているのは「Shopify」。Startrender(描画が始まる)が一番良いのは「ecbeing」だった。

同一プラットフォームにおける差異の幅 グループA:ECパッケージ型での提供プラットフォーム
プラットフォーム SpedIndex
最小、最大値の差(秒) ecbeing 3.57 EC-CUBE 5.64 EC-ORANGE 9.06
グループB:ECクラウドサービスでの提供プラットフォーム
プラットフォーム SpedIndex
最小、最大値の差(秒) Shopify 2.78 CommerceCloud 5.39

ブレがもっとも少ないのが「Shopify」です。続いて「ecbeing」となりました。

SpeedIndexは、Web表示スピードを評価するGoogle推奨の従来からの指標で、「コアウェブバイタル」の評価項目にも影響が大きく無視はできないのですが、各サイトにおけるSpeedIndexの数値の最小と最大の差は予想より大きく数値のバラツキに大きな違いがあることがわかります。

計測データからわかるように、なぜプラットフォームによって平均値に大きな差が生じているのか? つまり「ブレ幅が大きい理由、要因は何か?」という疑問が沸きます。

筆者の長年のWeb表示スピード研究からの私見ですが、設計や構築方法に大きな要因があると考えられます。Web表示スピードの差が生じる主な要因は、以下の3つのポイントがあると考えています。

ポイント①
Web表示スピードに関して、顧客視点での計測、課題分析(リアルユーザー情報の把握)

ポイント②
フロンエンド、バックエンドのWebシステム性能管理

ポイント③
CDNの適切な設定、パフォーマンスチューニング

それぞれのECサイトのプラットフォームに関して、標準構成そのままではなく、Web表示スピードに関する適切な目標値とチューニングを意識して実行する必要があります。そうすることで顧客体験(UX)を損なわない、快適なWeb表示スピードを実現できると言えます。

ECクラウドサービス型・提供プラットフォームも、設計・構築方法によっては大きな違いがでるという事実

最後にECクラウドサービス型・提供プラットフォームの計測データに関してもう少し深い分析・考察をしてみます。今回の調査では「Shopify」とセールスフォースの「Commerce Cloud」がこれに該当します。

Web表示スピード研究会でも、ECクラウドサービス型・提供プラットフォームのWebサイト表示スピード改善の対策アプローチ、研究を進めています。

インフラ、ネットワークを含めてプラットフォームとして提供される方式のため、Web表示スピード差は、それほど表れにくいだろうという仮説がありました。しかし、実際の計測データを見てみると、状況は少し異なるようです。

今回は大手企業での採用・導入が増えている「Commerce Cloud」について考察します。

番外編:Salesforce「CommerceCloud」のSpeedIndexランキング
速度
順位 サイト名 Speed
Index
(秒) Backend
(秒) Start
Render
(秒) LCP
(秒) TBT
(ミリ秒)
(※注①) CLS 1 アディダス 2.05 0.52 0.93 1.43 1754 0.08 2 Northmall (ノースモール) 2.89 1.32 2.20 3.00 618 0.06 3 LOVOT(らぼっと) 3.06 0.42 1.53 2.90 904 0.09 4 FUJIFILM Prints & Gifts 3.54 0.54 2.20 3.56 1222 0.01 5 BARNEYS NEW YORK 3.72 0.81 1.93 4.95 652 0.37 6 ワコール 4.25 1.08 2.28 2.66 159 0.00 7 PUMA 4.54 0.63 2.05 5.01 1218 0.60 8 ホームセンター通販のカインズ 4.74 0.83 4.15 5.37 250 0.01 9 ミズノ公式通販サイト 6.82 0.41 1.58 6.35 2116 0.52 10 アシックスオンラインストア 7.44 1.10 2.60 6.61 2867 0.67

1位のアディダスと10位のアシックスの違いを見てみましょう。

  • アディダス:SpeedIndex 2.05秒、Backend 0.52秒、StartRender 0.93秒
  • アシックス:SpeedIndex 7.44秒、Backend 約1.1秒、StartRender 2.60秒

アディダスは、「Commerce Cloud」の中でも、非常に高速なWebサイトです。「Commerce Cloud」の各指標では、TBT(FIDの代替え指標)以外、LCP、CLSは良好(Green)を獲得、実現しています。このレベルの数値を考えると、速度のモニタリング、Web表示スピードのチューニングなどは、しっかり対策プロジェクトとして実行されていると予想されます

ところが、10位のアシックスのデータを見ると、SpeedIndexで7.44秒(アディダスの3.6倍)、Backendで約1.1秒(アディダスの約2.1倍)という遅い数値です。同じプラットフォームといえども、大きな違いが生じています。以前にも発表していますが、同じカテゴリーでの表示スピードのよしあしはSEOランクにも大きく影響すると考えられます

遅延の原因はさまざまですが、SaaSプラットフォームそのものの性能差以外の要素として、フロントエンドの構築方法、サードパーティのタグ、APIによる基幹システムの連携などの要因が関係して、Web表示スピードに差が出ていると予測します。

結論として、SaaS型のサービスといえども構築方法によって大きな差が生まれるといえるでしょう。Web表示スピードと「コアウェブバイタル」のモニタリング、適切な課題解決を実施することは重要です。

プラットフォームを活用した顧客体験、満足度向上における重要ポイントであると考えられます。

今回の計測で何が見えたのか?! Webサイト表示スピード研究会メンバーのディスカッション

本記事の筆者、Web表示スピード研究会主要メンバー(Web表示スピード研究会主催/種村和豊(ドーモ)、近藤洋志氏(大日本印刷))が今回の計測結果についてディスカッションしました。

種村:今回は、ECパッケージ型・提供プラットフォーム、ECクラウドサービス型・提供プラットフォームというグルーピングを行い、それぞれのプラットフォームの特徴を意識して仮説を立てての計測、検証を行いました。そういう意味ではいつもの計測と違った気づきもありましたね。

近藤:プラットフォーム別での検証という、今までなかった観点が面白かったです。私が使っているプラットフォームはありませんでしたが、内製開発している立場としては、フロントエンド、バックエンドの構成や設計も大事ですが、サイトの運用者の設定や運用フローがしっかりできていないと遅くなるということとも改めて大事だと思いました。

本当に必要最小限のサードパーティで運用ができているか、ページ自体の構成が過剰に肥大化していないか、双方で気をつけて一緒に作り上げていくべきだと思います。

この調査方法・データについて
「コアウェブバイタル」の基準値

本記事の「コアウェブバイタル」の基準値はGoogle社情報「ウェブに関する主な指標レポート低速なサイトを修正してユーザー エクスペリエンスを改善する」に準拠した形をとっています。

  Good
(良好) Needs
Improvement
(要改善) Poor
(不良・低速度) LCP 2.5 秒以下 4 秒以下 4 秒を超える TBT
(※FIDの代替) 300 ミリ秒以下 600 ミリ秒以下 600 ミリ秒を超える CLS 0.1 以下 0.25 以下 0.25 を超える

※注① TBT(FIDの代替指標)について

本計測は、計測ツールSpeedCurveのSynthetic計測サービスを利用しております。FIDはWebサイトに訪れたユーザーリアルデータに基づく統計指標であり、仕様上精緻な計測が難しいため、FID代替え指標の TBT(Total Blocking Time)で計測、集計しています。

従来の多くの計測ではアイドルタイムと呼ばれる、購入客が少ない午後の時間に計測されることが多く、朝、昼、夜のピークタイムや、土日計測がほとんどされていません。たとえば、メルマガやLINEでキャンペーン情報の配信時にサイトがどんな状態になるのかを、ほとんどのEC事業者が把握していないのが現状です。

今回の調査では、売れている時間帯のコンディションを把握するために、12:30、18:30、22:30の1日3回、比較的高負荷の時間で実施しました。

SpeedInex

Speed IndexはGoogleが発表したパフォーマンス指標。ブラウジング開始後、経過時間あたりのファーストビューが何秒で表示されるかを総合的に算出したもの。本計測、分析を行っているスピード研究会では最低目標値 4秒台、推奨値4秒以下を推奨しています。
(参考:(スピード研究会)SpeedIndexの基本合格基準、5秒から4秒の引き上げを決定!!

誤差や数値の違いについて

今回の計測は、12:30、18:30、22:30の1日3回という、ECサイトにおいて比較的高負荷とされている時間帯に行いました。従来の計測結果と乖離があるとすれば、この時間滞とアイドルタイムの違いが一番の違いとなります。

調査概要

調査期間:2021年8月9日(月)~2021年8月23日(月)までの14日間

調査対象:調査対象のサイトは下記を参考としています。

  • Eコマース向けのプラットフォームとして「Shopify」「EC-CUBE」「ecbeing」「EC-ORANGE」「Commerce Cloud」の5つを選定
  • 公式サイトに公開されている「事例」もしくは「導入事例」から、それぞれ10サイトを選定して計測対象とした。(EC-ORANGEについては、個別に確認)

調査範囲:1サイトにつき、①トップページ②リストページ(カテゴリページ)③商品詳細ページの3つのURL(計測したのは①50URL、②50URL、③50URLの計150URL。うち、リストページと商品詳細ページが同一のため②③に同一ページで計測したのは2URL)。当該サイトURLは、検索エンジンによる検索結果から移動できるURLを用いた。

①トップページ②リストページ(カテゴリページ)③商品詳細ページ、それぞれの中央値(median)を平均したものをサイトの代表値とする。

計測時間:12:30、18:30、22:30の1日3回

測定プロファイル:Apple iPhone X(4G LTE)、Samsung Galaxy S8 (Mobile 4G LTE)

1回当たりの計測数:3 checks

計測回数:150URL × 1日3回 × 3checks × 2デバイス × 14日間 = 3万7800回計測

エミュレート回線品質(4G LTE):ダウンロード 11.7Mbps/アップロード 11.7Mbps/レイテンシー 70ms

サイト調査実施::監修/占部雅一(ドーモ) レポート・解析/種村和豊(Web表示スピード研究会)データ計測・集計/村岡温子、畑山慎治

※このコンテンツはWebサイト「ネットショップ担当者フォーラム - 通販・ECの業界最新ニュースと実務に役立つ実践的な解説」で公開されている記事のフィードに含まれているものです。
オリジナル記事:ECプラットフォームで通販サイトの表示スピードに違いはあるのか?【主要5カートサービスの表示速度とコアウェブバイタルを分析】 | 勝手にスピードテスト Powered by SpeedCurve
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.

種村 和豊
» 勝手にスピードテスト Powered by SpeedCurve のバックナンバーを見る
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

4P
マーケティング戦略の分析プロセスの1つ。 マーケティング戦略のフレームワー ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]