Apa Itu Cumulative Layout Shift? Optimasi CLS 2021

Cumulative Layout Shift adalah metrik yang mengukur pergeseraan tata letak yang tak terduga pada suatu halaman. Pergeseran ini umumnya terjadi saat halaman tersebut diunduh.

Berikut ini videonya.

Contoh Cumulative Layout Shift

Berikut ini adalah video contoh Cumulative Layout Shift yang terjadi pada suatu halaman. Contoh ini saya ambil langsung dari web.dev ^[1].

Saya yakin sebagian dari anda pasti pernah mengalami hal serupa. Tidak sengaja mengklik tombol karena perubahan layout suatu halaman web yang sedang dibaca.

Ini biasanya terjadi pada iklan. Ketika kita ingin mengscroll suatu halaman, tanpa sengaja kita malah mengklik suatu iklan yang muncul tanpa kita duga.

Mengapa Cumulative Layout Shift Itu Penting?

Cumulative Layout Shift perlu diperhatikan karena metrik ini merupakan salah satu dari 3 metrik penting yang masuk dalam Core Web Vitals. Sedangkan Core Web Vitals dipastikan akan menjadi salah satu ranking factor yang digunakan oleh Google mulai tahun 2021.

Core Web Vitals

Web Vitals adalah inisiatif Google berupa sekumpulan metrik yang mengukur beberapa hal yang dianggap penting untuk memberikan pengalaman pengguna (user experience) yang baik.

Dan Core Web Vitals adalah metrik yang merupakan bagian dari Web Vitals yang dianggap paling penting dan paling mempengaruhi pengalaman pengguna.

Core Web Vitals terdiri dari tiga metrik utama yaitu

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Pelajari lebih dalam mengenai Core Web VItals pada artikel saya berikut ini.

Apa Itu Cumulative Layout Shift?

Rentetan pergeseran tata letak, yang dikenal juga sebagai jendela sesi, adalah ketika satu atau beberapa pergeseran tata letak individual terjadi secara berurutan dengan cepat dengan waktu kurang dari 1 detik di antara setiap pergeseran dan berlangsung selama maksimum 5 detik.

Berikut ini ilustrasi yang saya ambil langsung dari dokumentasi Google.

Seperti yang dicontohkan pada video di atas tadi, saya rasa anda sudah paham maksud dari Cumulative Layout Shift (CLS).

Nah sekarang kita akan membahas tentang bagaimana cara Google menentukan nilai dari metrik CLS ini.

Kategori Cumulative Layout Shift

Sama halnya dengan metrik Core Web Vitals yang lain, CLS jyga memiliki tiga kategori :

• Good, kurang dari sama dengan 0.1.
• Needs Improvement, antara 0.1 sampai dengan 0.25.
• Poor, sama dengan 0.25 atau lebih dari itu.

Cara Menghitung Cumulative Layout Shift (CLS)

Rumus menghitung Cumulative Layout Shift adalah dengan cara menjumlahkan semua skor Layout Shift. Sedangkan cara menghitung Layout Shift adalah sebagai berikut.

layout shift score = impact fraction * distance fraction

Pada video contoh Cumulative Layout Shift di atas, dapat kita hitung itu sebagai satu Layout Shift atau satu perubahan tata letak.

Jika pada halaman website anda terjadi banyak perubahan tata letak, maka untuk mendapatkan nilai CLS, anda harus menjumlahkan semua skor Layout Shiftnya.

Jadi rumus Cumulative Layout Shift dapat ditulis sebagai berikut.

Dari rumus tersebut anda pasti menyadari bahwa untuk menghitung nilai Cumulative Layout Shift, maka anda harus memahami dua istilah berikut ini. Yaitu Impact Fraction dan Distance Fraction.

WARNING :

Jika sampai pada bagian ini, ada di antara anda yang merasa sedikit pusing atau mual ketika melihat betapa sulitnya perhitungan CLS ini. maka saya sarankan untuk BERSABAR SEDIKIT LAGI. hehehehe

