スタートアップ企業が最高水準のウェブ エクスペリエンスを構築したストーリー。
概要
2015 年に設立された Truebil は、100% 認定済みの中古車を販売するインドのオンライン マーケットプレイスです。月間アクティブ ユーザーが 140 万人を超えるこのサービスは、所有権の譲渡、保険、ローン、サービス保証など、あらゆる手続きを 1 か所で済ませられるワンストップ ソリューションです。見込み顧客は、画像と詳細な検査レポートを含む個々の商品ページを確認し、サイトの [比較] 機能と [Truescore] 機能を使用して車両の評価を取得できます。Truebil は、機械学習に基づくパーソナライズされたおすすめ、お気に入りに追加機能、車の共有機能など、豊富な機能で製品を差別化しています。
課題
Truebil は、取引頻度が低く、取引額が高いリーン スタートアップであるため、優先順位を付けて投資する適切なプラットフォームを選択することが重要でした。
Truebil はモバイルをターゲット プラットフォームとして特定し、ウェブの容易な検出と摩擦の少なさから、最初のアプリ Truebil Lite にウェブを選択しました。ウェブ テクノロジーは、Android/iOS アプリを構築するよりも開発コストが低く、データとメモリの使用量が少なく、顧客獲得費用が大幅に削減されます。また、プログレッシブ ウェブアプリ（PWA）を構築することで、Truebil はウェブのメリットと iOS/Android のメリットの両方を享受できます。
解決策
社内チームは、React、Django、Preact（本番環境への移行用）を使用して Truebil Lite を 4 か月で開発しました。ユーザーの目標に基づいて、ウェブアプリの明確な指針を設定しました。エクスペリエンスは次のようである必要がありました。
- 初回読み込みとそれ以降のナビゲーションが高速であること。
- 信頼性が高く、ユーザーのネットワークやデバイスの制約に依存しない。
- 魅力的であること。特にモバイルの小さな画面では、ユーザーが戻ってきたいと思うような魅力的なデザインである必要があります。
初回読み込みとナビゲーションを高速化する
チームは Lighthouse を使用してパフォーマンスの最適化をガイドし、新機能を実装しながらパフォーマンス優先の文化を採用しました。Truebil は、First Contentful Paint と操作可能になるまでの時間（TTI）の指標を優先し、初回読み込みの高速化、リピート訪問、スムーズなナビゲーションを最適化することで、ユーザー エクスペリエンスを大幅に改善することができました。チームは、パフォーマンス バジェットを設定し、さまざまな手法を使用してそれを達成することで、これらの結果を達成しました。
パフォーマンス予算を設定する
パフォーマンスを最優先に考えた Truebil チームは、初回読み込みにはサーバーサイド レンダリング、それ以降の読み込みにはクライアントサイド レンダリングを使用するシングルページ アプリとしてエクスペリエンスを設計することにしました。クライアントサイド レンダリングを使用するウェブアプリのパフォーマンスを維持するのは難しい場合があるため、Truebil は非常に厳しいパフォーマンス バジェットを設定し、特に機能を追加する際に速度を損なわないようにしました。
チームは、TTI を 5 秒未満に抑えることを目標に、マイルストーン ベースの厳しい予算を設定しました。その目標を達成するために、ビルドが 250 KB の JavaScript バンドルサイズを超えないように手動で確認し、画像サイズを常にチェックし、アプリの Lighthouse パフォーマンス スコアを継続的に追跡しました。
JavaScript バンドルを最適化する
チームは、PRPL パターンを使用して JavaScript ペイロードをプリキャッシュして最適化し、HTTP/2 に移行して重要な JavaScript バンドルを配信するという基本的なことから始めました。
重要でないリソースを遅延読み込みするために、フレームワーク レベルの遅延読み込みコンポーネントを使用してファーストビューの下のフラグメントを読み込みました。
JavaScript バンドルのボトルネックを解消するため、チームはコード分割によってペイロードを削減しました。コンポーネント ベースとルートベースのチャンク化を使用してメインバンドルのサイズを削減し、読み込み時間を 44% 改善しました。TTI は 6 秒から約 5 秒に、First Meaningful Paint（FMP）は 4.1 秒から 3.6 秒に短縮されました。
クリティカル CSS をインライン化する
FMP をさらに改善するために、チームは Lighthouse を使用して、パフォーマンスの最適化の機会を見つけ、その影響を検証しました。Lighthouse は、レンダリングをブロックする CSS を減らすことが最も効果的であることを示していたため、Truebil はすべての重要な CSS をインライン化し、重要でない CSS を遅延させました。この手法により、FMP が約 2 秒短縮されました。
任意のオリジンへのコストのかかる往復を複数回行わない
DNS と TLS のオーバーヘッドを軽減するために、Truebil は <link rel="preconnect"> と <link rel="dns-prefetch"> を使用しました。このアプローチにより、ブラウザはページ読み込み時に TLS ハンドシェイクをできるだけ早く完了し、クロスオリジン ドメイン名を事前に解決するため、安全で迅速なユーザー エクスペリエンスを実現できます。
<link rel=preconnect> の追加による影響。次のページを動的にプリフェッチする
チームはデータを分析し、最適化できる最も一般的なユーザー ジャーニーを特定しました。このような場合、アプリは <link rel=prefetch> を使用して次のページのリソースを動的にダウンロードし、ユーザーがスムーズにナビゲーションできるようにします。チームはプリフェッチするリンクを手動で特定しますが、webpack を使用してそれらのリンクの JS をバンドルします。
画像とフォントを最適化する
画像は Truebil のプロダクト エクスペリエンスと信頼性において重要な要素であり、各商品リスティングには最大 40 枚の写真が含まれています。画像を読み込むことでページの読み込みがブロックされないように、チームはすべてのリソースを CDN から配信し、画像の最適化に imagemagick を使用することにしました。また、画像、JavaScript、CSS など、圧縮可能なすべてのリソースを Gzip 圧縮して、読み込み時間をさらに短縮しました。
Truebil は、読み込み時間をできるだけ短くしながらテキストが一時的に表示されなくなるのを防ぐため、外部フォントが読み込まれるまでシステム フォントを代替として使用するように CSS を設定しました。
その他の最適化
アプリの準備が整った後、チームはベンダー バンドルのサイズと JavaScript の実行時間をさらに短縮したいと考え、本番環境で React アプリを Preact に切り替えました。（詳しくは、React コレクションをご覧ください）。このアプローチにより、ベンダー バンドルのサイズを 82.3 KB から 51.2 KB に削減できました。
信頼性を組み込む
インド市場に重点を置いている Truebil では、ユーザーの大部分が、2G 帯域幅まで低下することもある不安定なネットワークでプロダクトにアクセスしています。そのため、ネットワークの制約がある状況でのパフォーマンスを改善するだけでなく、ユーザーが信頼できるプロダクト（常に動作するプロダクト）を提供するためにも、復元力のあるエクスペリエンスを構築することが重要でした。
信頼性の高い読み込みのためのハイブリッド キャッシュ保存戦略
Truebil のコンテンツのインタラクティブ性と変化率は大きく異なります。Truebil チームは、コンテンツの鮮度と信頼性をすべて確保するため、ネットワーク ファースト、キャッシュ ファースト、最速ファーストの戦略を組み合わせて API キャッシュ保存を実装しました。
Truebil は、定期購入ページなどの静的ページでは、キャッシュ ファースト戦略を使用して、まず定期購入 API キャッシュにアクセスし、ネットワークにフォールバックします。
Truebil では、商品リスティング ページや詳細ページなど、動的コンテンツがほとんど変更されないページについては、ネットワーク優先戦略を採用しています。これにより、ブラウザはまずネットワークでコンテンツを確認し、ネットワークが利用できない場合は API キャッシュにフォールバックします。
Truebil は、ホーム、フィルタ、検索、都市ページなど、頻繁に変更される動的ページについては、ネットワークとキャッシュのどちらが先に読み込まれるかに基づいて選択する fastest-first 戦略を採用しています。コンテンツを最新の状態に保つため、ネットワーク レスポンスがキャッシュ内のコンテンツと異なる場合は、キャッシュが更新されます。
完全なオフライン エクスペリエンスのための Service Worker
Truebil のコンテンツの大部分は非常に動的で、いつでも車の追加や購入が可能です。しかし、チームは、ネットワークが不安定な場合や完全にオフラインの場合でも、ユーザーが利用できるコンテンツをある程度確保したいと考えていました。
チームは Service Worker を使用して、静的データとユーザーがすでに操作した動的データの両方をキャッシュに保存し、ユーザーがオフラインで表示できるようにしました。ユーザーがオンラインに戻ったときにコンテンツが変更される可能性があることをユーザーに知らせるため、チームは UI をグレースケールに変更してオフライン モードを示すようにしました。商品ページの閲覧は、Truebil のユーザー ジャーニーの重要な部分です。PWA に一度でもアクセスしたことがあるユーザーは、以前にアクセスしたことのあるリスティングや商品ページを閲覧できますが、リスティングや商品の更新は表示されません。
エンゲージメントを高めてユーザーをリピーターにする
魅力的な初回エクスペリエンス
ユーザーのほとんどが有料チャネルから流入しているため、Truebil はコンバージョンを増やすために、関連性の高いおすすめを表示するプロダクトで、読み込みの速いウェブアプリを補完する必要がありました。チームは既存のユーザー向けに高度なフィルタリングに基づくレコメンデーション システムを使用していますが、このシステムは初めてログインするユーザーには機能しません。
初回ユーザーにコールドスタートをさせないように、チームはデジタル マーケティングの取り組みを利用してレコメンデーション システムを統合しました。自動車のモデル、価格、ボディタイプなどの商品詳細を UTM パラメータで広告のリンク先 URL に追加し、おすすめシステムで読み取って、表示される商品に反映します。URL にそのような詳細が読み取れない場合、システムは人気のある車種（人気のあるモデル、人気のある予算、過去数週間または数日間に人気があった車種の組み合わせ）にフォールバックします。
インストール可能なウェブアプリ
Truebil は、魅力的なユーザー エクスペリエンスを備えた高速でフル機能のウェブアプリを構築した後、ユーザーが継続的に利用してくれるようにしたいと考えました。アプリをインストール可能にすることで、リピート訪問がはるかにシームレスになることに気づきました。
チームは、ホーム画面に追加機能を実装して、プロダクトを完全なプログレッシブ ウェブアプリ（PWA）にしました。このアプローチにより、ユーザーは Truebil Lite をホーム画面に追加して全画面モードで起動できるようになりました。また、オフライン モードをすでに実装していたため、チームは新しい機能を簡単に追加できました。
ユーザーにスパムが送信されないようにし、ユーザーがアプリをインストールする可能性を高めるため、チームは最近、PWA のインストールを促進するための戦略を更新し、さまざまな種類のユーザーにとって実際に役立つタイミングでインストール プロンプトが表示されるようにしました。Truebil は、次の 3 つの部分で構成される戦略を採用しました。
- ユーザーが操作を完了したときや、操作を行っていないときにプロンプトを表示します。
- 成人ユーザーにコンテキストに応じたプロンプトを表示します。
- ユーザーがサイトで一定の時間を費やしたときにバナーを表示します。
プロセス完了時とトラフィックの多いページに表示されるデフォルトのバナー
チームは、ユーザーがタスクを完了したとき、またはトラフィックの多いページで操作せずにいるとき（スクロールやフォームの入力などの操作を行っていないとき）に、インストール バナーを表示することにしました。このアプローチにより、ユーザーのアクティビティを中断せずに済みました。
成人ユーザー向けのコンテキストに基づくプロンプト
アプリをしばらく使用していたユーザーに対しては、コンテキストに沿ったカスタム メッセージを使用して、アプリをホーム画面にインストールするメリットをアピールしました。
時間ベースのプロンプトのカスタム バナー
最後に、チームは、リスティング ページを開いたときや、ユーザーがアプリで一定の時間を費やしたときなどの特定のイベントでトリガーされる、通知のようなデザインの邪魔にならないバナーを組み込みました。
これらの改善により、Truebil のコンバージョン率とエンゲージメント率は大幅に向上し、ユーザー セッションの長さが 26% 増加、コンバージョン数が 61% 増加しました。コンバージョン 1 件あたりの取引額が大きい同社にとって、これは大きな成果です。
リソースが限られているスタートアップにとって、適切なプラットフォームを選択することはビジネスの成功に不可欠です。速度、復元力、エンゲージメントに重点を置いた PWA に移行したことで、コンバージョン率の向上とウェブのシームレスなリーチにより、収益とマーケティング費用の比率が 80% 増加しました。
Truebil の共同創業者兼プロダクト＆データ サイエンス担当責任者、Rakesh Raman 氏
44%
読み込み時間の短縮
26%
ユーザー セッションの継続時間を長くする
61%
コンバージョン数が増加
80%
収益とマーケティング費用の比率の増加