Sebuah project yang berfokus pada pengoptimalan Data Web Inti dan migrasi ke Next.js menghasilkan peningkatan rasio konversi sebesar 5% dan peningkatan halaman per sesi sebesar 87%.
QuintoAndar adalah perusahaan teknologi properti Brasil yang produknya menawarkan solusi digital end-to-end untuk real estate. Tahun ini, kami melaksanakan proyek yang berfokus pada peningkatan kinerja hub konten di aplikasi kami, dan memiliki hasil yang menggembirakan dalam meningkatkan lalu lintas pengguna dan metrik konversi.
46%
penurunan rasio pantulan
87%
peningkatan halaman per sesi
5%
peningkatan konversi selama fase validasi
Tantangan
Aplikasi kami memiliki pusat konten kondominium dengan lebih dari 40.000 halaman, tempat pengguna bisa mendapatkan informasi tentang properti mereka, memeriksa foto area umum, membaca tentang lingkungan, dan menemukan listingan yang tersedia untuk disewa atau dijual. Halaman ini sangat penting bagi QuintoAndar:
- Situs ini merupakan sumber traffic organik yang penting, dengan jumlah pengguna yang terus meningkat yang berasal dari hasil mesin telusur.
- Iklan ini memiliki rasio konversi tinggi dalam jangka menengah hingga panjang dibandingkan dengan halaman lainnya.
Namun, terdapat tantangan terkait performa dan pengalaman pengguna pada halaman berikut:
- Performanya yang diukur berdasarkan Data Web Inti tidak dioptimalkan, dan terdapat 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 di bagian lain aplikasi.
- Pembaruan pengalaman halaman di Google Penelusuran—yang pada saat itu belum dirilis—akan menyertakan Data Web Inti ke dalam algoritma peringkat, yang berarti performa halaman dapat memengaruhi cara hasil penelusuran ditampilkan.
Pada saat yang sama, kami mengidentifikasi beberapa peluang pengalaman developer yang dapat membuka manfaat dalam project lain di perusahaan:
- Logika rendering sisi server kami—yang merender semua halaman dengan traffic tinggi, termasuk halaman kondominium—dibuat secara internal, dan menjadi terlalu rumit untuk dikelola dan diorientasikan oleh karyawan baru.
- Fitur penting untuk mencapai performa aplikasi yang baik, seperti pemisahan kode, juga memerlukan penyiapan kustom plus pekerjaan manual dari developer.
- QuintoAndar memiliki lebih dari 30 aplikasi web React. Mengirimkan update ke aplikasi ini dan memeliharanya sesuai dengan praktik terbaik adalah tugas yang sulit.
Pendekatan
Kami memulai proyek 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 cocok untuk meningkatkan pengalaman developer.
Bermigrasi ke Next.js
Versi baru halaman kondominium diterapkan dengan Next.js. Karena sebagian besar independen dari bagian lain pada aplikasi, pusat konten kondominium tampak seperti kandidat yang baik untuk mencoba kerangka kerja baru. Kami akan dapat memahami besarnya upaya migrasi dan mengevaluasi bagaimana fiturnya dapat membantu tanpa memengaruhi aplikasi React lainnya di QuintoAndar.
Persyaratan sulitnya adalah memastikan halaman tetap dapat di-crawl oleh mesin telusur. Next.js memenuhi persyaratan ini dengan mendukung rendering sisi server yang siap pakai, dan menghilangkan kebutuhan akan penyiapan kustom. Dokumentasi mempermudah proses berbagi pengetahuan tentang cara melakukan tugas seperti pengambilan data di server dan mengorientasi developer baru. Rendering sisi server juga diketahui dapat meningkatkan performa metrik seperti First Contentful Paint (FCP).
Framework ini menyediakan fitur ramah performa lainnya seperti pemisahan kode dan pengambilan data otomatis. Meskipun struktur yang ada sudah menyediakan fitur seperti itu, pekerjaan tambahan yang diperlukan dari developer menghambat penerapan. Misalnya, pemisahan kode pada 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 menunjukkan konten setiap paket JS, dan meninjau semua skrip pihak ketiga dengan cermat. Hasilnya, kami dapat membersihkan beberapa library pelacakan yang tidak digunakan di halaman khusus ini.
Tim kami melangkah lebih jauh dan mengevaluasi biaya performa dari fitur yang ada. Misalnya, tombol "like" memerlukan banyak JS untuk berfungsi. Namun, di halaman kondominium, kurang dari 0,5% pengguna berinteraksi dengan tombol, yang tersedia dan lebih sering digunakan di bagian lain aplikasi kami. Setelah diskusi yang melibatkan Teknik 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. Pada 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 dapat mencapai pengurangan sebesar 24%.
Mengoptimalkan resource gambar
Terdapat {i>hero image<i} (gambar utama) yang menempati sebagian besar area paruh atas dalam versi seluler. Error 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 untuk meng-cache-nya secara efisien.
Perangkat seluler modern memiliki layar dengan kepadatan piksel yang sangat tinggi, yang berarti browser akan merender gambar versi 3x atau 4x, jika tersedia. Seiring meningkatnya resolusi, mata manusia akan semakin sulit untuk melihat perbedaannya, tetapi ukuran file akan semakin besar. Opsi Membatasi resolusi gambar maksimum dapat meningkatkan ukuran gambar tanpa mengorbankan pengalaman pengguna. Kami membatasi banner besar untuk menyajikan versi 2x paling banyak, yaitu sekitar 35% lebih kecil dari versi 3x dan 50% lebih kecil dari versi 4x.
Untuk menyelesaikan, kami menggunakan strategi pramuat untuk mendownload dan menampilkannya sesegera mungkin, sehingga 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 menerapkannya dalam fitur baru.
Mengurangi pergeseran tata letak
Halaman kondominium memiliki beberapa masalah dengan Pergeseran Tata Letak Kumulatif (CLS). Elemen yang bertanggung jawab atas pergeseran tata letak hanya dirender di klien—misalnya, menghidrasi markup sisi server dengan komponen yang dirender klien, atau gambar tanpa atribut width dan height yang ditentukan.
Untuk mengatasi masalah ini, kita menetapkan dimensi yang tepat untuk elemen-elemen ini jika memungkinkan, atau nilai estimasi dengan min-height. Ada opsi lainnya, seperti menggunakan properti CSS aspect-ratio. Kami juga membuat placeholder untuk mencegah komponen yang dirender secara dinamis menyebabkan pergeseran tata letak.
Meluncurkan perubahan secara progresif
Tim kami ingin memvalidasi bahwa versi halaman hub kondominium yang dioptimalkan untuk memastikan pengalaman pengguna akan lebih baik. Untuk mencapai hal ini, kami mengadopsi strategi peluncuran progresif:
- Pada fase pertama, versi baru dipublikasikan untuk beberapa URL pilihan, sehingga hanya beberapa ratusan pengguna per hari yang dapat melihatnya;
- Pada fase kedua, dipublikasikan untuk lebih banyak halaman, sehingga menghasilkan beberapa ribu pengguna per hari;
- Pada fase ketiga dan terakhir, versi dipublikasikan untuk semua halaman, dan peluncuran telah selesai untuk semua pengguna.
Selama periode ini, tim engineering terus mengukur performa halaman dalam produksi dan terus mengerjakan peningkatan. Selain itu, tim ini membandingkan metrik bisnis antara versi baru dan versi sebelumnya. Hasil dalam periode validasi ini cukup menjanjikan.
Hasil
Tim menggunakan SpeedCurve untuk terus menjalankan uji lab di halaman kondominium. Ini adalah hasil untuk versi seluler:
| Metrik lab | Sebelum | Setelah | Perbedaan |
|---|---|---|---|
| Largest Contentful Paint (LCP) | 2,41 detik | 1,48 detik | -39% |
| Saatnya untuk Interaktif (TTI) | 12,16 detik | 7,48 detik | -39% |
| Total Waktu Pemblokiran (TBT) | 1124 milidetik | 1056 milidetik | -4% |
| Pergeseran Tata Letak Kumulatif (CLS) | 0,0402 | 0,0093 | -77% |
Kami juga ingin memeriksa dampaknya pada pengguna kami yang sebenarnya. Dengan menggunakan data kolom yang dikumpulkan melalui Instana Website Monitoring, kami mengamati periode 1 bulan sebelum dan sesudah peluncuran. Membandingkan persentil ke-75 untuk pengguna seluler, kami menemukan bahwa LCP menurun sebesar 26%, dan FID menurun sebesar 72%.
PageSpeed Insights memberikan laporan data kolom selama 28 hari terakhir. Halaman kondominium yang paling sering diakses saja memiliki cukup data untuk membuat laporan bagi pengguna seluler. Mulai November 2021, semua Data Web Inti berada di kategori "baik".
Selama peluncuran progresif, kami melihat penurunan rasio pantulan. Setelah 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%. Penurunan rasio pantulan bahkan lebih besar untuk penelusuran berbayar, yaitu mencapai penurunan sebesar 59% — tanda positif jika menyangkut investasi pada 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. Meskipun 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 dalam metrik yang sama.
Kesimpulan
Project ini adalah bagian pertama dari upaya migrasi jangka panjang dari React ke Next.js tanpa framework. Tim yang mengerjakan laman kondominium sejak saat itu memberikan masukan positif tentang pengalaman pengembang 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 kesamaan di antara aplikasi yang berbeda.
Secara keseluruhan, pusat 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 QuintoAndar dan inisiatif SEO seperti pengindeksan halaman yang ditingkatkan. Selama project ini, kami telah melihat bahwa performa halaman juga merupakan salah satu faktor yang memiliki potensi besar untuk memberikan dampak konversi yang positif.
Terima kasih banyak kepada Pedro Carmo, Product Manager tim SEO, yang telah mempelajari data pengguna dan membuat semua analisis konversi yang terlihat dalam studi kasus ini.