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 satu atap yang mencakup transfer hak milik, asuransi, pinjaman, dan garansi layanan. Calon pelanggan dapat melihat setiap halaman produk dengan gambar dan laporan inspeksi mendetail serta mendapatkan evaluasi kendaraan dengan fitur "Bandingkan" dan "Truescore" di situs. Truebil membedakan produknya dengan fitur yang beragam, termasuk rekomendasi yang dipersonalisasi berdasarkan machine learning, fitur tambahkan ke favorit, fitur berbagi mobil, dan lainnya.
Tantangan
Truebil adalah startup ramping dengan frekuensi rendah dan transaksi bernilai tinggi, sehingga sangat penting untuk memilih platform yang tepat untuk diprioritaskan dan diinvestasikan.
Truebil mengidentifikasi seluler sebagai platform target mereka, dan mereka memilih web untuk aplikasi pertama mereka, Truebil Lite, karena kemudahan penemuan dan hambatan yang 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 membuat aplikasi Android/iOS. Dan dengan membuat aplikasi web progresif (PWA), Truebil bisa mendapatkan semua manfaat web dan manfaat iOS/Android.
Solusi
Tim internal memerlukan 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. Pengalamannya harus:
- Cepat saat pemuatan pertama dan navigasi berikutnya,
- Andal, terlepas dari batasan jaringan atau perangkat pengguna, dan
- Menarik, terutama untuk layar seluler yang kecil, sehingga pengguna ingin kembali ke sana.
Mengoptimalkan pemuatan dan navigasi pertama yang cepat
Dengan menggunakan Lighthouse untuk memandu pengoptimalan performa, tim mengadopsi budaya yang mengutamakan performa saat menerapkan fitur baru. Truebil dapat 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 tersebut mencapai hasil tersebut dengan menetapkan anggaran performa dan menggunakan berbagai teknik untuk mencapainya.
Menetapkan anggaran performa
Dengan pola pikir mengutamakan performa, tim Truebil memilih untuk merancang pengalaman mereka sebagai aplikasi web satu halaman dengan rendering sisi server untuk pemuatan pertama dan rendering sisi klien untuk pemuatan berikutnya. Memastikan aplikasi web dengan rendering sisi klien tetap berperforma tinggi bisa jadi sulit, sehingga Truebil menetapkan anggaran performa yang sangat ketat untuk memastikan aplikasi tidak mengorbankan kecepatan, terutama saat mereka menambahkan lebih banyak fitur.
Tim menetapkan anggaran berbasis tonggak pencapaian yang ketat untuk TTI dengan sasaran agar tetap di bawah lima detik. Untuk mencapai sasaran tersebut, mereka secara manual memastikan tidak ada build yang akan melebihi ukuran paket JavaScript 250 KB, terus memeriksa ukuran gambar, dan terus melacak skor performa Lighthouse aplikasi.
Mengoptimalkan paket JavaScript
Tim memulai dengan dasar-dasarnya 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 non-kritis, mereka menggunakan komponen pemuatan lambat tingkat framework untuk memuat fragmen di bawah lipatan.
Untuk menghapus bottleneck 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 meningkatkan FMP lebih lanjut, tim menggunakan Lighthouse untuk menemukan peluang dan memvalidasi dampak pengoptimalan performa. Lighthouse menunjukkan bahwa mengurangi CSS yang memblokir render akan memberikan efek terbesar, sehingga Truebil melakukan inline pada semua CSS penting dan menunda CSS non-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 me-resolve nama domain lintas origin terlebih dahulu, sehingga memungkinkan pengalaman pengguna yang aman dan cepat.

