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%.
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 hasilnya menggembirakan dalam peningkatan 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 ini memiliki rasio konversi yang tinggi dalam jangka menengah hingga panjang dibandingkan dengan halaman lainnya.
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 mengharapkannya lebih tinggi daripada bagian lain dalam 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 keuntungan dalam proyek 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. Kami dapat memahami besarnya upaya migrasi dan mengevaluasi bagaimana fitur-fiturnya dapat membantu tanpa memengaruhi aplikasi React lainnya di QuintoAndar.
Persyaratan yang sulit 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 ramah performa seperti pemisahan kode dan pengambilan data 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 pertama 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 telah melangkah lebih jauh dan mengevaluasi biaya performa fitur yang ada. Misalnya, tombol "suka" memerlukan cukup banyak JS agar dapat 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.
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
Terdapat {i>hero image<i} yang memenuhi sebagian besar area {i>above the fold<i} pada versi seluler. Elemen ini juga merupakan Largest Contentful Paint (LCP) halaman.
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 kami untuk menyimpan gambar tersebut dalam cache 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. Dengan membatasi resolusi gambar maksimum, ukuran gambar dapat ditingkatkan tanpa mengorbankan pengalaman pengguna. Kami membatasi gambar hero untuk menayangkan versi 2x-nya maksimal, yang kira-kira 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 menerapkannya dalam fitur-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, mengisi 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 estimasi nilai 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.
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:
- Pada fase pertama, versi baru dipublikasikan untuk beberapa URL yang dipilih secara manual, sehingga hanya beberapa ratus pengguna per hari yang akan melihatnya;
- Pada fase kedua, fitur ini dipublikasikan untuk lebih banyak halaman, yang mencakup beberapa ribu pengguna per hari;
- 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 ini 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) | 1124 milidetik | 1.056 milidetik | -4% |
| Pergeseran Tata Letak Kumulatif (CLS) | 0,0402 | 0,0093 | -77% |
Kami juga ingin memeriksa dampaknya terhadap pengguna kami yang 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%.
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".
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).
Untuk dampaknya dalam 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.
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.