Cara QuintoAndar meningkatkan rasio konversi dan halaman per sesi dengan meningkatkan performa halaman

Sebuah project yang berfokus pada pengoptimalan Core Web Vitals dan migrasi ke Next.js menghasilkan peningkatan rasio konversi sebesar 5% dan peningkatan halaman per sesi sebesar 87%.

Daniela Sayuri Yassuda
Daniela Sayuri Yassuda

QuintoAndar adalah perusahaan proptech Brasil yang produknya menawarkan solusi menyeluruh digital untuk real estate. Tahun ini, kami melakukan project yang berfokus pada peningkatan performa hub konten di aplikasi kami, dan mendapatkan hasil yang menggembirakan dalam meningkatkan traffic pengguna dan metrik konversi.

46%

pengurangan rasio pantulan

87%

peningkatan halaman per sesi

5%

peningkatan konversi selama fase validasi

Tantangan

Aplikasi kami memiliki hub konten kondominium dengan lebih dari 40.000 halaman, tempat pengguna dapat mendapatkan informasi tentang properti mereka, melihat foto area umum, membaca tentang lingkungan sekitar, dan menemukan listingan yang tersedia untuk disewa atau dijual. Halaman ini sangat penting bagi QuintoAndar:

  • Hasil penelusuran adalah sumber traffic organik yang penting, dengan jumlah pengguna yang terus meningkat yang berasal dari hasil mesin telusur.
  • Halaman tersebut memiliki rasio konversi yang tinggi dalam jangka menengah hingga panjang dibandingkan dengan halaman lain.

Namun, ada tantangan terkait performa dan pengalaman pengguna di halaman ini:

  • Performanya seperti yang diukur oleh Core Web Vitals tidak dioptimalkan, dan ada masalah umum terkait pemuatan halaman yang lambat, responsivitas yang lambat terhadap input pengguna, dan ketidakstabilan tata letak.
  • Rasio pantulan mereka tinggi, meskipun kami memperkirakannya lebih tinggi daripada di bagian lain aplikasi.
  • Pembaruan pengalaman halaman di Google Penelusuran—yang pada saat itu belum dirilis—akan menyertakan Core Web Vitals ke dalam algoritme peringkat, yang berarti performa halaman dapat memengaruhi cara hasil penelusuran ditampilkan.

Pada saat yang sama, kami mengidentifikasi beberapa peluang pengalaman developer yang dapat membuka peluang di project lain di seluruh perusahaan:

  • Logika rendering sisi server kami—yang merender semua halaman dengan traffic tinggi, termasuk halaman kondominium—dibuat secara internal, dan menjadi terlalu kompleks untuk dikelola dan diorientasikan kepada karyawan baru.
  • Fitur penting untuk mencapai performa aplikasi yang baik, seperti pemisahan kode, juga memerlukan penyiapan kustom serta pekerjaan manual dari developer.
  • QuintoAndar memiliki lebih dari 30 aplikasi web React. Menyampaikan update ke aplikasi ini dan mengelolanya sesuai dengan praktik terbaik adalah tugas yang berat.

Pendekatan

Kami memulai project pengoptimalan performa hub konten kondominium untuk meningkatkan pengalaman penggunanya, karena peningkatan ini dapat menghasilkan peningkatan konversi, SEO yang lebih baik, dan kegunaan yang lebih baik. Inisiatif ini juga merupakan peluang yang tepat untuk meningkatkan pengalaman developer.

Bermigrasi ke Next.js

Versi baru halaman kondominium diterapkan dengan Next.js. Karena sebagian besar independen dari bagian lain aplikasi, hub konten kondominium tampak seperti kandidat yang baik untuk mencoba framework baru. Kita akan dapat memahami besarnya upaya migrasi dan mengevaluasi bagaimana fiturnya dapat membantu tanpa memengaruhi aplikasi React lainnya di QuintoAndar.

