Meningkatkan Pergeseran Tata Letak Kumulatif di Telegraph Media Group

Dalam beberapa bulan, situs berita terkemuka di Inggris berhasil meningkatkan CLS persentil ke-75 sebesar 250% dari 0,25 menjadi 0,1.

Chris Boakes

Tantangan stabilitas visual

Perubahan tata letak dapat sangat mengganggu. Di Telegraph Media Group (TMG), stabilitas visual sangat penting karena pembaca sebagian besar menggunakan aplikasi kami untuk membaca berita. Jika tata letak bergeser saat membaca artikel, pembaca kemungkinan akan kehilangan bagian yang terakhir dibaca. Hal ini dapat menjadi pengalaman yang menjengkelkan dan mengganggu.

Dari perspektif engineering, memastikan halaman tidak bergeser dan mengganggu pembaca dapat menjadi tantangan, terutama saat area aplikasi Anda dimuat secara asinkron dan ditambahkan ke halaman secara dinamis.

Di TMG, kami memiliki beberapa tim yang berkontribusi pada kode sisi klien:

  • Engineering inti. Mengimplementasikan solusi pihak ketiga untuk mendukung berbagai area seperti rekomendasi konten dan pemberian komentar.
  • Pemasaran. Menjalankan pengujian A/B untuk menilai cara pembaca berinteraksi dengan fitur atau perubahan baru.
  • Iklan. Mengelola permintaan iklan dan pra-bidding iklan.
  • Editorial. Menyematkan kode dalam artikel seperti tweet atau video, serta widget kustom (misalnya, pelacak kasus Virus Corona).

Memastikan setiap tim ini tidak menyebabkan tata letak halaman bergetar dapat sulit. Dengan menggunakan metrik Perubahan Tata Letak Kumulatif untuk mengukur frekuensi terjadinya untuk pembaca kami, tim mendapatkan lebih banyak insight tentang pengalaman pengguna yang sebenarnya dan sasaran yang jelas untuk dicapai. Hal ini menyebabkan CLS persentil ke-75 kami meningkat dari 0,25 menjadi 0,1 dan bucket lulus kami meningkat dari 57% menjadi 72%.

250%

Peningkatan CLS persentil ke-75

15%

Lebih banyak pengguna dengan skor CLS yang baik

Awal mulanya

Dengan menggunakan dasbor CrUX, kami dapat memastikan bahwa halaman kami bergeser lebih banyak dari yang kami inginkan.

Dasbor CrUX menampilkan sekitar 55-60% skor baik, 15% perlu peningkatan, dan 25% skor buruk.
Skor Pergeseran Tata Letak Kumulatif kami antara Juni 2020 dan Februari 2021.

Idealnya, kami ingin setidaknya 75% pembaca kami memiliki pengalaman yang "baik", jadi kami mulai mengidentifikasi penyebab ketidakstabilan tata letak.

Cara kami mengukur pergeseran tata letak

Kami menggunakan kombinasi Chrome DevTools dan WebPageTest untuk membantu mengenali penyebab tata letak bergeser. Di DevTools, kami menggunakan bagian Pengalaman pada tab Performa untuk menyoroti setiap instance pergeseran tata letak dan kontribusinya terhadap skor keseluruhan.

Halaman depan Telegraph dengan iklan di header yang ditandai dengan overlay biru.
Mengidentifikasi pergeseran tata letak yang disebabkan oleh iklan yang dimuat sisi klien di atas header menggunakan bagian Pengalaman di Chrome DevTools.

WebPageTest akan menyoroti tempat perubahan tata letak terjadi di tampilan linimasa saat "Sorot Perubahan Tata Letak" dipilih.

Tampilan filmstrip WebPageTest dari situs Telegraph dengan layoutshift yang ditandai dengan overlay merah.
WebPageTest menandai tempat tata letak bergeser.

Setelah meninjau setiap perubahan di seluruh template yang paling banyak dikunjungi, kami membuat daftar ide tentang cara meningkatkan kualitas template.

Mengurangi perubahan tata letak

Kami berfokus pada empat area yang dapat mengurangi pergeseran tata letak: - iklan - gambar - header - penyematan

Iklan

Iklan dimuat setelah proses rendering awal melalui JavaScript. Beberapa penampung yang dimuat tidak memiliki tinggi yang dicadangkan.

