Tim menganalisis data dari 10 juta kunjungan di halaman landing dan menemukan korelasi yang kuat antara Largest Contentful Paint dan rasio konversi.
Groupe Renault adalah produsen otomotif multinasional Prancis yang hadir di lebih dari 130 negara. Untuk grup otomotif seperti Renault, situs merek berperforma tinggi yang mendorong lebih banyak interaksi pengguna dan konversi berarti lebih banyak bisnis. Semua situs mereknya bertujuan memberikan pengalaman pengguna terbaik dalam skala besar sambil mempertahankan fleksibilitas konten dan fitur untuk situs yang dilokalkan. Dalam konteks ini, pemantauan performa adalah kunci bagi tim pengalaman pelanggan yang bertanggung jawab mengembangkan dan memelihara platform global.
Mengukur dampak bisnis Data Web Inti
Pengukuran di Google Analytics
Renault bekerja sama dengan lima puluh lima partner data global untuk menyiapkan library web-vitals yang memungkinkan pengiriman semua metrik Data Web dari pengguna sungguhan ke Google Analytics dengan cara yang akurat sesuai dengan pengukuran oleh Chrome dan dilaporkan ke alat Google lainnya.
Analisis berikut menampilkan {i>dataset<i} yang diambil menggunakan alat-alat ini selama empat bulan antara Desember 2020 dan Maret 2021.
LCP yang dioptimalkan berkorelasi kuat dengan engagement pengguna dan metrik bisnis
Tim telah mengidentifikasi korelasi yang sangat kuat antara rendah Largest Contentful Paint (LCP) dan rasio pantulan dan rasio konversi yang positif, yang ditunjukkan dalam visualisasi di bawah.
Set data ini mencatat lebih dari 10 juta kunjungan di 33 negara selama empat bulan dan menunjukkan korelasi tindakan LCP yang lebih rendah dengan:
- Rasio pantulan lebih rendah
- Lebih banyak konversi (formulir prospek dilengkapi)
Menariknya, karena situs berjalan sebagai Aplikasi Web Satu Halaman (SPA), semua tindakan ini dilakukan di halaman landing saja. Data ini menunjukkan bahwa situs perlu dioptimalkan hingga LCP mencapai di bawah 1 detik. Situs merek grup tidak dapat dioptimalkan terlalu banyak!
Set data ini tidak hanya menunjukkan korelasi negatif antara LCP dan metrik bisnis, tetapi juga menyoroti perbedaan performa di antara halaman landing dengan performa terbaik. Dalam konteks situs ini, mendapatkan LCP kurang dari 1 detik akan menghasilkan peningkatan besar konversi dan pengurangan pantulan.
Eja Rakotoarimanana, Consultant, lima puluh lima
Peningkatan LCP selama 1 detik dapat menghasilkan penurunan rasio pantulan sebesar 14 poin persentase (ppt) dan peningkatan konversi sebesar 13%.
| Peningkatan LCP selama 1 detik | Hasil |
|---|---|
| LCP sekitar 1 d | +13% CVR |
| LCP kurang dari 1,6 d | -14 ppt rasio pantulan |
| LCP di atas 1,6 d | -5 rasio pantulan ppt |
Pendekatan Renault dalam mengoptimalkan Data Web Inti dalam skala besar
Sejak awal tahun 2020, di 5 pasar Eropa teratas untuk brand tersebut, jumlah pengunjung yang mengalami LCP cepat (di bawah 2,5 dtk) telah meningkat rata-rata sebesar 22 ppt untuk domain Renault (dari 51% menjadi 73%).
Berikut cara mereka menanganinya.
Pengoptimalan terpusat SPA
Dari sudut pandang platform, performa telah menjadi prioritas selama bertahun-tahun dan menyertakan Data Web Inti sebagai metrik utama adalah proses yang lancar. Tim pusat telah menyiapkan solusi pemantauan yang komprehensif (dengan Google Lighthouse dan Chrome UX Report API) serta membangun budaya performa di seluruh organisasi. Ada beberapa strategi untuk mengoptimalkan Aplikasi Web Satu Halaman, antara lain:
- Rendering sisi server (SSR) untuk memastikan First Contentful Paint (FCP) yang cepat.
- Pemisahan kode untuk hanya mengirimkan potongan JS dan CSS yang diperlukan untuk halaman landing (untuk LCP dan FID yang lebih baik).
- CDN dengan cache resource tingkat tinggi (termasuk Lambda@Edge untuk mengurutkan dan menghapus parameter kueri yang tidak diperlukan). Hal ini membantu menghindari kelemahan SSR (TTFB yang lebih lambat karena komputasi server) dan menayangkan konten lebih dekat ke pengguna akhir (untuk TTFB dan LCP yang lebih baik).
- Mengoptimalkan kompresi dengan brotli untuk mengurangi ukuran kode.
- HTTP2 untuk mengaktifkan multiplexing permintaan dan respons.
- Menggunakan gambar responsif dengan dukungan WebP serta atribut
srcsetdansizesuntuk menampilkan ukuran dan format gambar yang paling sesuai kepada pengguna. - Pemuatan lambat untuk gambar, video, dan iframe menggunakan
IntersectionObserverdan FPO (thumbnail kecil 1 KB). - Menghapus skrip yang memblokir dan menyesuaikan transpilasi ke target browser untuk mengurangi ukuran file JS (dengan menghindari polyfill yang tidak perlu).
- Mengurangi ukuran penampung Google Tag Manager untuk memuat skrip pihak ketiga hanya jika dan saat diperlukan.
- Mengurangi jumlah font kustom, menggunakan format woff/woff2 dengan rentang unicode, dan
font-display:swapuntuk mengurangi ukuran file font dan menampilkan teks sesegera mungkin meskipun font kustom belum tersedia. - Pramuat hero image yang sering kali merupakan elemen LCP.
Tim kami masih berupaya melakukan peningkatan pada masa mendatang seperti:
- Server push untuk meningkatkan FCP dengan mengirimkan CSS lebih cepat. (Dalam keadaan standby karena kurangnya dukungan AWS dan proposal penghentian.
- Hidrasi progresif untuk meningkatkan FID.
- Dukungan Modul ES6 memberikan pengalaman yang lebih cepat dengan menggunakan build ES6 untuk browser modern.
Pendekatan SPA dapat bermanfaat bagi performa karena pemuatan ulang halaman penuh tidak diperlukan saat pengguna menavigasi lintas halaman. Meskipun demikian, metodologi pengukuran Data Web Inti saat ini di SPA dapat dianggap sebagai kelemahan karena transisi rute tidak diukur; sehingga pemuatan halaman yang relatif lebih cepat dalam satu sesi, karena cache UI, tidak diperhitungkan. Hal ini juga mempersulit perbandingan Data Web Inti dengan situs pesaing Aplikasi Multi Halaman ketika warm cache akan menurunkan pengukuran di setiap halaman yang akan dijelajahi pengguna selama sesi. Baca FAQ SPA Data Web untuk mengetahui detail selengkapnya.
Ini adalah batasan umum yang sedang diselidiki oleh tim produk Chrome. Pembaruan pada metrik CLS telah dikirimkan untuk meningkatkan akurasi pengukuran pada SPA.
Performa membutuhkan pemantauan berkelanjutan karena berbagai tim teknis dapat memengaruhinya. Terlepas dari keterbatasan terkait cara pengukuran di SPA, Data Web Inti memungkinkan kami melacak dampak tindakan yang dilakukan tim kami. Semoga transisi rute akan segera diperhitungkan!
Cedric Bazureau, Tech Lead, Renault
Pedoman lokal yang mendukung pengoptimalan performa sebagai tanggung jawab bersama
Performa dikomunikasikan sebagai tanggung jawab global (pusat) dan lokal. Tim telah menyusun serangkaian praktik terbaik yang dimaksudkan untuk diikuti oleh pemilik konten lokal. Berikut adalah beberapa contoh dari pedoman ini:
- Optimalkan penampung Google Tag Manager lokal untuk meningkatkan performa situs, misalnya memicu tag tertentu secara bersyarat.
- Batasi ukuran konten video dengan mengompresinya menggunakan alat internal atau menghostingnya di platform eksternal (seperti YouTube).
- Hindari mengupload gambar melalui Google Tag Manager.
Pemahaman mendalam tentang performa digital kami adalah kunci untuk memastikan pengoptimalan situs merek kami terus-menerus. Pendekatan tim pengalaman pelanggan kami adalah menyediakan platform global yang berdampak positif terhadap hasil bisnis tim lokal sekaligus memberdayakan tim ini dengan pedoman dan praktik terbaik untuk mempertahankan performa ini secara optimal.
Alexandre Perruche, Head of Performance, Renault
Kesimpulannya, performa situs selalu menjadi prioritas di Renault, dan platform situsnya terus dioptimalkan. Dengan mengukur Data Web Inti bersama dengan metrik bisnis, mereka dapat mempromosikan topik ini sebagai tanggung jawab bersama secara global, dan pedoman lokal membekali tim dengan kemampuan untuk berpartisipasi dalam upaya yang bermanfaat ini.