Cara Truebil menjadikan web sebagai saluran pertumbuhan

Kisah startup dalam membangun pengalaman web terbaik di kelasnya.

Tentang

Didirikan pada tahun 2015, Truebil adalah marketplace online India yang menjual mobil bekas bersertifikasi 100%. Dengan lebih dari 1,4 juta pengguna aktif bulanan, platform ini adalah solusi terpadu yang mencakup transfer kepemilikan, asuransi, pinjaman, dan garansi servis. Calon pelanggan dapat melihat halaman produk individual dengan gambar dan laporan inspeksi mendetail serta mendapatkan evaluasi kendaraan dengan fitur "Bandingkan" dan "Truescore" di situs. Truebil membedakan produknya dengan fitur lengkap, termasuk rekomendasi yang dipersonalisasi berdasarkan machine learning, fitur tambahkan ke favorit, fitur bagikan mobil, dan lainnya.

Tantangan

Truebil adalah startup ramping dengan transaksi bernilai tinggi dan frekuensi rendah, jadi memilih platform yang tepat untuk memprioritaskan dan berinvestasi sangatlah penting.

Truebil mengidentifikasi seluler sebagai platform target mereka, dan mereka memilih web untuk aplikasi pertama mereka, Truebil Lite, karena kemudahan penemuan dan gesekan rendah di web. Teknologi web memberikan biaya pengembangan yang lebih rendah, penggunaan data dan memori yang lebih sedikit, serta biaya akuisisi pelanggan yang jauh lebih rendah daripada membangun aplikasi Android/iOS. Dengan membangun aplikasi web progresif (PWA), Truebil bisa mendapatkan semua keuntungan web dan manfaat iOS/Android.

Solusi

Tim internal membutuhkan waktu empat bulan untuk mengembangkan Truebil Lite menggunakan React, Django, dan Preact (untuk migrasi produksi). Mereka menetapkan prinsip panduan yang jelas untuk aplikasi web berdasarkan sasaran pengguna. Pengalaman yang harus diberikan adalah:

• Cepat saat pemuatan pertama dan navigasi berikutnya,
• Andal, terlepas dari batasan jaringan atau perangkat pengguna, dan
• Menarik, terutama untuk layar seluler kecil, sehingga pengguna ingin kembali ke halaman tersebut.

Mengoptimalkan pemuatan pertama dan navigasi yang cepat

Dengan menggunakan Lighthouse sebagai panduan pengoptimalan performa, tim mengadopsi budaya mengutamakan performa saat menerapkan fitur baru. Truebil berhasil meningkatkan pengalaman pengguna secara signifikan dengan memprioritaskan metrik First Contentful Paint dan Time to Interactive (TTI) serta mengoptimalkan pemuatan pertama yang cepat, kunjungan berulang, dan navigasi yang lancar. Tim mencapai hasil tersebut dengan menetapkan anggaran performa dan menggunakan berbagai teknik untuk mencapainya.

Menetapkan anggaran performa

Dengan pola pikir yang mengutamakan performa, tim Truebil memilih untuk merancang pengalaman mereka sebagai aplikasi halaman tunggal dengan rendering sisi server untuk pemuatan pertama dan rendering sisi klien untuk pemuatan berikutnya. Memastikan performa aplikasi web dengan rendering sisi klien tetap optimal bisa jadi sulit, jadi Truebil menetapkan anggaran performa yang sangat ketat untuk memastikan mereka tidak mengorbankan kecepatan, terutama saat mereka menambahkan lebih banyak fitur.

Tim menetapkan anggaran berbasis tonggak pencapaian yang ketat untuk TTI dengan tujuan menjaganya di bawah lima detik. Untuk mencapai tujuan tersebut, mereka secara manual memastikan tidak ada build yang melebihi ukuran paket JavaScript 250 KB, terus memeriksa ukuran gambar, dan terus melacak skor performa Lighthouse aplikasi.

Mengoptimalkan paket JavaScript

Tim memulai dengan dasar-dasar menggunakan pola PRPL untuk melakukan pra-cache dan mengoptimalkan payload JavaScript serta beralih ke HTTP/2 untuk menayangkan paket JavaScript penting.

Untuk memuat lambat resource yang tidak penting, mereka menggunakan komponen pemuatan lambat tingkat framework untuk memuat fragmen di bawah fold.

Untuk menghilangkan hambatan paket JavaScript, tim mengurangi payload melalui pemisahan kode. Mereka menggunakan chunking berbasis komponen dan rute untuk mengurangi ukuran paket utama dan meningkatkan waktu pemuatan sebesar 44%, dengan TTI turun dari 6 detik menjadi sekitar 5 detik dan First Meaningful Paint (FMP) dari 4,1 detik menjadi 3,6 detik.

CSS penting inline