Persyaratan wajibnya adalah memastikan halaman tetap dapat di-crawl oleh mesin telusur. Next.js memenuhi persyaratan ini dengan mendukung rendering sisi server secara langsung, dan menghilangkan kebutuhan akan penyiapan kustom. Dokumentasi ini mempermudah berbagi pengetahuan tentang cara melakukan tugas seperti pengambilan data di server dan orientasi developer baru. Rendering sisi server juga dikenal dapat meningkatkan performa metrik seperti First Contentful Paint (FCP).

Framework ini menyediakan fitur lain yang mendukung performa seperti pemisahan kode dan prefetching otomatis. Meskipun struktur yang ada sudah menyediakan fitur tersebut, pekerjaan tambahan yang diperlukan dari developer menunda penerapannya. Misalnya, pemisahan kode di tingkat halaman atau komponen harus dilakukan secara manual.

Mengoptimalkan resource JavaScript

Langkah pertamanya adalah menghapus kode yang tidak digunakan. Kami melihat laporan Webpack Bundle Analyzer, yang menampilkan konten setiap paket JS, dan meninjau semua skrip pihak ketiga dengan cermat. Hasilnya, kami dapat menghapus beberapa library pelacakan yang tidak digunakan di halaman tertentu ini.

Tim kami melakukan lebih lanjut dan mengevaluasi biaya performa fitur yang ada. Misalnya, tombol "suka" memerlukan cukup banyak JS agar berfungsi. Namun, di halaman kondominium, kurang dari 0,5% pengguna berinteraksi dengan tombol tersebut, yang tersedia dan lebih sering digunakan di bagian lain aplikasi kami. Setelah diskusi yang melibatkan tim Engineering dan Produk, kami memutuskan untuk menghapus fitur ini.

Animasi yang menampilkan fitur tombol “suka”. Ada kartu tentang apartemen yang dapat disewa. Di sudut kanan bawah kartu, terdapat tombol berbentuk hati berwarna abu-abu yang berubah menjadi biru saat diklik.

Pengoptimalan JS lainnya sudah diterapkan, seperti kompresi statis dengan Brotli, yang dilakukan pada waktu build menggunakan BrotliWebpackPlugin, dan juga diterapkan ke jenis resource statis lainnya. Awalnya, kami mengandalkan kompresi yang disediakan oleh CDN, dan Brotli mengurangi ukuran JS sebesar 18% dibandingkan dengan gzip. Namun, kami beralih ke kompresi Brotli pada waktu build, dan berhasil mencapai pengurangan sebesar 24%.

Mengoptimalkan resource gambar

Ada gambar hero yang menempati sebagian besar area paruh atas di versi seluler. Elemen ini juga merupakan Largest Contentful Paint (LCP) halaman.

Halaman kondominium untuk Edifício Copan (São Paulo, Brasil). Foto yang diambil dari permukaan tanah menunjukkan lengkungan struktur bangunan.
Gambar utama halaman kondominium.

Sebelumnya, semua gambar sudah memiliki atribut srcset dan sizes untuk menayangkan gambar responsif. Kami juga menggunakan Thumbor untuk mengubah ukuran gambar sesuai permintaan dan mengonfigurasi CDN untuk meng-cache-nya secara efisien.

Perangkat seluler modern memiliki layar dengan kepadatan piksel yang sangat tinggi, yang berarti browser akan merender versi gambar 3x atau 4x, jika tersedia. Seiring meningkatnya resolusi, mata manusia akan semakin sulit untuk melihat perbedaannya, tetapi ukuran file akan tetap meningkat. Pembatasan resolusi gambar maksimum meningkatkan ukuran gambar tanpa mengorbankan pengalaman pengguna. Kami membatasi gambar hero untuk menayangkan versi 2x-nya maksimal, yang berukuran sekitar 35% lebih kecil dari versi 3x dan 50% lebih kecil dari versi 4x.

Untuk menyelesaikannya, kami menggunakan strategi pramuat untuk mendownload dan menampilkannya sesegera mungkin, dengan harapan dapat meningkatkan metrik LCP.

