Mengoptimalkan CLS sebesar 0,2 menghasilkan peningkatan kunjungan halaman per sesi sebesar 15%, durasi sesi 13% lebih lama, dan penurunan poin rasio pantulan sebesar 1,72.
Pusat Bantuan Iklan Yahoo! JAPAN adalah salah satu perusahaan media terbesar di Jepang, yang menyediakan lebih dari 79 miliar kunjungan halaman per bulan. Platform berita mereka, Yahoo! JAPAN News memiliki lebih dari 22 miliar kunjungan halaman per bulan dan tim engineering yang khusus ditugaskan untuk meningkatkan pengalaman pengguna.
Dengan terus memantau Data Web Inti, mereka menghubungkan peningkatan skor Pergeseran Tata Letak Kumulatif (CLS) situs dengan peningkatan 15% pada kunjungan halaman per sesi dan peningkatan durasi sesi sebesar 13%.
0,2
Peningkatan CLS
15,1%
Kunjungan halaman lebih banyak per sesi
13,3%
Durasi sesi lebih lama
Konten halaman yang berpindah secara tidak terduga sering menyebabkan klik yang tidak disengaja, disorientasi pada halaman, dan akhirnya membuat pengguna frustrasi. Pengguna yang frustrasi cenderung tidak bertahan lama. Untuk menjaga kepuasan pengguna, tata letak halaman harus tetap stabil sepanjang siklus proses perjalanan pengguna. Untuk Yahoo! JAPAN News peningkatan ini berdampak positif dan signifikan terhadap metrik engagement bisnis yang penting.
Untuk mengetahui detail teknis tentang cara mereka meningkatkan CLS, baca Yahoo! JAPAN News.
Mengidentifikasi masalah
Memantau Data Web Inti, termasuk CLS, sangat penting dalam menemukan masalah dan mengidentifikasi asalnya. Di Yahoo! JAPAN News, Konsol Penelusuran memberikan ringkasan bagus tentang grup halaman yang mengalami masalah performa dan Lighthouse membantu mengidentifikasi peluang per halaman untuk meningkatkan pengalaman halaman. Dengan menggunakan alat ini, mereka menemukan bahwa halaman detail artikel memiliki CLS yang buruk.
Penting untuk mengingat bagian kumulatif dari Pergeseran Tata Letak Kumulatif—skor dicatat di seluruh siklus proses halaman. Dalam dunia nyata, skor dapat mencakup perubahan yang terjadi akibat interaksi pengguna seperti men-scroll halaman atau mengetuk tombol. Untuk mengumpulkan skor CLS dari data kolom, tim telah mengintegrasikan pelaporan library JavaScript web-vitals.
Tim menggunakan Chrome DevTools untuk mengidentifikasi elemen mana yang melakukan perubahan tata letak di halaman. Region Layout Shift di DevTools memvisualisasikan elemen yang berkontribusi pada CLS dengan menandainya dengan persegi panjang biru setiap kali terjadi pergeseran tata letak.
Mereka mengetahui bahwa pergeseran tata letak terjadi setelah banner besar di bagian atas artikel dimuat untuk tampilan pertama.
Pada contoh di atas, saat gambar selesai dimuat, teks akan didorong ke bawah (perubahan posisi ditunjukkan dengan garis merah).
Meningkatkan CLS untuk gambar
Untuk gambar berukuran tetap, pergeseran tata letak dapat dicegah dengan menentukan atribut width
dan height dalam elemen img dan menggunakan properti
aspect-ratio
CSS yang tersedia di browser modern. Namun, Yahoo! JAPAN News tidak hanya harus mendukung browser modern, tetapi juga browser yang diinstal di sistem operasi yang relatif lama seperti iOS 9.
Mereka menggunakan Kotak Rasio Aspek—suatu metode yang menggunakan markup untuk memesan ruang di halaman sebelum gambar dimuat. Metode ini mengharuskan Anda mengetahui rasio aspek gambar terlebih dahulu, yang dapat diperoleh dari API backend.
Hasil
Jumlah URL dengan performa buruk di Search Console menurun sebesar 98% dan CLS dalam data lab menurun dari sekitar 0,2 menjadi 0. Lebih penting lagi, ada beberapa peningkatan berkorelasi dalam metrik bisnis.
Jika Yahoo! JAPAN News membandingkan metrik engagement pengguna sebelum dan setelah pengoptimalan CLS, mereka memperoleh beberapa peningkatan:
15,1%
Kunjungan halaman lebih banyak per sesi
13,3%
Durasi sesi lebih lama
1,72%*
Rasio pantulan lebih rendah (*poin persentase)
Dengan meningkatkan CLS dan metrik Data Web Inti lainnya, Yahoo! JAPAN News juga mendapatkan label"Halaman cepat" di menu konteks Chrome Android.
Pergeseran tata letak menjengkelkan dan membuat pengguna enggan membaca lebih banyak halaman, tetapi hal tersebut dapat ditingkatkan dengan menggunakan alat yang sesuai, mengidentifikasi masalah, dan menerapkan praktik terbaik. Meningkatkan CLS adalah peluang untuk meningkatkan bisnis Anda.
Untuk informasi selengkapnya, baca situs Yahoo! JAPAN.