ファッション e コマース販売店が Core Web Vitals とパフォーマンス指標をビジネス指標と関連付けて KPI を向上させ、「パフォーマンス ビジネスケース 計算ツール」を構築してプロダクトの意思決定とパフォーマンス文化を推進した方法。
多くの企業では、ウェブサイトの速度と Core Web Vitals は、エンジニアリング チームの責任と見なされています。ビジネスと顧客体験の価値が理解されていない場合、サイトの速度はビジネスの他の分野から見えなくなってしまいます。これにより、重要な意思決定やロードマップの策定時にパフォーマンスが軽視される可能性があります。
高級 e コマース ファッション小売店の Farfetch は、チーム全体のパフォーマンス文化を改善し、ウェブ エクスペリエンスを大幅に改善するために、真に顧客中心のパフォーマンス指標を定義して使用するプロジェクトを開始しました。パフォーマンスが企業の KPI にどのように影響するかを明らかにするため、これらの指標をビジネス指標と関連付けることを目標としました。
しかし、彼らの野望はそこで終わりませんでした。最終的には、組織内のサイロを解体し、新しいビジネス指向の言語を導入して、以前は技術的なトピックと見なされていたトピックについて、全員が共有できる方法で話し合えるようにすることで、大規模な文化変革を実現することがプロジェクトの目標でした。Farfetch は、ウェブサイトの速度を全社で責任を持ち、情報に基づく意思決定を促進し、優れたウェブ エクスペリエンスを実現する主な柱として確立したいと考えていました。
最初に Farfetch は、1 つの部門だけでは以前のようにこの目標を達成できないことに気づき、エンジニアリング、インフラストラクチャ、アーキテクチャ、プロダクトなど、会社のさまざまな分野の専門家からなるコアチームを結成しました。このチームは、このトピックに対する会社の考え方を刷新するための段階的な戦略を策定しました。
ステップ 1: 指標の定義、測定、モニタリング
まず、Farfetch は、カスタマー ジャーニーのタッチポイントとアプリ全体の現在の状態と偏差を把握するための適切なモニタリング ツールを導入する必要がありました。
ラボデータと実際のユーザー モニタリング（フィールドデータ）の両方を使用して、Core Web Vitals とその他のユーザー中心のパフォーマンス指標を追跡し、速度パフォーマンスの現在の状態を分析しました。同社は JavaScript と web-vitals.js ライブラリを使用してデータをキャプチャしました。これにより、プロダクト分析チームは、同じセッションでビジネス指標とともにパフォーマンス指標を可視化できるようになり、一方が他方に与える影響を調べられるようになりました。
多分野の担当者からなるグループが、ビジネスにとって最も重要な指標を把握しようとしました。そのために、Farfetch ユーザーのクリティカル ジャーニー パスを調べ、そのジャーニーをパフォーマンス マーカーに関連付けようとしました。Google が提唱する Core Web Vitals 指標（ユーザー エクスペリエンスの個別の側面を表す指標）に加えて、カスタム JavaScript を使用して、最初のバイトまでの時間（TTFB）、最初のコンテンツが表示されるまでの時間（FCP）、最初のペイント、インタラクティブになるまでの時間（TTI）もトラッキングしました。
指標は、Performance API、Long Tasks API、Google のポリフィルの複数のメソッドを使用して収集されます。詳しくは、ウェブ担当シニア プリンシパル エンジニアの Manuel Garcia による 2020 年半ばの Farfetch Tech ブログ投稿をご覧ください。
データ分析の面では、Farfetch は独自のマルチチャネル トラッキング ソリューションである Omnitracking をフロントエンド アプリケーションで使用しています。ページビュー、ユーザー操作、システム操作によって生成されたイベントを追跡します。Omnitracking データモデルは、トラッカーによって生成されたイベントに基づいて、分析、データ探索、レポート作成のケース向けに Farfetch が開発したソリューションです。このデータモデルの目的は、以下を理解する必要があるすべてのユーザーを支援することです。
- User behavior
- Farfetch アプリのユーザー エクスペリエンス
- アプリケーションの使用状況
- マクロ コンバージョンとミクロ コンバージョン
- クロスチャネルとファネルの分析
その後、JavaScript でキャプチャした farfetch.com の各ページビューのパフォーマンス データをこのデータレイヤに追加する予定でした。このモデルに沿うことで、パフォーマンス データと各セッションの主なコンバージョン ファネル指標の一致が保証され、トピックに関する分析探索の基盤が確立されました。
最後に、Farfetch は、主要な購入経路ページの各指標に時間ベースのパフォーマンス予算を設定し、予算違反に対応するガバナンス プロセスを確立しました。また、CI パイプラインにパフォーマンス指標を組み込み、開発フローでできるだけ早く予算の差異を把握できるようにしました。
ステップ 2: ビジネス用語によるコミュニケーション
Farfetch の社内ビジネス インテリジェンス データセットでパフォーマンス データを利用できるようになったことで、アナリティクス チームは、パフォーマンス指標とビジネスの KPI（コンバージョン率や 1 ページの訪問率など）との相関関係を示す可能性のあるデータ内の数学モデルとパターンを調査し始めました。これにより、サイトの速度と UX がビジネスに与える財務的な影響を新しい視点から把握できるようになりました。これにより、ビジネスの意思決定者と共通の言語でパフォーマンスについて話し合うことができました。分析には、すべての Core Web Vitals と、Farfetch が有益と判断したその他の指標が含まれていました。非常に有益な分析情報が得られました。
Google は、最適なユーザー エクスペリエンスを提供するために Largest Contentful Paint（LCP）を 2.5 秒未満に抑えることを推奨しています。Farfetch はこのしきい値を慎重に調査し、有意な結果を得ました。
Farfetch の統計的相関分析によると、このポイントを超えると、コンバージョン率が低下し、離脱率が上昇します。これは、ユーザーがページの読み込みの遅さを実感し始め、LCP が 100 ms 長くなるごとにコンバージョン率が平均で 1.3% 低下することを示しています。
Farfetch では、累積レイアウト シフト（CLS）スコアが 0.01 低下するごとに離脱率が 3.1% 低下することも確認し、ページの安定性がウェブサイトのユーザー維持に与える影響を再確認しました。
ページの操作性とスムーズさについては、初回入力遅延（FID）が継続的にトラッキングされ、分析されていますが、Farfetch では TTI も測定しています。これは、Farfetch のビジネス コンバージョン ファネルに大きな影響を与える指標であることが実証されています。
そのため、Google の TTI ポリフィルをウェブサイトに挿入して、この指標を保存しました。Long Tasks API を使用して長時間タスク（ブラウザのメインスレッドで 50 ミリ秒を超える時間がかかっているタスク）を報告する。
分析チームは、TTI が 1 秒短くなるごとにコンバージョン率が 2.8% 増加することを発見しました。これは、コードの効率性を高め、ブラウザのメインのスレッドの混雑を解消する強い根拠となりました。
また、この分析では、一部の指標はビジネスの KPI に大きな影響を与えていないことや、一部の指標はユーザー ジャーニーのさまざまな段階でより関連性が高いことが示されました。これにより、コンバージョン ファネルの各ポイントで利用可能な機会を完全に把握できました。
ステップ 3: 文化的変化を組み込む
サイトの速度に関するユーザーの認識に関する定性的なユーザー調査とともに、上記の分析情報を提示することは、企業の目標との整合性を確立し、プロダクト ロードマップ全体でパフォーマンスに基づく意思決定を行うためのエグゼクティブ レベルの認識と賛同を得るために不可欠でした。これにより、Farfetch にとってパフォーマンスがどれほど価値があるかを証明できるようになりました。
優先順位付けを効率化するため、Farfetch は Google の Speed Impact Calculator を参考に、サイト速度ビジネスケース計算ツールを作成しました。プロダクト マネージャーは、ビジネスへの影響をその場で計算することで、パフォーマンスの向上からビジネスケースを作成できます。コンバージョン率とユーザー エクスペリエンスの指標の相関関係を使用するデータモデルにより、さまざまなプロダクト スコープ、デバイス、ユーザー ジャーニーのタッチポイントに柔軟に対応できます。
また、一連のセルフサービス分析ダッシュボードにより、リアルタイムのパフォーマンス指標とビジネスへの影響がビジネス全体で可視化されています。パフォーマンスはプロダクト開発に完全に組み込まれており、プロダクト チームは指標、監査ツール、パフォーマンス バジェットのモニタリングに簡単にアクセスできます。さらに、データレイヤが統合されているため、Farfetch の A/B テストツールでもパフォーマンス指標を利用できるため、プロダクト マネージャーはさらに強力な分析情報を得ることができます。
ここ数か月、コアチームは、同様の方法で主要なマイクロサービスとトランザクションの影響をモニタリングし、証明することで、フロントエンド開発チームだけでなくプラットフォーム ドメインでもこの文化を確立する予定です。
このトピックに関するFarfetch 主導のプレゼンテーションがいくつかありますが、外部からの言及もあります。たとえば、Core Web Vitals のビジネスへの影響に関する 2021 年の Google I/O での講演で言及されていることです。また、テーマの継続的な関連性を高め、チームの文化に関する戦略を強化することにもつながりました。
ステップ 4: 指標の改善
最終的には、これらの作業はすべて、Farfetch のウェブサイトの速度指標を客観的に改善し、チームがクラス最高のベスト プラクティスに従って改善の機会を追求できるようにすることに貢献する必要がありました。
2021 年に検出された主な改善の機会の一つは、Farfetch の 2 つの主要なページタイプ（商品ページと商品リスティング ページ）の LCP を改善する必要性でした。
チームは、これらのページのメイン コンテンツの読み込み方法について対応しました。この機会を逃した場合の影響を示したビジネスケースを基に、次のことを行いました。
- 商品画像の読み込みコンポーネントを JavaScript ベースのソリューションからネイティブ実装に変更します。
- 画像の優先度を定義し、重要なアセットと重要でないアセットに分類します。
- 重要な画像は早めに読み込み、ソースを HTML にインラインで配置し、
<link rel="preload">を使用してできるだけ早くダウンロードできるようにします。 - 重要でない画像には
<img loading="lazy">属性を使用し、サポートされていないブラウザ（Safari など）では Intersection Observer を使用したポリフィルを使用します。
これにより、A/B テストを通じて仮説とビジネスへの影響を証明し、成果を上げることに成功しました。たとえば、商品ページでは 600 ミリ秒以上短縮され、A/B テストでは、同社の定義した信頼区間でコンバージョン率が 1 ～ 5% 向上しました。
Google の LCP スコアの定義に基づき、「良好」、「改善が必要」、「低い」と見なされるページビューの割合で、チームが達成できた改善は次のとおりです。
サイトの高速化と作業方法の改善によるメリット
ビジネスケース計算ツールなどのパフォーマンスとツールを中心とした文化を構築することで、プロダクト マネージャー、ステークホルダー、エンジニアが共通の言語で話し合えるようになりました。これにより、新しい取り組みとパフォーマンスの向上を優先する方法について、継続的な議論が始まりました。
「パフォーマンスが技術チームだけの問題であり、エンジニアリング チームだけが対応して修正するというサイクルを断ち切りたかったのです」と、Farfetch のウェブ チャネル担当シニア プリンシパル プロダクト マネージャーの Rui Santos 氏は説明します。「パフォーマンス指標とビジネス指標を結び付けることで、非常に迅速にメッセージを伝えることができ、驚くほど効果的でした。ビジネスが企業を動かします。ビジネスの成功をスピード指標に関連付けることで、より幅広い関係者がトレードオフの意思決定を理解し、対応できるようになりました。」
高級ブランドの e コマース セグメントでは、サイトの速度がブランドやサービスの品質全体に対する消費者の印象を左右する可能性があります。ユーザーにとって、品質は高級感につながります。これは、ウェブサイトのパフォーマンスなど、エクスペリエンスのあらゆる側面に当てはまります。サイト速度がコンバージョン率に確実な効果をもたらすことが実証されたため、Farfetch ではパフォーマンスが今後の計画において確固たる地位を占めています。