Untuk lebih meningkatkan FMP, tim menggunakan Lighthouse untuk menemukan peluang dan memvalidasi dampak pengoptimalan performa. Lighthouse menunjukkan bahwa mengurangi CSS yang memblokir rendering akan memberikan efek terbesar, sehingga Truebil menyisipkan semua CSS penting dan menunda CSS yang tidak penting. Teknik ini mengurangi FMP sekitar 2 detik.

Hindari beberapa perjalanan pulang pergi yang mahal ke asal mana pun

Untuk mengurangi overhead dari DNS dan TLS, Truebil menggunakan <link rel="preconnect"> dan <link rel="dns-prefetch">. Pendekatan ini menyebabkan browser menyelesaikan TLS handshake sesegera mungkin saat halaman dimuat dan melakukan pra-resolusi nama domain lintas origin, sehingga memungkinkan pengalaman pengguna yang aman dan cepat.

Melakukan pengambilan data halaman berikutnya secara dinamis

Dengan menganalisis data mereka, tim mengidentifikasi perjalanan pengguna yang paling umum yang dapat mereka optimalkan. Dalam kasus ini, aplikasi mendownload resource halaman berikutnya secara dinamis menggunakan <link rel=prefetch> untuk memastikan navigasi yang lancar bagi pengguna. Saat tim mengidentifikasi link yang akan di-prefetch secara manual, mereka menggunakan webpack untuk menggabungkan JS untuk link tersebut.

Mengoptimalkan gambar dan font

Gambar adalah bagian penting dari pengalaman dan kredibilitas produk Truebil, dengan setiap listingan produk menyertakan hingga 40 gambar. Untuk memastikan bahwa gambar tidak memblokir pemuatan halaman, tim memilih untuk menayangkan semua resource dari CDN dan menggunakan imagemagick untuk pengoptimalan gambar. Mereka juga meng-gzip semua resource yang dapat dikompresi, termasuk gambar, JavaScript, dan CSS, untuk lebih mengurangi waktu pemuatan.

Untuk menghindari kilatan teks yang tidak terlihat sekaligus menjaga waktu pemuatan serendah mungkin, Truebil menyiapkan CSS-nya untuk menggunakan font sistem sebagai pengganti hingga font eksternal dimuat.

Pengoptimalan lebih lanjut

Setelah aplikasi siap, tim ingin mengurangi lebih lanjut ukuran vendor bundle dan waktu eksekusi JavaScript, sehingga mereka mengalihkan aplikasi React ke Preact dalam produksi. (Pelajari lebih lanjut di koleksi React.) Pendekatan ini membantu mereka mengurangi ukuran vendor bundle dari 82,3 KB menjadi 51,2 KB.

Membangun keandalan

Dengan berfokus pada pasar India, sebagian besar pengguna Truebil mengakses produk mereka di jaringan yang tidak stabil yang terkadang memiliki bandwidth serendah 2G. Jadi, membangun pengalaman yang tangguh sangat penting tidak hanya untuk meningkatkan performa dalam kondisi jaringan yang terbatas, tetapi juga untuk menghadirkan produk yang dapat diandalkan pengguna—produk yang selalu berfungsi.

Strategi caching hybrid untuk pemuatan yang andal

Interaktivitas dan tingkat perubahan konten Truebil sangat bervariasi. Untuk memastikan bahwa semua kontennya selalu baru dan andal, tim Truebil menerapkan penyimpanan dalam cache API menggunakan kombinasi strategi network-first, cache-first, dan fastest-first.

Untuk halaman statis, seperti halaman langganan, Truebil menggunakan strategi cache-first untuk membuka cache API langganan mereka terlebih dahulu, lalu kembali ke jaringan.

Untuk halaman dengan konten dinamis yang jarang berubah, seperti halaman detail atau listingan produk, Truebil menggunakan strategi mengutamakan jaringan sehingga browser akan memeriksa konten di jaringan terlebih dahulu sebelum kembali ke cache API jika jaringan tidak tersedia.

Untuk halaman dinamis yang sering berubah, seperti halaman beranda, filter, penelusuran, dan kota, Truebil menggunakan strategi tercepat terlebih dahulu untuk memilih antara jaringan atau cache berdasarkan mana pun yang lebih dulu muncul. Untuk memastikan konten selalu baru, cache diperbarui setiap kali respons jaringan berbeda dengan yang ada di cache.

Pekerja layanan untuk pengalaman offline penuh

Meskipun sebagian besar konten Truebil sangat dinamis—mobil dapat ditambahkan atau dibeli kapan saja—tim ingin memastikan bahwa pengguna memiliki beberapa konten untuk berinteraksi, meskipun mereka menggunakan jaringan yang tidak stabil atau sepenuhnya offline.

