Truebil がウェブを成長のチャネルにした方法

最高水準のウェブ エクスペリエンスを構築したスタートアップのストーリー。

Harleen Batra
Harleen Batra

概要

2015 年に設立された Truebil は、100% 認定中古車を販売するインドのオンライン マーケットプレイスです。月間アクティブ ユーザー数は 140 万人を超え、所有権の移転、保険、ローン、サービス保証など、ワンストップで提供しています。見込み顧客は、画像や詳細な査定レポートが掲載された個々の商品ページを閲覧し、サイトの [比較] 機能と [Truescore] 機能を使用して車両の評価を確認できます。Truebil は、機械学習に基づくパーソナライズされたおすすめ、お気に入りに追加機能、カーシェアリング機能など、豊富な機能を備えたサービスで差別化を図っています。

課題

Truebil は、取引頻度が低く、高額な取引を行うリーン スタートアップであるため、優先して投資する適切なプラットフォームを選択することが重要でした。

Truebil はモバイルをターゲット プラットフォームと特定し、ウェブの見つけやすさと使いやすさから、最初のアプリである Truebil Lite にウェブを選択しました。ウェブ技術では、Android/iOS アプリを構築する場合と比較して、開発コスト、データ使用量、メモリ使用量を削減し、顧客獲得費用を大幅に削減できます。また、プログレッシブ ウェブアプリ(PWA)を構築することで、Truebil はウェブのメリットと iOS/Android のメリットをすべて享受できます。

解決策

社内チームは、React、Django、Preact(本番環境への移行用)を使用して Truebil Lite を 4 か月かけて開発しました。ユーザーの目標に基づいて、ウェブアプリの明確なガイドラインを設定しました。エクスペリエンスは次の条件を満たす必要がありました。

  • 最初の読み込みとその後のナビゲーションの高速
  • ユーザーのネットワークやデバイスの制約に関係なく信頼性が高い
  • 特に小さなモバイル画面で魅力的で、ユーザーが再び訪れたくなるようにする。

初回読み込みとナビゲーションを高速化するように最適化する

Lighthouse を使用してパフォーマンスの最適化をガイドし、新機能を実装する際にパフォーマンス重視の文化を採用しました。Truebil は、First Contentful PaintTime to Interactive(TTI)指標を優先し、初回読み込みの高速化、再訪問、スムーズなナビゲーションを最適化することで、ユーザー エクスペリエンスを大幅に改善できました。チームは、パフォーマンス バジェットを設定し、さまざまな手法を使って目標を達成することで、これらの結果を達成しました。

パフォーマンス予算を設定する

パフォーマンスを重視した Truebil チームは、初回読み込みにはサーバーサイド レンダリング、それ以降の読み込みにはクライアントサイド レンダリングを使用するシングルページ アプリとしてエクスペリエンスを設計しました。クライアントサイド レンダリングを使用するウェブアプリのパフォーマンスを維持するのは難しい場合があります。そのため、Truebil では、特に機能を追加する際に速度を損なわないように、非常に厳格なパフォーマンス バジェットを設定しています。

チームは、TTI を 5 秒未満に抑えることを目標に、厳格なマイルストーンベースの予算を設定しました。この目標を達成するため、ビルドの JavaScript バンドルサイズが 250 KB を超えないように手動で確認し、画像サイズを常にチェックし、アプリの Lighthouse パフォーマンス スコアを継続的に追跡しました。

JavaScript バンドルを最適化する

チームはまず、PRPL パターンを使用して JavaScript ペイロードをプリキャッシュして最適化し、HTTP/2 に移行して重要な JavaScript バンドルを提供しました。

重要でないリソースを遅延読み込みするために、フレームワーク レベルの遅延読み込みコンポーネントを使用して、折りたたみ後のフラグメントを読み込みました。

