Cara pengoptimalan CLS meningkatkan JAPAN News per sesi sebesar 15%

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.

Tomoki Kiraku
Tomoki Kiraku

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.

Laporan Data Web Inti Google Search Console menampilkan CLS yang tinggi untuk halaman detail artikel.
Laporan Data Web Inti Google Search Console.
Audit Lighthouse Hindari pergeseran tata letak besar yang menampilkan elemen DOm yang paling banyak berkontribusi pada CLS di halaman.
Audit "Hindari pergeseran tata letak besar" pada Lighthouse menunjukkan elemen mana yang berkontribusi terhadap skor CLS dan seberapa banyak.

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.

Halaman detail artikel dengan persegi panjang biru yang ditempatkan pada banner besar dan teks.
Pergeseran tata letak yang divisualisasikan.

Mereka mengetahui bahwa pergeseran tata letak terjadi setelah banner besar di bagian atas artikel dimuat untuk tampilan pertama.

Screenshot halaman detail artikel yang menampilkan perbandingan secara berdampingan sebelum dan setelah pergeseran tata letak.
Pergeseran tata letak pada halaman detail artikel.

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.

Screenshot halaman detail artikel yang menunjukkan perbandingan secara berdampingan sebelum dan sesudah pengoptimalan CLS.
Kiri: memesan ruang kosong untuk gambar di bagian atas halaman; kanan: banner besar dimuat di ruang yang dipesan tanpa pergeseran tata letak.

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.

Laporan Search Console menunjukkan penurunan yang signifikan pada halaman yang memiliki masalah performa.
Search Console setelah peningkatan.

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.

Label halaman cepat di Chrome pada Android.
Label "Halaman cepat" di Chrome pada 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.