<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">

Komponen gambar bawaan Next.js mencakup banyak pengoptimalan ini seperti pengubahan ukuran responsif dan pemuatan yang diprioritaskan. Selama project ini, kami tidak memigrasikan gambar yang ada untuk menggunakan komponen ini, tetapi kami berencana untuk mengadopsinya dalam fitur baru.

Mengurangi pergeseran tata letak

Halaman kondominium memiliki beberapa masalah terkait Pergeseran Tata Letak Kumulatif (CLS). Elemen yang bertanggung jawab atas pergeseran tata letak hanya dirender di klien—misalnya, mengaktifkan markup sisi server dengan komponen yang dirender klien, atau gambar tanpa atribut width dan height yang ditentukan.

Untuk mengatasi masalah ini, kami menetapkan dimensi yang tepat untuk elemen ini jika memungkinkan, atau nilai estimasi dengan min-height. Ada lebih banyak opsi, seperti menggunakan properti CSS aspect-ratio. Kami juga membuat placeholder untuk mencegah komponen yang dirender secara dinamis menyebabkan pergeseran tata letak.

Gambar yang menampilkan area perkotaan di Google Maps dengan penanda merah di tengah.
Menentukan dimensi untuk elemen seperti gambar peta akan mengurangi CLS.

Meluncurkan perubahan secara bertahap

Tim kami ingin memvalidasi bahwa versi halaman hub kondominium yang dioptimalkan untuk memastikan pengalaman pengguna akan lebih baik. Untuk mencapai hal ini, kami menerapkan strategi peluncuran progresif:

  1. Pada fase pertama, versi baru dipublikasikan untuk beberapa URL yang dipilih secara manual, sehingga hanya beberapa ratus pengguna per hari yang akan melihatnya;
  2. Pada fase kedua, fitur ini dipublikasikan untuk lebih banyak halaman, yang mencakup beberapa ribu pengguna per hari;
  3. Pada fase ketiga dan terakhir, fitur ini dipublikasikan untuk semua halaman, dan peluncurannya selesai untuk semua pengguna.

Selama periode ini, tim engineer terus mengukur performa halaman dalam produksi dan terus berupaya meningkatkan kualitas. Selain itu, tim membandingkan metrik bisnis antara versi baru dan versi sebelumnya. Hasil dalam periode validasi ini menjanjikan.

Hasil

Tim menggunakan SpeedCurve untuk terus menjalankan pengujian lab pada halaman kondominium. Berikut adalah hasil untuk versi seluler:

Metrik lab Sebelum Setelah Perbedaan
Largest Contentful Paint (LCP) 2,41 detik 1,48 detik -39%
Time to Interactive (TTI) 12,16 detik 7,48 detik -39%
Total Blocking Time (TBT) 1.124 milidetik 1.056 milidetik -4%
Pergeseran Tata Letak Kumulatif (CLS) 0,0402 0,0093 -77%
Hasil metrik lab yang dikumpulkan dengan SpeedCurve.

Kami juga ingin memeriksa dampaknya terhadap pengguna sebenarnya. Dengan menggunakan data lapangan yang dikumpulkan dengan Instana Website Monitoring, kami melihat periode 1 bulan sebelum dan setelah peluncuran. Dengan membandingkan persentil ke-75 untuk pengguna seluler, kami mendapati bahwa LCP menurun sebesar 26%, dan FID menurun sebesar 72%.

Diagram garis dengan nilai LCP yang membandingkan versi baru dan versi sebelumnya selama bulan ini dan bulan lalu. Kurva untuk versi baru berfluktuasi antara 2 dan 4 detik, dan sebagian besar waktu berada di bawah kurva untuk versi sebelumnya.
Grafik garis dengan nilai FID yang membandingkan versi baru dan versi sebelumnya selama bulan ini dan bulan lalu. Kurva untuk versi baru sebagian besar waktu tetap di bawah 100 md, sedangkan dalam kurva untuk versi sebelumnya ada beberapa lonjakan yang melampaui 250 md.
Hasil metrik kolom yang dikumpulkan dengan Instana.

