Kisah sebuah startup dalam membangun pengalaman web terbaik di kelasnya.
Tentang
Didirikan pada tahun 2015, Truebil adalah marketplace online India yang menjual mobil bekas 100% bersertifikasi. Dengan lebih dari 1,4 juta pengguna aktif bulanan, ini adalah solusi serba ada yang mencakup transfer hak milik, asuransi, pinjaman, dan jaminan layanan. Calon pelanggan dapat melihat masing-masing halaman produk dengan gambar dan laporan pemeriksaan mendetail serta mendapatkan evaluasi kendaraan dengan fitur "Bandingkan" dan "Truescore" situs. Truebil membedakan produknya dengan beragam fitur, termasuk rekomendasi yang dipersonalisasi berdasarkan machine learning, fitur favorit, fitur berbagi mobil, dan banyak lagi.
Tantangan
Truebil adalah startup ramping dengan transaksi frekuensi rendah dan bernilai tinggi, sehingga sangat penting untuk memilih platform yang tepat untuk diprioritaskan dan diinvestasikan.
Truebil mengidentifikasi seluler sebagai platform target, dan memilih web untuk aplikasi pertamanya, Truebil Lite, karena web mudah ditemukan dan minim hambatan. Teknologi web memberikan biaya pengembangan yang lebih rendah, penggunaan data dan memori yang lebih sedikit, dan biaya akuisisi pelanggan yang jauh lebih rendah dibandingkan dengan membuat aplikasi Android/iOS. Dengan membuat progressive web app (PWA), Truebil dapat memperoleh semua keuntungan dari 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. Pengalamannya harus:
- Cepat pada pemuatan pertama dan navigasi berikutnya,
- Andal, terlepas dari batasan jaringan atau perangkat pengguna, dan
- Menarik, terutama untuk layar seluler yang kecil, sehingga pengguna akan ingin kembali lagi.
Mengoptimalkan pemuatan dan navigasi pertama yang cepat
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 ini 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 satu halaman dengan rendering sisi server untuk pemuatan pertama dan rendering sisi klien untuk pemuatan berikutnya. Mempertahankan aplikasi web dengan performa rendering sisi klien bisa jadi tidak mudah, jadi Truebil menetapkan anggaran performa yang sangat ketat untuk memastikan kecepatan tidak terganggu, terutama karena menambahkan lebih banyak fitur.
Tim menetapkan anggaran berbasis tonggak pencapaian yang ketat untuk TTI dengan sasaran mempertahankannya di bawah lima detik. Untuk mencapai sasaran tersebut, mereka secara manual memastikan bahwa tidak ada build yang akan melebihi ukuran paket JavaScript 250 KB, terus memeriksa ukuran gambar secara konstan, dan terus melacak skor performa Lighthouse aplikasi.
Paket JavaScript Optimize
Tim memulai dengan dasar-dasar menggunakan pola PRPL untuk melakukan precache dan mengoptimalkan payload JavaScript, serta beralih ke HTTP/2 untuk menyalurkan paket JavaScript yang penting.
Untuk memuat lambat resource yang tidak penting, mereka menggunakan komponen pemuatan lambat tingkat framework untuk memuat fragmen paruh bawah.
Untuk menghilangkan bottleneck paket JavaScript, tim mengurangi payload melalui pemisahan kode. Mereka menggunakan pemotongan berbasis komponen dan rute untuk mengurangi ukuran paket utama serta meningkatkan waktu pemuatan sebesar 44%, dengan TTI yang berkurang dari 6 detik menjadi sekitar 5 detik dan First Artifactful Paint (FMP) dari 4,1 detik menjadi 3,6 detik.
CSS penting inline
Untuk lebih meningkatkan FMP, tim ini menggunakan Lighthouse untuk menemukan peluang dan memvalidasi dampak pengoptimalan performa. Lighthouse menunjukkan bahwa mengurangi CSS pemblokiran render akan memiliki efek terbesar, jadi Truebil akan menyisipkan semua CSS penting dan CSS non-kritis yang ditangguhkan. 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 handshake TLS sesegera mungkin saat pemuatan halaman dan melakukan pra-resolve nama domain lintas origin, sehingga memungkinkan pengalaman pengguna yang aman dan cepat.
<link rel=preconnect>.Pengambilan data halaman berikutnya secara dinamis
Dengan menganalisis data, tim mengidentifikasi perjalanan pengguna paling umum yang dapat mereka optimalkan. Dalam kasus ini, aplikasi akan secara dinamis mendownload resource halaman berikutnya menggunakan <link rel=prefetch> untuk memastikan navigasi yang lancar bagi pengguna. Meskipun tim secara manual mengidentifikasi link ke pengambilan data, mereka menggunakan webpack untuk memaketkan JS untuk link tersebut.
Optimalkan gambar dan font
Gambar adalah bagian penting dari pengalaman dan kredibilitas produk Truebil, dengan setiap listingan produk mencakup hingga 40 gambar. Untuk memastikan bahwa gambar tidak memblokir pemuatan halaman, tim memilih untuk menyalurkan semua resource mereka dari CDN dan menggunakan imagemagick untuk pengoptimalan gambar. Mereka juga meng-zip semua sumber daya yang dapat dikompresi, termasuk gambar, JavaScript, dan CSS, untuk semakin mengurangi waktu muat.
Untuk menghindari flash teks yang tidak terlihat dan menjaga waktu pemuatan serendah mungkin, Truebil menyiapkan CSS untuk menggunakan font sistem sebagai pengganti hingga font eksternal dimuat.
Pengoptimalan lebih lanjut
Ketika aplikasi sudah 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 koleksi React.) Pendekatan ini membantu mereka mengurangi ukuran paket vendor dari 82,3 KB menjadi 51,2 KB.
Membangun keandalan
Dengan fokus pada pasar India, mayoritas pengguna Truebil mengakses produk mereka melalui jaringan yang terputus-putus yang terkadang memiliki bandwidth serendah 2G. Jadi, membangun pengalaman yang tangguh tidak hanya penting untuk meningkatkan performa dalam kondisi jaringan yang terbatas, tetapi juga untuk menghasilkan produk yang dapat diandalkan pengguna—yang selalu berfungsi.
Strategi caching hybrid untuk pemuatan yang andal
Interaktivitas dan laju perubahan untuk konten Truebil sangat bervariasi. Untuk memastikan bahwa semua kontennya baru dan andal, tim Truebil mengimplementasikan cache API menggunakan kombinasi strategi network-first, cache-first, dan tercepat-first.
Untuk halaman statis, seperti halaman langganan, Truebil menggunakan strategi cache-first untuk membuka cache API langganan terlebih dahulu, dan kembali ke jaringan.
Untuk halaman dengan konten dinamis yang jarang berubah, seperti listingan produk atau halaman detail, Truebil menggunakan strategi yang mengutamakan jaringan sehingga browser terlebih dahulu memeriksa jaringan untuk mengetahui konten sebelum kembali ke cache API jika jaringan tidak tersedia.
Dan untuk halaman dinamis yang sering berubah, seperti halaman beranda, filter, pencarian, dan kota, Truebil menggunakan strategi tercepat untuk memilih antara jaringan atau cache berdasarkan mana yang lebih dulu. Untuk memastikan bahwa konten selalu terbaru, cache diperbarui setiap kali respons jaringan berbeda dengan yang ada di cache.
Service worker 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 melalui jaringan yang tidak lengkap atau benar-benar offline.
Dengan menggunakan pekerja layanan, tim dapat menyimpan data statis dan data dinamis yang telah berinteraksi dengan pengguna ke dalam cache, sehingga pengguna dapat melihatnya secara offline. Untuk memastikan pengguna mengetahui bahwa konten mungkin berubah ketika mereka kembali online, tim mengubah UI menjadi hitam putih untuk menunjukkan mode offline. Menjelajah halaman produk adalah bagian penting dari perjalanan pengguna Truebil. Pengguna yang telah mengunjungi PWA setidaknya satu kali 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 terus kembali
Pengalaman pertama yang menarik
Karena sebagian besar pengguna mereka berasal dari saluran berbayar, Truebil perlu melengkapi aplikasi web mereka 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 yang ada, sistem mereka tidak berfungsi untuk pengguna yang login untuk pertama kalinya.
Untuk menghindari memberikan cold start kepada pengguna pemula, tim mengintegrasikan sistem rekomendasi menggunakan upaya digital marketing mereka. Iklan ini menambahkan detail produk seperti model mobil, harga, dan tipe bodi ke URL tujuan iklan melalui parameter UTM, yang dibaca oleh sistem rekomendasinya dan tercermin dalam produk yang ditampilkan. Jika tidak membaca detail seperti itu di URL, sistem akan kembali menggunakan 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 berfitur lengkap dan cepat dengan pengalaman pengguna yang menarik, Truebil ingin memastikan bahwa pengguna mereka akan terus kembali. Mereka menyadari bahwa membuat aplikasi yang dapat diinstal akan membuat kunjungan berulang jauh lebih lancar.
Tim menerapkan fitur Tambahkan ke Layar Utama untuk menjadikan produk mereka sebagai progressive web app (PWA) yang lengkap. Pendekatan ini memungkinkan pengguna untuk menambahkan Truebil Lite ke layar utama dan meluncurkannya dalam mode layar penuh. Dan karena mereka sudah menerapkan mode offline, tim dapat menambahkan fitur baru dengan mudah.
Untuk memastikan bahwa pengguna mereka tidak di-spam dan untuk meningkatkan kemungkinan pengguna akan menginstal aplikasi, tim baru-baru ini memperbarui strategi mereka untuk mempromosikan penginstalan PWA sehingga perintah penginstalan muncul pada saat aplikasi tersebut benar-benar berguna untuk berbagai jenis pengguna. Truebil menetapkan strategi tiga bagian:
- Menampilkan perintah saat pengguna telah menyelesaikan tindakan atau sedang tidak ada aktivitas.
- Menampilkan perintah kontekstual kepada pengguna dewasa.
- Tampilkan banner saat pengguna menghabiskan waktu 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 ada aktivitas (yaitu, tidak melakukan tindakan, seperti men-scroll atau mengisi formulir). Pendekatan ini memungkinkan mereka untuk tidak mengganggu aktivitas pengguna.
Dialog kontekstual untuk pengguna dewasa
Bagi 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 dialog 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 sejumlah waktu yang dihabiskan di aplikasi:
Berkat peningkatan ini, rasio konversi dan engagement Truebil telah meningkat secara signifikan dengan sesi pengguna 26% lebih lama dan peningkatan konversi 61% lebih banyak, yang signifikan bagi bisnis mereka mengingat nilai transaksi dari setiap konversi yang tinggi.
Untuk startup dengan sumber daya terbatas, memilih platform yang tepat dapat menjadi sangat penting untuk kesuksesan bisnis. Dengan beralih ke PWA yang berfokus pada kecepatan, ketahanan, dan engagement, kami dapat meningkatkan pembelanjaan pendapatan dari 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 hingga pemasaran