Percayalah bahwa sebenarnya perhitungannya tidak terlalu sulit dan mudah dipahami.

Yuk mari kita lanjut lagi membahas Impact Fraction

Impact Fraction

Impact Fraction adalah metrik yang mengukur bagaimana elemen yang tidak stabil mempengaruhi viewport di antara dua frame. Agar lebih mudah dipahami mari kita langsung menuju contohnya saja.

Gambar ini saya ambil dari web.dev ^[1].

Pada contoh di atas terlihat perubahan tata letak pada gambar kedua. Pada gambar tersebut diberikan garis putus-putus berwarna merah yang menandakan area yang terkena dampak dari perubahan tata letak.

Impact Fraction adalah perbandingan luas area terdampak dengan luas viewportnya.

Jika kita anggap area terdampaknya 75% dari total tampilan halaman yang terlihat pada layar, maka itulah yang disebut Impact Fraction. Jadi dapat kita anggap Impact Fractionnya 75% atau 0.75.

Mudah dupahami bukan? Selanjutnya mari kita bahas tentang Distance Fraction

Distance Fraction

Distance Fraction adalah jarak terjauh pergerakan elemen yang tidak stabil, relatif terhadap viewport. Kita langsung ke contohnya.

Gambar ini saya ambil dari web.dev ^[1].

Jika anda perhatikan pada gambar yang kedua terdapat panah biru yang menandakan jarak pergeseran elemen dari tempatnya semula. Kemudian jarak tersebut dibagi dengan tinggi tampilan halaman yang terlihat pada layar.

Misalnya panah biru tersebut menunjukkan jarak 25 milimeter, kemudian tinggi tampilan halaman yang terlihat pada layar kita anggap 100 milimeter. Maka nilai Distance Fraction adalah 25 dibagi 100 sama dengan 0.25.

Jika kita ingin mencari nilai CLS dari kedua contoh di atas maka kita ketahui :

Impact Fraction = 0.75

Distance Fraction =0.25

Jadi CLS nya adalah = 0.75 * 0.25 = 0.1875

Cumulative Layout Shift = 0.1875

Jika kita sesuaikan dengan kategorinya, maka skor tersebut masuk pada kategori Need Improvement.

Bagaimana Cara Mengukur Cumulutive Layout Shift

PageSpeed Insights

Cara yang paling mudah adalah menggunakan Google PageSpeed Insights. Google PageSpeed Insights dapat diakses pada alamat berikut ini

https://developers.google.com/speed/pagespeed/insights/

Berikut ini tampilannya.

Anda cukup memasukkan URL yang ingin di analisa, kemudian klik analize, dalam beberapa detik laporannya akan dapat anda akses.

Penyebab Cumulutive Layout Shift

Menurut web.dev ^[2] ada beberapa hal yang dapat menyebabkan Cumulutive Layout Shift :

• Gambar, foto dan video tanpa dimensi.
• Iklan, iframe serta object lain yang di embed tanpa dimensi.
• Web Font yang dapat menyebabkan Flash Of Invisible Text (FOIT)/Flash Of Unstyled Text (FOUT)
• Konten yang dimasukkan ke halaman website secara dinamis
• Tindakan menunggu respons jaringan sebelum memperbarui DOM

Cara Optimasi Cumulutive Layout Shift

Masih bersumber pada referensi yang sama web.dev. Dikatakan bahwa terdapat beberapa cara untuk melakukan optimasi Cumulative Layout Shift.

• Tambahkan dimensi
• Gunakan atribut rel=”preload” pada font
• Jangan munculkan konten yang berpotensi menimbulkan CLS pada awal halaman.

Simpulan

Menurut saya CLS ini merupakan metrik yang terlihat sulit tapi sebenarnya tidak terlalu sulit. Anda harus memahami konsepnya terlebih dahulu akan mudah dalam melakukan optimasi.

Referensi

1. web.dev.
2. web.dev.
3. searchenginejournal.

Demikian artikel tentang Cumulative Layout Shift, semoha bermanfaat.