Meningkatkan Pergeseran Tata Letak Kumulatif di Telegraph Media Group

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

Chris Boakes

Tantangan stabilitas visual

Pergeseran tata letak bisa sangat mengganggu. Stabilitas visual Telegraph Media Group (TMG) sangat penting karena pembaca lebih sering menggunakan aplikasi kami untuk membaca berita. Jika tata letak bergeser saat membaca artikel, pembaca kemungkinan akan kehilangan tempatnya. Hal ini bisa menjadi pengalaman yang menjengkelkan dan mengganggu.

Dari sudut pandang teknis, memastikan halaman tidak bergeser dan mengganggu pembaca bukanlah hal yang mudah, 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:

  • Core engineering. Menerapkan solusi pihak ketiga untuk mendukung area seperti rekomendasi konten dan 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 masing-masing tim ini tidak menyebabkan tata letak halaman terguncang bisa menjadi hal yang sulit. Dengan menggunakan metrik Pergeseran Tata Letak Kumulatif untuk mengukur seberapa sering terjadinya bagi pembaca kami, tim mendapatkan lebih banyak insight tentang pengalaman pengguna yang sebenarnya dan tujuan yang jelas yang harus diupayakan. Hal ini menghasilkan CLS persentil ke-75 yang meningkat dari 0,25 menjadi 0,1 dan bucket penerusan kami meningkat dari 57% menjadi 72%.

250%

Peningkatan CLS persentil ke-75

15%

Lebih banyak pengguna dengan skor CLS yang baik

Tempat kami memulai

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

Dasbor CrUX menunjukkan skor 55-60% 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 mendapatkan pengalaman "baik", sehingga kami mulai mengidentifikasi penyebab ketidakstabilan tata letak.

Cara kami mengukur pergeseran tata letak

Kami menggunakan kombinasi Chrome DevTools dan WebPageTest untuk membantu mengenali penyebab perubahan tata letak. Di DevTools, kami menggunakan bagian Pengalaman di tab Performa untuk menandai setiap instance pergeseran tata letak dan caranya berkontribusi pada skor keseluruhan.

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

WebPageTest berguna menyoroti tempat terjadinya pergeseran tata letak dalam tampilan linimasa saat "Highlight Layout Shifts" dipilih.

Tampilan setrip film WebPageTest situs Telegraph dengan pergeseran tata letak ditandai dengan overlay merah.
WebPageTest menandai perubahan tata letak.

Setelah meninjau setiap shift di template yang paling sering dikunjungi, kami mendapatkan daftar ide tentang cara meningkatkannya.

Mengurangi pergeseran tata letak

Kami berfokus pada empat area yang dapat kami gunakan untuk mengurangi pergeseran tata letak: - iklan - gambar - header - sematan

Iklan

Iklan dimuat setelah penggambaran awal melalui JavaScript. Beberapa kontainer yang dimuat tidak memiliki tinggi yang dicadangkan.

Animasi situs Telegraph. Daftar cerita akan terdorong ke bawah saat iklan dimuat di atasnya.
Blok "Lebih banyak cerita" di bawah iklan digeser ke bawah setelah iklan dimuat.

Meskipun tidak tahu tinggi pastinya, kita dapat menghemat ruang dengan menggunakan ukuran iklan paling umum yang dimuat dalam slot.

Animasi situs Telegraph. Kotak placeholder untuk iklan ditempatkan di atas daftar cerita. Iklan dimuat di tempat placeholder tanpa menyebabkan pergeseran tata letak.
Dengan melakukan reservasi ruang untuk iklan, blok "Lebih banyak cerita" di bawah akan tetap statis sebelum dan sesudah iklan dimuat.

Kami telah salah menilai tinggi rata-rata iklan dalam beberapa kasus. Untuk pembaca tablet, slot ini menyusut.

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

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

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

Gambar

Banyak gambar di situs dimuat dengan lambat dan ruangnya dicadangkan untuk gambar tersebut.

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

Namun, gambar inline di bagian atas artikel tidak memiliki ruang yang dicadangkan di penampung, dan juga 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 bergerak ke bawah.
Pergeseran tata letak yang disebabkan oleh gambar utama artikel.

Hanya menambahkan atribut lebar dan tinggi ke gambar akan memastikan tata letak tidak bergeser.

Animasi pemuatan halaman artikel dengan placeholder yang disediakan untuk gambar utama. Saat gambar utama dimuat di bagian atas halaman, tidak ada pergeseran tata letak.
Pemuatan gambar artikel utama 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 sesaat.

ALT_TEXT_HERE
Header halaman yang dimuat secara tidak elegan.

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

ALT_TEXT_HERE
Tata letak tidak lagi terganggu oleh header pemuatan halaman.

Penyematan

Beberapa sematan yang sering digunakan memiliki rasio aspek yang ditentukan. Misalnya, video YouTube. Saat pemutar dimuat, kami menarik thumbnail dari YouTube dan menggunakannya sebagai placeholder saat video dimuat.

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

Mengukur dampak

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

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

Selanjutnya, kami dapat memvalidasi hasil 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.

Dengan memeriksa data RUM, kami memiliki tingkat keyakinan yang baik bahwa perubahan yang kami lakukan berdampak positif bagi pembaca kami.

Angka terakhir yang kami lihat adalah data RUM yang dikumpulkan Google. Hal ini sangat relevan sekarang karena akan segera berdampak pada peringkat halaman. Sebagai permulaan, kami menggunakan Laporan UX Chrome, baik dalam data tingkat asal bulanan yang tersedia melalui dasbor CrUX, maupun dengan membuat kueri 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 250% dari 0,25 menjadi 0,1 dan bucket penerusan kami meningkat dari 57% menjadi 72%.

Dasbor CrUX yang menampilkan p75 CLS 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 yang berjalan menampilkan nilai p75 tahun 2021 hingga saat ini.

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

Dasbor internal menunjukkan skor rata-rata baik 76,2, perlu peningkatan 9,3, dan skor buruk 14,6.
Dasbor internal yang menggunakan Chrome UX Report API yang menyoroti skor rata-rata kami dan halaman dengan performa terburuk yang 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 dan menyertakan CLS di dalamnya.

Dasbor anggaran performa yang menunjukkan 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 sehingga kami dapat menyelidiki penyebabnya. Kami juga telah menyiapkan laporan mingguan, sehingga meskipun template tetap dalam anggaran, kami mengetahui adanya perubahan yang memiliki dampak negatif.

Kami juga berencana memperluas anggaran untuk menggunakan data RUM serta data sintetis, menggunakan mPulse untuk menetapkan pemberitahuan statis dan kemungkinan deteksi anomali yang akan membuat kami mengetahui perubahan apa pun yang tidak biasa.

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

Kesimpulan

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

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