最高水準のウェブ エクスペリエンスを構築したスタートアップのストーリー。
基本情報
2015 年に設立された Truebil は、100% 認定中古車を販売するインドのオンライン マーケットプレイス。1 か月のアクティブ ユーザー数が 140 万人を超え、所有権の譲渡、保険、ローン、サービス保証を含むワンストップ ソリューションです。見込み顧客は、サイトの「比較」機能と「Truescore」機能を使用して車両の評価を行い、画像と詳細な検査レポートを含む個々の製品ページを見ることができます。Truebil は、機械学習に基づくパーソナライズされたおすすめ情報、お気に入りへの追加機能、自動車シェアリング機能などの豊富な機能で、自社製品を差別化しています。
課題
Truebil は、頻度が低く価値の高い取引を行うリーン スタートアップであるため、優先順位と投資に適したプラットフォームを選択することが極めて重要でした。
Truebil は、ターゲット プラットフォームとしてモバイルを選び、最初のアプリ「Truebil Lite」にウェブを選びました。なぜなら、ウェブは簡単に見つけられて、ストレスが少ないからです。ウェブ テクノロジーを利用すると、Android/iOS アプリを構築するよりも、開発コストやデータとメモリの使用量を減らし、顧客獲得コストを大幅に削減できます。プログレッシブ ウェブアプリ（PWA）を構築することで、Truebil はウェブのメリットと iOS/Android のメリットをすべて享受できます。
解決策
社内チームが React、Django、Preact（本番環境の移行用）を使用して Truebil Lite を開発するのに 4 か月を費やしました。ユーザーの目標に基づき、このウェブアプリの明確な指針を定めました。ユーザー エクスペリエンスは次のとおりでした。
- 最初の読み込み以降のナビゲーションは高速
- 信頼性: ユーザーのネットワークやデバイスの制約から解放され、かつ
- 魅力的である。特に小さなモバイル画面では、ユーザーが使いたくなる。
最初の読み込みとナビゲーションが速くなるように最適化する
チームは、パフォーマンスの最適化の指針として Lighthouse を使用し、新機能を実装しながらパフォーマンス重視の文化を取り入れました。Truebil は、First Contentful Paint と Time to Interactive（TTI）の指標を優先し、初回読み込みの高速化、リピート アクセス、スムーズなナビゲーションを実現できるように最適化することで、ユーザー エクスペリエンスを大幅に改善できました。チームは、パフォーマンス バジェットを設定し、それを達成するためのさまざまな手法を使用することで、これらの結果を達成しました。
パフォーマンス バジェットを設定する
パフォーマンス重視の Truebil のチームは、最初の読み込みはサーバーサイド レンダリング、後続の読み込みはクライアントサイド レンダリングを行う単一ページ アプリとして、同社のエクスペリエンスを設計しました。ウェブアプリでクライアントサイドのレンダリングのパフォーマンスを維持するのは難しい場合があるため、Truebil は、特に機能を追加する際にスピードが犠牲にならないように、非常に厳しいパフォーマンス バジェットを設定しました。
TTI についてはマイルストーン ベースの厳密な予算を設定し、5 秒未満に抑えることを目標にしました。この目標を達成するため、ビルドが JavaScript バンドルのサイズ 250 KB を超えないようにするとともに、画像サイズを常時チェックして、アプリの 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 handshake を完了し、クロスオリジン ドメイン名を事前に解決するため、安全でテンポの良いユーザー エクスペリエンスを実現できます。
<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 のキャッシュに移動し、ネットワークにフォールバックします。
商品リスティングや詳細ページなど、動的コンテンツがほとんど変更されないページについては、ネットワーク ファースト戦略を採用しています。ネットワークが利用できない場合は、まずブラウザがネットワークを確認してコンテンツを確認し、その後、API キャッシュにフォールバックします。
また、ホームページ、フィルタ ページ、検索ページ、都市ページなど、頻繁に変更される動的ページについては、最も速い戦略を使用して、ネットワークかキャッシュのどちらか早いほうに基づいて選択するようにしています。コンテンツを最新の状態に保つため、ネットワーク レスポンスがキャッシュ内にあるレスポンスと異なる場合は常にキャッシュが更新されます。
完全なオフライン エクスペリエンスを実現する Service Worker
Truebil のコンテンツの大部分は非常に動的で、車の追加や購入はいつでも可能です。しかし同社は、たとえ不規則なネットワークを経由したり、完全にオフラインになっていたりしても、ユーザーが利用しやすいコンテンツをある程度確保したいと考えていました。
Service Worker を使用して、静的データとユーザーがすでに操作した動的データの両方をキャッシュに保存して、ユーザーがオフラインで表示できるようにしました。再びオンラインになったときにコンテンツが変わる可能性があることをユーザーがわかるようにするために、オフライン モードであることを示すグレースケールの UI に変更しました。商品ページの閲覧は、Truebil のユーザー ジャーニーの重要な要素です。PWA に 1 回以上アクセスしたユーザーは、以前にアクセスしたリスティングや商品ページを閲覧できますが、リスティングや商品の更新内容を見ることはできません。
エンゲージメントを高めてリピーターを増やしましょう
魅力的な初体験
ユーザーのほとんどが有料チャネルからアクセスしているため、Truebil は、コンバージョンを増やすために、非常に関連性の高いおすすめを表示するプロダクトで読み込みの速いウェブアプリを補完する必要がありました。チームは、既存のユーザーに対しては高度なフィルタリングに基づくレコメンデーション システムを使用していますが、そのシステムは初めてログインするユーザーに対しては機能しません。
初めてのユーザーにコールド スタートをさせないようにするため、チームはデジタル マーケティング活動を使用してレコメンデーション システムを統合しました。車両モデル、価格、車体タイプなどの商品情報は、UTM パラメータを介して広告のリンク先 URL に追加されます。これはレコメンデーション システムで読み取られ、表示される商品に反映されます。URL にそのような詳細情報が含まれていない場合は、人気車種にフォールバックします。人気車種とは、過去数週間または数日間に人気のあるモデル、人気のある予算、人気のある車を組み合わせたものです。
インストール可能なウェブアプリ
魅力的なユーザー エクスペリエンスを備えた、高速でフル機能のウェブアプリを構築した Truebil は、ユーザーに繰り返し利用してもらいたいと考えました。アプリをインストールできるようにすることで、リピート訪問がはるかにシームレスになることを認識しました。
ホーム画面に追加機能を実装して、フル プログレッシブ ウェブアプリ（PWA）を実現しました。このアプローチにより、ユーザーは Truebil Lite をホーム画面に追加し、全画面モードで起動できるようになりました。また、すでにオフライン モードを実装していたため、チームは新機能を簡単に追加することができました。
ユーザーがスパム行為を行うことを防ぎ、ユーザーがアプリをインストールする可能性を高めるために、チームは PWA のインストールを促す戦略を最近更新し、さまざまな種類のユーザーにとって実際に役に立つ場合にインストールを促すメッセージが表示されるようにしました。Truebil は、
- ユーザーが操作を完了したときやアイドル状態になったときにメッセージを表示します。
- 成人向けのユーザーに対して、コンテキストに応じたプロンプトを表示します。
- ユーザーが一定時間サイトに滞在したときにバナーを表示する。
プロセス完了時とトラフィックの多いページにデフォルト バナーを表示
そこで同社のチームは、ユーザーがタスクを完了したとき、またはトラフィック量の多いページにアクセスしているがアイドル状態である（フォームのスクロールや入力などのアクションを実行しない）ときにインストール バナーを表示することにしました。この方法により、ユーザーの操作を中断せずに済みます。
成人ユーザー向けのコンテキスト プロンプト
しばらくの間アプリを操作したユーザーに対しては、コンテキストに即したカスタム メッセージを使用して、ホーム画面にアプリをインストールする価値を示しました。
時間ベースのプロンプトのカスタムバナー
最後に、リストページを開いたときや、ユーザーが一定時間アプリを操作した後など、特定のイベントでトリガーされる通知のようなデザインの、邪魔にならないバナーを組み込みました。
これらの改善により、Truebil のコンバージョン率とエンゲージメント率は大幅に増加し、ユーザー セッションが 26% 増加し、コンバージョン数が 61% 増加しました。これは、各コンバージョンのトランザクション値が高いことを考えると、ビジネスにとって顕著です。
リソースが限られているスタートアップにとって、ビジネスの成功には適切なプラットフォームの選択が欠かせません。スピード、レジリエンス、エンゲージメントに重点を置いた PWA に移行したことで、コンバージョン数の増加とウェブのスムーズなリーチのおかげで、マーケティングまでに要する収益を 80% 増やすことができました。
Truebil、共同創業者 / プロダクトおよびデータ サイエンス担当チーフ Rakesh Raman 氏
44%
読み込み時間の改善
26%
長いユーザー セッション
61%
コンバージョン数が増加
80%
マーケティング費用の増加率