PageSpeed Insights menyediakan laporan data kolom untuk 28 hari terakhir. Halaman kondominium yang paling banyak diakses saja memiliki cukup data untuk membuat laporan bagi pengguna seluler. Mulai November 2021, semua Data Web Inti berada dalam kategori "baik".

Screenshot laporan PageSpeed Insights yang berfokus pada bagian Data Kolom. Semua metrik Data Web Inti (FCP, FID, LCP, CLS) berada dalam bucket baik.
PageSpeed Insights menunjukkan bahwa pengguna seluler mendapatkan pengalaman yang baik di halaman kondominium yang paling banyak diakses.

Selama peluncuran progresif, kami melihat penurunan rasio pantulan. Saat kami menyelesaikan rilis untuk semua halaman, Google Analytics menunjukkan penurunan rasio pantulan sebesar 46%, peningkatan halaman per sesi sebesar 87%, dan peningkatan durasi sesi rata-rata sebesar 49%. Pengurangan rasio pantulan bahkan lebih besar untuk penelusuran berbayar, mencapai penurunan sebesar 59% — sebuah tanda positif terkait investasi dalam iklan bayar per klik (PPC).

Screenshot grafik dari Google Analytics. Laporan ini membandingkan rasio pantulan antara dua periode yang berbeda pada bulan Maret 2021. Mulai 17 Maret, rasio pantulan mengalami sedikit penurunan. Penurunan ini diperjelas pada 24 Maret.
Google Analytics menunjukkan penurunan rasio pantulan saat kami meluncurkan versi baru di lebih banyak halaman.

Untuk dampak pada metrik bisnis, kami menganalisis rasio konversi untuk transaksi seperti menjadwalkan tur dan mengajukan permohonan untuk menyewa atau membeli properti. Saat peningkatan masih diluncurkan, tim kami membandingkan konversi antara versi sebelumnya dan versi baru. Pada minggu yang sama, grup halaman dengan versi baru menunjukkan peningkatan konversi sebesar 5%, sedangkan halaman lainnya mengalami sedikit penurunan pada metrik yang sama.

Dua grafik garis berdampingan, masing-masing membandingkan konversi antara minggu ini dan minggu sebelumnya. Grafik sebelah kiri adalah untuk versi halaman sebelumnya, yang menunjukkan bahwa kurva konversi untuk minggu ini sedikit di bawah kurva konversi untuk minggu sebelumnya. Grafik sebelah kanan adalah untuk versi baru, dan kurva konversi untuk minggu ini sedikit di atas kurva untuk minggu sebelumnya.
Pada minggu yang sama, konversi untuk versi baru meningkat, sedangkan versi sebelumnya mengalami penurunan kecil.

Kesimpulan

Project ini adalah bagian pertama dari upaya migrasi jangka panjang dari React tanpa framework ke Next.js. Tim yang mengerjakan halaman kondominium sejak saat itu memberikan masukan positif tentang pengalaman developer yang lebih baik. Tim lain yang harus mem-bootstrap aplikasi web baru telah melakukannya dengan Next.js. Kami yakin Next.js akan menyederhanakan upaya pemeliharaan dan membangun dasar yang sama di antara berbagai aplikasi.

Secara keseluruhan, hub konten kondominium terus berkembang dalam hal jumlah pengguna dan transaksi absolut. Dalam analisis jangka panjang, ada banyak faktor yang berkontribusi pada hal ini, seperti perluasan operasi dan inisiatif SEO QuintoAndar seperti pengindeksan halaman yang lebih baik. Selama project ini, kami melihat bahwa performa halaman juga merupakan salah satu faktor ini yang memiliki potensi besar untuk dampak konversi positif.

Terima kasih khusus kepada Pedro Carmo, Product Manager tim SEO, yang telah mempelajari data pengguna dan membuat semua analisis konversi yang terlihat dalam studi kasus ini.