この e コマース ファッション小売業者は、Core Web Vitals とパフォーマンス指標をビジネス指標とどのように相関させ、KPI を増加させ、商品に関する意思決定とパフォーマンス文化を推進するために「パフォーマンス ビジネスケース計算ツール」を構築しました。
多くの企業では、ウェブサイトの速度パフォーマンスと Core Web Vitals のほとんどがエンジニアリング チームの責任であると見なされています。ビジネスやカスタマー エクスペリエンスの価値が理解されていなければ、サイトの速度はビジネスの他の領域に認識されなくなる可能性があります。そのため、重要な意思決定やロードマップを定義する際に、パフォーマンスが見落とされる可能性があります。
チーム間のパフォーマンス文化を改善し、ウェブ エクスペリエンスを大幅に改善するために、高級 e コマース ファッション小売業者の Farfetch は、真の顧客中心のパフォーマンス指標を定義して使用するプロジェクトを立ち上げました。その目的は、パフォーマンスが会社の KPI に及ぼす影響を明らかにする手段として、これらをビジネス指標と相関させることでした。
しかし、彼らの野望はそれだけではありません。最終的に、このプロジェクトの目標は大規模な文化の変革でした。つまり、組織内のサイロを解消し、ビジネス指向の新しい言語を導入して、これまで技術的トピックと考えられていたことを全員が共通の方法で話せるようにしました。Farfetch では、共有責任としてウェブサイトの速度のパフォーマンスを実現し、情報に基づいた意思決定を促進し、優れたウェブ エクスペリエンスを実現するための主要な柱として確立したいと考えていました。
開始にあたり、Farfetch は 1 つの部門では以前ほどこの目標を達成できないことに気づき、エンジニアリング、インフラストラクチャ、アーキテクチャ、プロダクトなど、社内のさまざまな分野の専門家からなるコアチームを編成し、このトピックの見方を刷新するための段階的な戦略を立てました。
ステップ 1: 指標の定義、測定、モニタリング
まず、Farfetch には、現在の状態と、ジャーニーの各タッチポイントやアプリケーションにまたがる逸脱を把握するための、適切なモニタリング ツールを導入する必要がありました。
ラボデータと実際のユーザー モニタリング（フィールド データ）の両方を使用して、Core Web Vitals とその他のユーザー中心のパフォーマンス指標を追跡し、速度パフォーマンスの現状を分析しました。JavaScript と web-vitals.js ライブラリを使用してデータをキャプチャしたことで、商品分析チームは同じセッションでパフォーマンス指標とビジネス指標を可視化し、両者が互いにどのように影響するかを調査できるようになりました。
学際的なグループは、ビジネスにとって最も重要な指標の把握に着手しました。そのために、Farfetch ユーザーのクリティカル ジャーニー パスに注目し、パフォーマンス マーカーとリンクさせようと試みました。ユーザー エクスペリエンスの異なる側面を表す Core Web Vitals 指標に加えて、カスタム JavaScript を使用して、Time to First Byte（TTFB）、First Contentful Paint（FCP）、First Paint、Time to Interactive（TTI）を追跡しました。
指標は、Performance API、Long Tasks API、Google のポリフィルのいくつかのメソッドを使用して収集されます。詳細については、ウェブ担当シニア プリンシパル エンジニアである Manuel Garcia 氏による 2020 年半ばの Farfetch Tech ブログの投稿をご覧ください。
データ分析の面では、Farfetch には独自のマルチチャネル トラッキング ソリューションがあり、オムニチャネル トラッキングと呼ばれるフロントエンド アプリケーションで使用されています。ページビュー、ユーザー アクション、システム アクションによって生成されたイベントをトラッキングします。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 はこのしきい値を慎重に研究し、有意な結果を発見しました。
ファーフェッチの統計的相関分析では、この時点を超えるとコンバージョン率が低下し始め、離脱率が上昇することが示されました。このことから、ページの読み込みが遅いことのデメリットをユーザーが感じ始め、LCP が 100 ミリ秒増加するごとにコンバージョン率が平均で 1.3% 低下していることがわかります。
Farfetch では、Cumulative Layout Shift（CLS）スコアが 0.01 減るごとに離脱率が 3.1% 低下し、ページの安定性がウェブサイトに留まることへの影響を再確認しました。
ページのインタラクティビティと流動性に関しては、First Input Delay（FID）の追跡と分析は継続的に行われていますが、Farfetch では TTI も測定されており、Farfetch のビジネスのコンバージョン ファネルにかなりの影響を及ぼした指標であることが判明しました。
そのため、この指標を保存するために、Google の TTI ポリフィルをウェブサイトに挿入しました。Long Tasks API を使用して、処理に時間がかかるタスク（ブラウザのメインスレッドで 50 ミリ秒以上かかっているタスク）を報告する。
分析チームはその後、TTI が 1 秒短縮されるごとにコンバージョン率が 2.8% 増加することがわかりました。これは、コードの効率を高め、ブラウザのメインスレッドの障害を取り除くための強力なケースとなります。
最終的に、この分析では、一部の指標がビジネスの KPI に大きく影響しなかったり、ユーザー ジャーニーのさまざまな段階でより関連性が高い指標があることも明らかになりました。これにより、コンバージョン プロセスの各段階における機会を完全に把握できるようになりました。
ステップ 3: 文化の変革を組み込む
サイトの速度に対するユーザーの印象に関する定性的なユーザー調査とともに、上記の分析情報を提示することは、プロダクト ロードマップ全体にわたるパフォーマンスに基づく意思決定に関して、会社の目標に合致させ、経営幹部レベルの認識を確保し、賛同を得るうえで最も重要でした。これにより、Farfetch のパフォーマンスの価値を実証できるようになりました。
優先順位付けを効率化するため、Farfetch は Google の速度影響計算ツールからヒントを得て、サイトの速度のビジネスケース計算ツールというセルフサービス ツールを作成しました。プロダクト マネージャーはこれを使用して、ビジネスへの影響をその場で計算し、パフォーマンス改善からビジネスケースを作成できます。コンバージョン率とユーザー エクスペリエンス指標の相関関係を利用するデータモデルにより、さまざまなサービス範囲、デバイス、ユーザー ジャーニーのタッチポイントに柔軟に適応できます。
一方、一連のセルフサービス分析ダッシュボードにより、リアルタイムのパフォーマンス指標とそのビジネスへの影響をビジネス全体で可視化できるようになりました。今やパフォーマンスは製品開発に完全に組み込まれるようになり、製品チームは指標、監査ツール、パフォーマンス予算のモニタリングに簡単にアクセスできるようになりました。さらに、データレイヤーが統合されたことにより、Farfetch の A/B テストツールではパフォーマンス指標を利用できるようになり、プロダクト マネージャーはさらに強力なインサイトを手に入れることができます。
ここ数か月間、コアチームはフロントエンド開発チームだけでなくプラットフォーム ドメインでもこの文化を確立し、同様の手法を使用して主要なマイクロサービスとトランザクションの影響をモニタリングし、証明しています。
このトピックに関する Farfetch を利用したプレゼンテーションは数多くありますが、外部からの指摘もあります。たとえば、2021 年の Google I/O での Core Web Vitals のビジネスへの影響に関する講演での言及があります。これは、テーマとの関連性を継続的に高め、チームの文化戦略を強固なものにすることにも貢献しました。
ステップ 4: 指標を改善する
結局のところ、これらの作業はすべて、Farfetch がウェブサイトの速度指標を客観的に改善し、チームが最高水準のプラクティスを実践し、改善の機会を追求できるように保証することに貢献する必要がありました。
2021 年に明らかになった主な機会の 1 つは、Farfetch の 2 つの主要なページタイプである商品ページと商品リスティング ページの LCP を改善する必要性でした。
担当チームは、ページのメイン コンテンツをどのように読み込んでいるかに対処しました。この機会を追求することの効果を示すビジネスケースによって、同社は次のことを実現しました。
- 商品画像の読み込みコンポーネントを JavaScript ベースのソリューションからネイティブ実装に変更します。
- イメージの優先度を定義し、クリティカルなアセットとクリティカルでないアセットに分けます。
- 重要な画像を早い段階で読み込みます。ソースは HTML にインライン化し、
<link rel="preload">を使用してできる限り早くダウンロードします。 - 重要度の低い画像には
<img loading="lazy">属性を使用し、サポートされていないブラウザ（Safari など）では Intersection Observer を使用してポリフィルを使用します。
これにより、飛躍的な進歩を遂げ、仮説とビジネスへの影響を A/B テストによって証明することができました。たとえば、商品ページでは、この作業によって 600 ミリ秒以上短縮されました。また、A/B テストでは、同社が定義した信頼度でコンバージョン率が 1 ～ 5% 向上することがわかりました。
LCP スコアの Google の定義に基づき、P-MAX が実施したページビューの割合について、「良好」、「改善が必要」、「低い」の 2 種類があります。
サイトの速度を上げて作業効率を高めるメリット
パフォーマンスとビジネスケース計算ツールのようなツールに関する文化を構築することで、全員がプロダクト マネージャー、ステークホルダー、エンジニアの全員が理解できる共通の言葉を使うことができるようになりました。そのため、新しい取り組みとパフォーマンス向上の優先順位付けについて、継続的な議論が活発化しています。
「パフォーマンスが技術面のみの懸念事項、つまりエンジニアリング チームだけが対処および修正できるという、パフォーマンスの悪循環を断ち切りたかったのです」と、Farfetch のウェブ チャネル担当シニア プリンシパル プロダクト マネージャーである Rui Santos 氏は説明します。「パフォーマンス指標をビジネス指標と結びつけることで、驚くほど効果的になり、メッセージを非常に迅速に伝えることができました。ビジネスは会社を後押しします。成功をつなげて指標の速度を速めることで、幅広い関係者がトレードオフの判断を理解し、対処するようになりました。」
高級 e コマース セグメントでは、サイトの読み込みが速いか遅いかによって、ブランドやサービスの品質が全体としてどのように認識されるかが決まります。ユーザーにとって、品質は高級感に他なりません。これは、ウェブサイトのパフォーマンスなど、エクスペリエンスのあらゆる側面に当てはまります。サイトの速度はコンバージョン率に効果が実証されているため、Farfetch では現在、パフォーマンスが将来のプランニングにおいて安全な位置を占めています。