JavaScript バンドルのボトルネックを解消するため、チームはコード分割によってペイロードを削減しました。コンポーネントベースとルートベースのチャンキングを使用してメイン バンドルのサイズを削減し、読み込み時間を 44% 短縮しました。TTI は 6 秒から約 5 秒に、ファースト コンテンツ表示(FMP)は 4.1 秒から 3.6 秒に短縮されました。

コード分割前後の Truebil Lite のビルドサイズを示す Chrome DevTools のスクリーンショット。
チャンクサイズを小さくした場合の影響。

クリティカルな CSS をインライン化する

FMP をさらに改善するため、チームは Lighthouse を使用してパフォーマンスの最適化の機会を見つけ、その影響を検証しました。Lighthouse では、レンダリングをブロックする CSS を減らすことが最も効果的であると示されたため、Truebil はすべてのクリティカル CSS をインライン化し、クリティカルでない CSS を遅らせました。この手法により、FMP が約 2 秒短縮されました。

CSS をインライン化する前後の Truebil Lite の最初の意味のあるペイントまでの時間を示す Chrome DevTools のスクリーンショット。
クリティカルな CSS をインライン化する影響。

送信元への複数の往復を回避し、費用を削減

DNS と TLS のオーバーヘッドを軽減するために、Truebil は <link rel="preconnect"><link rel="dns-prefetch"> を使用しました。このアプローチでは、ブラウザはページの読み込み時に TLS ハンドシェイクをできるだけ早く完了し、クロスオリジン ドメイン名を事前に解決するため、安全で高速なユーザー エクスペリエンスを実現できます。

rel=preconnect の効果を示す Chrome DevTools のスクリーンショット。 <link rel=preconnect> の追加の影響。

次のページを動的にプリフェッチする

データを分析して、最適化できる最も一般的なユーザー ジャーニーを特定しました。このような場合、アプリは <link rel=prefetch> を使用して次のページのリソースを動的にダウンロードし、ユーザーがスムーズに移動できるようにします。プリフェッチするリンクを手動で特定し、webpack を使用してそれらのリンクの JS をバンドルします。

Truebil Lit アプリと Chrome デベロッパー ツールのスクリーンショット。アセットがすでにプリフェッチされているため、一般的なナビゲーションではネットワーク リクエストが必要ないことを示しています。
一般的なユーザー ジャーニーでアセットをプリフェッチした場合の効果。

画像とフォントを最適化する

画像は 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 は最速優先戦略を使用して、どちらが先に到達するかに基づいてネットワークとキャッシュのどちらを選択します。コンテンツが最新の状態になるように、ネットワーク レスポンスがキャッシュ内の内容と異なる場合は常にキャッシュが更新されます。

完全なオフライン エクスペリエンスのための Service Worker

Truebil のコンテンツの大部分は非常に動的で、車はいつでも追加または購入できますが、チームは、ネットワークが不安定な場合や完全にオフラインの場合でも、ユーザーがある程度のコンテンツを利用できるようにしたいと考えていました。

Service Worker を使用すると、静的データとユーザーがすでに操作した動的データの両方をキャッシュに保存し、ユーザーがオフラインで表示できるようにしました。オンラインに戻ったときにコンテンツが変更される可能性があることをユーザーに知らせるため、オフライン モードであることを示すように UI をグレースケールにしました。商品ページの閲覧は、Truebil のユーザー ジャーニーの重要な部分です。PWA に一度でもアクセスしたことがあるユーザーは、以前にアクセスした掲載情報や商品ページを閲覧できますが、掲載情報や商品の更新内容は表示されません。

オフライン モードの Truebil Lite アプリのスクリーンショット。
オフライン モードの Truebil Lite。

エンゲージメントを高めてユーザーを引き付ける

魅力的な最初のエクスペリエンス