<link rel=preconnect>
.Melakukan pengambilan data secara dinamis untuk halaman berikutnya
Dengan menganalisis data mereka, tim mengidentifikasi perjalanan pengguna yang paling umum yang dapat mereka optimalkan. Dalam hal ini, aplikasi akan mendownload resource halaman berikutnya secara dinamis menggunakan <link rel=prefetch>
untuk memastikan navigasi yang lancar bagi pengguna. Meskipun tim mengidentifikasi link untuk di-prefetch secara manual, mereka menggunakan webpack untuk memaketkan 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 gambar tidak memblokir pemuatan halaman, tim memilih untuk menayangkan semua resource dari CDN dan menggunakan imagemagick untuk pengoptimalan gambar. Mereka juga mengompresi semua resource yang dapat dikompresi, termasuk gambar, JavaScript, dan CSS, untuk lebih mengurangi waktu pemuatan.
Untuk menghindari flash teks yang tidak terlihat sekaligus menjaga waktu pemuatan serendah mungkin, Truebil menyiapkan CSS untuk menggunakan font sistem sebagai penggantian hingga font eksternal dimuat.
Pengoptimalan lebih lanjut
Setelah aplikasi siap, tim ingin lebih mengurangi ukuran paket vendor dan waktu eksekusi JavaScript, sehingga mereka mengalihkan aplikasi React ke Preact dalam produksi. (Pelajari lebih lanjut di kumpulan React.) Pendekatan ini membantu mereka mengurangi ukuran paket vendor 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 penyimpanan dalam cache hybrid untuk pemuatan yang andal
Interaktivitas dan tingkat perubahan konten Truebil sangat bervariasi. Untuk memastikan semua kontennya baru dan andal, tim Truebil menerapkan cache API menggunakan kombinasi strategi jaringan-terlebih dahulu, cache-terlebih dahulu, dan tercepat-terlebih dahulu.
Untuk halaman statis, seperti halaman langganan, Truebil menggunakan strategi cache-first untuk membuka cache API langganan terlebih dahulu, lalu kembali ke jaringan.
Untuk halaman dengan konten dinamis yang jarang berubah, seperti halaman listingan atau detail produk, Truebil menggunakan strategi jaringan-terlebih-dahulu sehingga browser akan memeriksa konten di jaringan terlebih dahulu sebelum kembali ke cache API jika jaringan tidak tersedia.
Selain itu, untuk halaman dinamis yang sering berubah, seperti halaman beranda, filter, penelusuran, dan kota, Truebil menggunakan strategi tercepat untuk memilih antara jaringan atau cache berdasarkan mana yang lebih dulu. 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 mereka memiliki beberapa konten untuk berinteraksi, meskipun mereka menggunakan jaringan yang tidak stabil atau sepenuhnya offline.
Dengan menggunakan pekerja layanan, tim dapat meng-cache data statis dan data dinamis yang telah berinteraksi dengan pengguna sehingga pengguna dapat melihatnya secara offline. Untuk memastikan pengguna mengetahui bahwa konten mungkin berubah saat mereka kembali online, tim mengubah UI menjadi hitam putih untuk menunjukkan mode offline. Menjelajahi 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 agar pengguna terus kembali
Pengalaman pertama yang menarik
Karena sebagian besar penggunanya berasal dari saluran berbayar, Truebil perlu melengkapi aplikasi web mereka yang cepat dimuat dengan produk yang menampilkan rekomendasi yang sangat relevan untuk meningkatkan konversi. Meskipun tim menggunakan sistem rekomendasi berdasarkan pemfilteran yang canggih untuk pengguna lama, sistem mereka tidak berfungsi untuk pengguna yang login untuk pertama kalinya.
Untuk menghindari cold start bagi pengguna pertama kalinya, 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 tercermin dalam produk yang ditampilkan. 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 membuat aplikasi web yang cepat dan lengkap dengan pengalaman pengguna yang menarik, Truebil ingin memastikan bahwa penggunanya 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 progressive web app (PWA) lengkap. Pendekatan ini memungkinkan pengguna menambahkan Truebil Lite ke layar utama dan meluncurkannya dalam mode layar penuh. Selain itu, karena telah menerapkan mode offline, tim dapat menambahkan fitur baru dengan mudah.
Untuk memastikan pengguna tidak menerima spam dan meningkatkan kemungkinan pengguna menginstal aplikasi, tim ini baru-baru ini memperbarui strategi mereka untuk mempromosikan penginstalan PWA sehingga dialog penginstalan muncul saat dialog tersebut benar-benar berguna bagi berbagai jenis pengguna. Truebil memutuskan strategi tiga bagian:
- Menampilkan perintah saat pengguna telah menyelesaikan tindakan atau tidak ada aktivitas.
- Menampilkan perintah kontekstual kepada pengguna dewasa.
- Menampilkan banner saat pengguna menghabiskan waktu tertentu di situs.
Banner default pada penyelesaian proses 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 ada aktivitas (yaitu, tidak melakukan tindakan, seperti men-scroll atau mengisi formulir). Pendekatan ini memungkinkan mereka untuk tidak mengganggu 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 manfaat menginstal 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.
Bagi startup dengan sumber daya terbatas, memilih platform yang tepat dapat menjadi faktor penentu kesuksesan bisnis. Beralih ke PWA yang berfokus pada kecepatan, ketahanan, dan engagement, memungkinkan kami meningkatkan 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
44%
Peningkatan waktu pemuatan
26%
Sesi pengguna yang lebih lama
61%
Peningkatan konversi
80%
Peningkatan pembelanjaan pendapatan terhadap pemasaran