Dengan menggunakan service worker, tim dapat menyimpan dalam cache data statis dan data dinamis yang telah berinteraksi dengan pengguna sehingga pengguna dapat melihatnya secara offline. Untuk memastikan pengguna mengetahui bahwa konten dapat berubah saat mereka kembali online, tim mengubah UI menjadi skala abu-abu untuk menunjukkan mode offline. Membuka halaman produk adalah bagian penting dari perjalanan pengguna Truebil. Pengguna yang telah mengunjungi PWA setidaknya sekali dapat menjelajahi listingan dan halaman produk yang telah mereka kunjungi sebelumnya, tetapi tidak akan dapat melihat pembaruan apa pun pada listingan atau produk.

Meningkatkan engagement untuk membuat pengguna kembali

Pengalaman pertama yang menarik

Karena sebagian besar penggunanya berasal dari saluran berbayar, Truebil perlu melengkapi aplikasi web yang dimuat dengan cepat dengan produk yang menampilkan rekomendasi yang sangat relevan untuk meningkatkan konversi. Meskipun tim menggunakan sistem rekomendasi berdasarkan pemfilteran canggih untuk pengguna lama, sistem mereka tidak berfungsi untuk pengguna yang login untuk pertama kalinya.

Untuk menghindari cold start bagi pengguna yang baru pertama kali menggunakan aplikasi, tim mengintegrasikan sistem rekomendasi menggunakan upaya pemasaran digital mereka. Mereka menambahkan detail produk seperti model mobil, harga, dan jenis bodi ke URL tujuan iklan melalui parameter UTM, yang dibaca oleh sistem rekomendasi mereka dan ditampilkan dalam produk yang muncul. Jika sistem tidak membaca detail tersebut di URL, sistem akan kembali ke mobil populer, yang merupakan kombinasi dari model populer, anggaran populer, dan mobil yang populer dalam beberapa minggu atau hari terakhir.

Aplikasi web yang dapat diinstal

Setelah membangun aplikasi web yang cepat dan kaya fitur dengan pengalaman pengguna yang menarik, Truebil ingin memastikan bahwa pengguna mereka akan terus kembali. Mereka menyadari bahwa membuat aplikasi dapat diinstal akan membuat kunjungan berulang menjadi jauh lebih lancar.

Tim menerapkan fitur Tambahkan ke Layar Utama untuk menjadikan produk mereka sebagai aplikasi web progresif (PWA) yang lengkap. Dengan pendekatan ini, pengguna dapat menambahkan Truebil Lite ke layar utama dan meluncurkannya dalam mode layar penuh. Karena telah menerapkan mode offline, tim dapat menambahkan fitur baru dengan mudah.

Untuk memastikan pengguna mereka tidak menerima spam dan meningkatkan kemungkinan pengguna akan menginstal aplikasi, tim baru-baru ini memperbarui strategi mereka untuk mempromosikan penginstalan PWA sehingga dialog penginstalan muncul saat benar-benar berguna bagi berbagai jenis pengguna. Truebil menetapkan strategi tiga bagian:

• Menampilkan perintah saat pengguna telah menyelesaikan tindakan atau tidak aktif.
• Menampilkan perintah kontekstual kepada pengguna dewasa.
• Menampilkan banner saat pengguna telah menghabiskan waktu dalam jumlah tertentu di situs.

Banner default saat proses selesai dan di halaman dengan traffic tinggi

Tim memutuskan untuk menampilkan banner penginstalan saat pengguna menyelesaikan tugas atau berada di halaman dengan traffic tinggi tetapi tidak aktif (yaitu, tidak melakukan tindakan, seperti men-scroll atau mengisi formulir). Dengan pendekatan ini, mereka dapat menghindari gangguan terhadap aktivitas pengguna.

Perintah kontekstual untuk pengguna dewasa

Untuk pengguna yang telah berinteraksi dengan aplikasi selama beberapa waktu, tim menggunakan pesan kustom yang sangat kontekstual untuk menunjukkan nilai penginstalan aplikasi ke layar utama:

Banner kustom untuk perintah berbasis waktu

Terakhir, tim membuat banner yang tidak mengganggu dengan desain seperti notifikasi yang dipicu pada peristiwa tertentu, seperti membuka halaman listingan atau setelah pengguna menghabiskan waktu tertentu di aplikasi:

Berkat peningkatan ini, rasio konversi dan engagement Truebil telah meningkat secara signifikan dengan sesi pengguna yang 26% lebih lama dan konversi yang 61% lebih banyak, yang signifikan bagi bisnis mereka mengingat nilai transaksi yang tinggi dari setiap konversi.

Untuk startup dengan sumber daya terbatas, memilih platform yang tepat dapat menjadi hal yang sangat penting bagi kesuksesan bisnis. Dengan beralih ke PWA yang berfokus pada kecepatan, keandalan, dan engagement, kami dapat meningkatkan rasio pendapatan terhadap pembelanjaan pemasaran sebesar 80% berkat peningkatan konversi dan jangkauan web yang lancar.

Rakesh Raman, Co-Founder dan Chief of Product & Data Science di Truebil