種村 和豊 2022/3/16 8:00

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.105160.44EC-ORANGE
2ルピシアオンラインストア2.102.611160.17ecbeing
3Back Market JP2.152.321330.00EC-CUBE
4三栄自動車 レンタカー2.162.03540.00EC-CUBE
5ダイドードリンコ公式通販2.242.344300.00ecbeing
6ノエビアグループショッピングモール2.372.384380.00ecbeing
7BMハンガー2.422.171870.01EC-CUBE
8JILL STUART Beauty公式オンラインショップ2.543.031690.18ecbeing
9SAKE CABINETオンラインストア2.932.461910.05EC-CUBE
10nano・universe ONLINE STORE3.114.3023970.83ecbeing
11トレンザオンライン3.204.7530.06EC-CUBE
12KONAMI STYLE3.212.265650.00EC-ORANGE
13瀬戸口精肉店3.253.003940.14EC-CUBE
14mipe3.335.13140.03EC-CUBE
15コナミスポーツクラブ オンラインショップ3.714.512830.72EC-ORANGE
16TAMIYA SHOP ONLINE3.894.13880.61ecbeing
17COREZO4.093.7740.04EC-ORANGE
18au Wowma! ふるさと納税4.314.624350.15EC-ORANGE
19blanche étoile4.322.7500.04EC-CUBE
20WORK-UNIFORM4.384.121500.00EC-ORANGE
21BEAMS(ビームス)公式サイト4.523.1310000.61ecbeing
22タカラトミーモール4.574.515130.00ecbeing
23unico公式通販サイト5.604.8319220.26ecbeing
24お口の恋人ロッテオンラインショップ5.676.334210.29ecbeing
25NISHIKIYA KITCHEN6.463.86190.13EC-CUBE
26マイ ロイヤルカナン6.976.236350.19EC-ORANGE
27小田急オンラインショッピング7.203.153360.32EC-ORANGE
28ANNABELLE7.797.303190.22EC-CUBE
29はるやまオンラインストア9.255.377300.17EC-ORANGE
30P.S.FAオンラインストア11.074.466770.12EC-ORANGE

グループB:「ECクラウドサービス型・提供プラットフォーム」の表示速度ランキング(ECクラウドサービス提供プラットフォーム/計20サイト)

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

速度
順位
サイト名Speed
Index
(秒)
LCP
(秒)
TBT
(ミリ秒)
(※注①)
CLS採用
プラット
フォーム
1アディダス2.051.4317540.08Commerce Cloud
2ゴーゴーカレー2.693.133740.00Shopify
3Northmall (ノースモール)2.893.006180.06Commerce Cloud
4LOVOT(ラボット)3.062.909040.09Commerce Cloud
5Furbo3.102.5419500.00Shopify
6FUJIFILM Prints&Gifts3.543.5612220.01Commerce Cloud
7BARNEYS NEW YORK3.724.956520.37Commerce Cloud
8Kakimori3.872.73910.00Shopify
9amirisu3.883.652600.02Shopify
10BODYBOSS3.892.449520.00Shopify
11ワコール4.252.661590.00Commerce Cloud
12BASE FOOD4.544.027840.09Shopify
13PUMA4.545.0112180.60Commerce Cloud
14土屋鞄製作所4.603.689830.01Shopify
15KURAND4.634.145440.07Shopify
16ホームセンター通販のカインズ4.745.372500.01Commerce Cloud
17京都醸造5.303.2350.00Shopify
18Allbirds(オールバーズ)5.475.3380.00Shopify
19ミズノ公式通販サイト6.826.3521160.52Commerce Cloud
20アシックスオンラインストア7.446.6128670.67Commerce 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-CUBE3.800.922.663.581310.07
ecbeing3.660.872.323.767490.30
EC-ORANGE5.620.872.714.064330.22

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

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

プラットフォームSpeed
Index
(秒)
Backend
(秒)
Start
Render
(秒)
LCP
(秒)
TBT
(ミリ秒)
(※注①)
CLS
Shopify4.200.772.983.495950.02
Commerce Cloud4.300.772.154.1811760.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.793.675.657.303940.22
最小2.150.381.202.0300.00
差分5.643.284.455.283940.22
EC-ORANGE最大11.071.174.106.237300.72
最小2.010.561.132.1040.00
差分9.060.612.974.137260.72
ecbeing最大5.671.413.506.3323970.83
最小2.10.571.502.34880.00
差分3.570.852.003.9923090.83

ECクラウドサービス編

プラットフォームSpeed
Index
(秒)
Backend
(秒)
Start
Render
(秒)
LCP
(秒)
TBT
(ミリ秒)
(※注①)
CLS
Shopify最大5.470.895.235.3319500.09
最小2.690.331.452.4450.00
差分2.780.553.782.8819440.09
Commerce Cloud最大7.441.324.156.6128670.67
最小2.050.410.931.431590.00
差分5.390.923.225.1827070.67

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

同一プラットフォームにおける差異の幅

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

プラットフォームSpedIndex
最小、最大値の差(秒)
ecbeing3.57
EC-CUBE5.64
EC-ORANGE9.06

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

プラットフォームSpedIndex
最小、最大値の差(秒)
Shopify2.78
CommerceCloud5.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.050.520.931.4317540.08
2Northmall (ノースモール)2.891.322.203.006180.06
3LOVOT(らぼっと)3.060.421.532.909040.09
4FUJIFILM Prints & Gifts3.540.542.203.5612220.01
5BARNEYS NEW YORK3.720.811.934.956520.37
6ワコール4.251.082.282.661590.00
7PUMA4.540.632.055.0112180.60
8ホームセンター通販のカインズ4.740.834.155.372500.01
9ミズノ公式通販サイト6.820.411.586.3521160.52
10アシックスオンラインストア7.441.102.606.6128670.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
(不良・低速度)
LCP2.5 秒以下4 秒以下4 秒を超える
TBT
(※FIDの代替)
300 ミリ秒以下600 ミリ秒以下600 ミリ秒を超える
CLS0.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表示スピード研究会)データ計測・集計/村岡温子、畑山慎治

※記事初出時の本文を修正いたしました(3月17日15時)。

この記事が役に立ったらシェア!
これは広告です

ネットショップ担当者フォーラムを応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

[ゴールドスポンサー]
ecbeing.
[スポンサー]