Animasi situs Telegraph. Daftar cerita akan didorong ke bawah saat iklan dimuat di atasnya.
Blok "Cerita lainnya" di bawah iklan digeser ke bawah setelah iklan dimuat.

Meskipun tidak mengetahui tinggi persisnya, kita dapat mencadangkan ruang dengan menggunakan ukuran iklan yang paling umum yang dimuat di slot.

Animasi situs Telegraph. Persegi panjang placeholder untuk iklan ditempatkan di atas daftar story. Iklan dimuat sebagai pengganti placeholder tanpa menyebabkan perubahan tata letak.
Dengan mencadangkan ruang untuk iklan, blok "Artikel lainnya" di bawah akan tetap statis sebelum dan setelah iklan dimuat.

Dalam beberapa kasus, kami telah salah menilai tinggi rata-rata iklan. Untuk pembaca tablet, slot diciutkan.

Animasi tampilan tablet situs Telegraph. Slot placeholder lebih besar dari iklan sehingga konten bergeser ke atas setelah iklan dimuat.
Slot iklan diciutkan setelah dimuat untuk pembaca di perangkat berukuran tablet.

Kami meninjau kembali slot dan menyesuaikan tingginya untuk menggunakan ukuran yang paling umum.

Animasi tampilan tablet situs Telegraph. Dengan placeholder yang cocok dengan ukuran iklan, tidak ada perubahan tata letak saat iklan dimuat.
Memastikan ruang yang kami siapkan untuk slot iklan cocok dengan tinggi iklan yang paling sering ditayangkan.

Gambar

Banyak gambar di seluruh situs dimuat lambat dan ruangnya disediakan untuk gambar tersebut.

Animasi pemuatan kartu pratinjau artikel.
Pemuatan lambat gambar tanpa mengganggu tata letak.

Namun, gambar inline di bagian atas artikel tidak memiliki ruang yang dicadangkan di penampung, atau tidak memiliki atribut lebar dan tinggi yang terkait dengan tag. Hal ini menyebabkan tata letak bergeser saat dimuat.

Animasi pemuatan halaman artikel. Saat gambar utama dimuat di bagian atas halaman, teks akan berpindah ke bawah.
Perubahan tata letak yang disebabkan oleh gambar utama artikel.

Cukup menambahkan atribut lebar dan tinggi ke gambar untuk memastikan tata letak tidak bergeser.

Animasi pemuatan halaman artikel dengan placeholder yang dicadangkan untuk gambar utama. Saat gambar utama dimuat di bagian atas halaman, tidak ada pergeseran tata letak.
Gambar artikel utama dimuat tanpa menyebabkan tata letak bergeser.

Header berada di bawah konten dalam markup dan diposisikan di bagian atas menggunakan CSS. Ide awalnya adalah memprioritaskan pemuatan konten sebelum navigasi, tetapi hal ini menyebabkan halaman bergeser untuk sementara.

ALT_TEXT_HERE
Header halaman dimuat dengan tidak rapi.

Memindahkan header ke bagian atas markup memungkinkan halaman dirender tanpa pergeseran ini.

ALT_TEXT_HERE
Tata letak tidak lagi terganggu oleh header pemuatan halaman.

Penyematan

Beberapa penyematan yang sering digunakan memiliki rasio aspek yang ditentukan. Misalnya, video YouTube. Saat pemutar dimuat, kita mengambil thumbnail dari YouTube dan menggunakannya sebagai placeholder saat video dimuat.

Slot pemutar video memuat thumbnail beresolusi rendah saat pemutar video dimuat.
Slot pemutar video memuat thumbnail beresolusi rendah saat pemutar video dimuat.

Mengukur dampaknya

Kami dapat mengukur dampaknya di tingkat fitur dengan cukup mudah menggunakan alat yang disebutkan di awal artikel. Namun, kami ingin mengukur CLS di tingkat template dan tingkat situs. Secara sintetis, kami menggunakan SpeedCurve untuk memvalidasi perubahan baik dalam praproduksi maupun produksi.

Diagram SpeedCurve yang menunjukkan penurunan tajam pada skor CLS.
Melacak progres CLS secara sintetis menggunakan SpeedCurve.