ユーザーのほとんどが有料チャネルからアクセスするため、Truebil は、コンバージョンを増やすために、高速読み込みのウェブアプリに、関連性の高いおすすめ商品を表示するプロダクトを追加する必要がありました。チームは、既存のユーザーに対して高度なフィルタリングに基づくレコメンデーション システムを使用していますが、このシステムは初めてログインするユーザーには機能しません。

初めてアプリを利用するユーザーにコールド スタートを回避するため、チームはデジタル マーケティング活動を使用しておすすめシステムを統合しました。車種、価格、ボディタイプなどの商品の詳細を UTM パラメータで広告のリンク先 URL に追加します。この情報はレコメンデーション システムによって読み取られ、表示される商品に反映されます。システムが URL でそのような詳細を読み取れない場合は、人気車にフォールバックします。人気車とは、人気モデル、人気予算、過去数週間または数日間に人気だった車の組み合わせです。

インストール可能なウェブアプリ

魅力的なユーザー エクスペリエンスを備えた高速でフル機能のウェブアプリを構築した Truebil は、ユーザーが引き続きアプリを利用できるようにしたいと考えていました。アプリをインストール可能にすることで、ユーザーが繰り返し訪問しやすくなることがわかりました。

チームは [ホーム画面に追加] 機能を実装し、プログレッシブ ウェブアプリ(PWA)として製品を完成させました。このアプローチにより、ユーザーは Truebil Lite をホーム画面に追加し、全画面モードで起動できるようになりました。オフライン モードはすでに実装されていたため、新しい機能を簡単に追加できました。

ユーザーに迷惑メールが送信されないようにし、ユーザーがアプリをインストールする可能性を高めるために、最近、PWA のインストールを促進する戦略が更新され、さまざまな種類のユーザーにとって実際に役立つ場合にインストール プロンプトが表示されるようになりました。Truebil は、次の 3 つの戦略を立てました。

  • ユーザーがアクションを完了したときやアイドル状態のときにプロンプトを表示します。
  • 成人ユーザーにコンテキスト プロンプトを表示する。
  • ユーザーがサイトに一定の時間を費やしたときにバナーを表示します。

プロセスの完了時とトラフィックの多いページに表示されるデフォルト バナー

インストール バナーは、ユーザーがタスクを完了したとき、またはトラフィックの多いページにアクセスしているものの、操作を行っていない場合(スクロールやフォームの記入など)に表示することにしました。このアプローチにより、ユーザーのアクティビティを中断することなく、

Truebil Lite のインストール バナーのスクリーンショット。

成人向けの状況に応じたメッセージ

アプリを長い間使用しているユーザーに対しては、コンテキストに応じたカスタム メッセージを使用することで、アプリをホーム画面にインストールするメリットを訴求しました。

成人向けの Truebil Lite のコンテキストに応じたインストール プロンプトのスクリーンショット。

時間ベースのプロンプトのカスタムバナー

最後に、通知のようなデザインで邪魔にならないバナーを組み込み、リスティング ページを開いたときや、ユーザーがアプリで一定の時間を過ごした後にトリガーされるようにしました。

Truebil Lite の時間ベースのインストール プロンプト バナーのスクリーンショット。

これらの改善により、Truebil のコンバージョン率とエンゲージメント率が大幅に向上し、ユーザー セッションが 26% 長くコンバージョン数が 61% 増加しました。これは、各コンバージョンのトランザクション値が高いことを考えると、ビジネスにとって大きな意味があります。

リソースが限られているスタートアップにとって、適切なプラットフォームを選択することはビジネスの成功に不可欠です。速度、復元力、エンゲージメントに重点を置いた PWA に移行したことで、コンバージョンの増加とウェブのシームレスなリーチにより、収益に対するマーケティング費用を 80% 増やすことができました。

Rakesh Raman、Truebil 共同創設者兼プロダクトおよびデータ サイエンス担当チーフ

44%

読み込み時間の短縮

26%

ユーザー セッションの長時間化

61%

コンバージョン数が増加

80%

収益に対するマーケティング費用の増加