【事例・ALDO社】レンダリングが速いユーザーは平均より75％増え、低速より327％以上の収益に！

---

※ALDOグループ（靴とアクセサリーの世界的チェーンを運営するカナダの民間企業）によるWebパフォーマンス改善事例をご紹介します

はじめに：改善せずに“効果”を測る

この記事では、ALDOグループで私が行った「パフォーマンス改善を行わずに、Webパフォーマンスが収益に与える影響を測定する方法」について紹介します。

まず強調したいのは：

• パフォーマンスは連続した“スペクトラム”であるということ。
• そして、レンダリングパフォーマンスは、Lighthouseのページロード系メトリクス（※）よりも遥かに重要であることです。

（※）特にSPA（Single Page Application）では、その傾向が顕著です。

---

私たちが「知っている」こと

パフォーマンス改善とビジネス成果の関係は、よく知られています。

• Walmartでは、100msの改善ごとに最大1％の収益向上。
• Cloudflareによると、5.7秒→2.4秒への読み込み短縮でCVRが3倍に。
• Akamaiの調査では、読み込み遅延が2秒増えると直帰率が103％増。

つまり、「速い＝稼げる」という公式は今や常識といえるでしょう。

---

私たちが知らないこと

企業の構造はそれぞれ異なります。たとえば、ALDOグループ（ALDO、Call It Spring、GLOBO）は、SPAでEコマースサイトを構築しています。

ひとつの買い物セッションが40分にも及び、読み込まれるページは1つだけ。そんな状況で「ページロード時間」にこだわる必要があるのでしょうか？

---

それは、私たちにも当てはまるのか？

冒頭でも触れましたが、パフォーマンスは「連続的な現象」です。しかし、データを使えば1日で答えを出せます。

例えばAppleがバッテリーが劣化したiPhoneの性能を意図的にスローダウンするように、ユーザーの体験速度には差があります。この差をもとに、ユーザーを体験別にグループ化してCVR（コンバージョン率）への影響を分析しました。

GoogleのLighthouseやChrome UX Dashboardに従い、以下のユーザー中心メトリクスをGA（Google Analytics）イベントとして送信しました。

• First Paint（Chromeのみ）：最初の描画タイミング
• Time to Interactive（Chromeのみ）：ユーザー操作に応答するまでの時間（50ms以内）
• Time to App Load（全ブラウザ対応）：React.hydrateが完了し、アプリが応答可能になるまでの時間

つまり、「ある程度は」真実でした（※注1）。

実測値：Fast = ￥（キャッシュ）

モバイルのセッションごとに見てみると：

• 高速体験のユーザーは、平均より17%、低速体験より78%多くの収益をもたらしました。

では、ユーザーを「遅い→平均」「平均→速い」へ移行させたら、どれだけの収益インパクトがあるのでしょうか？

残り39分50秒の価値は？

SPAでは、ページが1度読み込まれた後、ユーザーは長時間その中で活動します。では、残りの99.58%の時間におけるパフォーマンスの影響は、どう評価すればよいのでしょうか？

ここで核心となるのが「レンダリングパフォーマンス」です。

モバイルのセッションごとに見てみると：

• 高速なレンダリング体験は、平均より75％、低速より327％多くの収益を生み出していました。

なんと、収益は4倍以上！

「体験の質」を測る新しい指標を作る

GoogleはSPA向けの「体験の質」を測る明確なメトリクスを定義していません。そこで私たちは独自に発明しました。

サイトでは主にクリック操作が中心。そこで、**クリック後1秒間のフレーム数（FPS）**を計測し、「スムーズさ」を数値化しました。

スムーズさの指標 = クリック後1秒間のFPS

そして、次の3カテゴリに分類：

• 高速：40〜60 FPS
• 中速：20〜40 FPS
• 低速：0〜20 FPS

結果は圧倒的でした。特にデスクトップでは…

• 高速体験のユーザーは、平均より212%、低速より572%も多くの収益をもたらしました。

では、どう改善したのか？

実際に行った主な施策は以下です：

• React Profilerで主要な操作（ナビゲーション・カート操作など）の最適化
• 無限スクロールの最適化
• Reselectセレクターを最適化し、無駄な再描画を防止
• ReduxにshouldNotUpdateStoreミドルウェアを追加
• enqueue sagaを使い、Reduxアクションの一括処理を実現

相関 ≠ 因果？ その反論

「高性能なデバイスを持つユーザーが多く買い物するのは当然では？」という疑問、もっともです。

ですが、同一デバイス内でのFPSによる収益差を確認すれば、因果関係が逆ではないとわかります。

たとえばiPhone 8 Plusに限定した分析でも：

【図表10】iPhone 8 Plus：レンダリングカテゴリ別の収益推移

この結果が示すのは明確です。

アニメーションのスムーズさ = 売上

ROI（投資対効果）を最大にするには

ALDOでは、すでに次の施策は導入済みでした：

• コード分割（code splitting）
• 遅延読み込み（lazy loading）
• レスポンシブ画像対応

そのため、CSSやsagaの分割、webp・レスポンシブ動画などの改善は可能ですが、手間がかかる割に最大で9.3%の効果しか見込めません。

一方、レンダリング最適化はノーマーク領域であり、測定して初めて大きな可能性が見えてきたのです。

結論：あなたのサイトにも当てはまるかもしれない

Googleが言うように、「First Paint」「Time to Interactive」は多くのサイトにおいてCVRと強い相関があります。

でも、あなたのサイトはSPAかもしれません。より効果の高い改善ポイントがあるかもしれません。

そのために、まずは「測定」することが必要です。

パフォーマンスは“測定可能なスペクトラム”である
改善前でも、必ず“測る”ことはできるのです。

補遺：さらに深掘りするなら

Tammy Everts著『Time is Money』の影響で、私は「ロードスピードとビジネス価値」の関係をもう一度見直しました。

結論は変わりません。レンダリングパフォーマンスにこそ、最大のROIがあるのです。

---

著者：CP Clermont（@cpclermont）
Webパフォーマンスエンジニア。カナダ・モントリオール北部の町Prévost在住。フランス語が母語。