Selanjutnya, kita dapat memvalidasi hasilnya dalam data RUM (disediakan oleh mPulse) setelah kode mencapai produksi.

Diagram mPulse yang menunjukkan penurunan skor CLS.
Memvalidasi peningkatan CLS di seluruh situs dengan data RUM mPulse sebelum dan sesudah melakukan perubahan.

Memeriksa data RUM memberi kita tingkat keyakinan yang baik bahwa perubahan yang kita buat memiliki dampak positif bagi pembaca.

Angka akhir yang kita lihat adalah untuk data RUM yang dikumpulkan Google. Hal ini terutama relevan sekarang karena akan segera memengaruhi peringkat halaman. Sebagai permulaan, kami menggunakan Laporan UX Chrome, baik dalam data tingkat origin bulanan yang tersedia melalui dasbor CrUX, maupun dengan mengkueri BigQuery untuk mengambil data p75 historis. Dengan cara ini, kami dapat dengan mudah melihat bahwa untuk semua traffic yang diukur oleh CrUX, CLS persentil ke-75 kami meningkat sebesar 250% dari 0,25 menjadi 0,1 dan bucket lulus kami bertambah dari 57% menjadi 72%.

Dasbor CrUX yang menampilkan CLS p75 untuk telegraph.co.uk adalah 0,1.
Hasil dari Dasbor Crux.
BigQuery menampilkan nilai p75 yang meningkat dari bulan ke bulan, dari 0,25 menjadi 0,1.
BigQuery berjalan yang menampilkan nilai p75 dari tahun 2021 hingga saat ini.

Selain itu, kami dapat menggunakan Chrome UX Report API dan membuat beberapa dasbor internal yang dibagi menjadi template.

Dasbor internal yang menampilkan skor baik rata-rata 76,2, perlu peningkatan 9,3, dan skor buruk 14,6.
Dasbor internal yang menggunakan Chrome UX Report API yang menyoroti skor rata-rata dan halaman berperforma terburuk menggunakan template tersebut.

Menghindari regresi CLS

Aspek penting dalam melakukan peningkatan performa adalah menghindari regresi. Kami telah menyiapkan beberapa anggaran performa dasar untuk metrik utama kami dan menyertakan CLS di dalamnya.

Dasbor anggaran performa yang menampilkan pemeriksaan sintetis yang mengukur CLS di beberapa template traffic tinggi kami. Anggaran saat ini ditetapkan sebesar 0,025.

Jika pengujian melebihi anggaran, pengujian akan mengirim pesan ke saluran Slack agar kami dapat menyelidiki penyebabnya. Kami juga telah menyiapkan laporan mingguan, sehingga meskipun template tetap sesuai anggaran, kami akan mengetahui perubahan apa pun yang memiliki dampak negatif.

Kami juga berencana untuk memperluas anggaran guna menggunakan data RUM serta data sintetis, menggunakan mPulse untuk menetapkan notifikasi statis dan berpotensi deteksi anomali yang akan membuat kami mengetahui perubahan yang tidak biasa.

Penting bagi kita untuk mendekati fitur baru dengan mempertimbangkan CLS. Banyak perubahan yang saya sebutkan adalah perubahan yang harus kami perbaiki setelah dirilis kepada pembaca. Stabilitas tata letak akan menjadi pertimbangan untuk desain solusi fitur baru ke depannya sehingga kita dapat menghindari pergeseran tata letak yang tidak terduga sejak awal.

Kesimpulan

Peningkatan yang telah kami lakukan sejauh ini cukup mudah diterapkan dan telah memberikan dampak yang signifikan. Banyak perubahan yang saya uraikan dalam artikel ini tidak memerlukan banyak waktu untuk diterapkan dan diterapkan ke semua template yang paling sering digunakan yang berarti perubahan tersebut memiliki dampak positif yang luas bagi pembaca kami.

Masih ada area situs yang perlu kita tingkatkan. Kami sedang mempelajari cara agar dapat melakukan lebih banyak logika sisi klien di sisi server, yang akan meningkatkan CLS lebih jauh. Kami akan terus melacak dan memantau metrik kami dengan tujuan untuk terus meningkatkannya dan memberikan pengalaman pengguna terbaik kepada pembaca kami.