(0275) 2974 127
Cumulative Layout Shift adalah ukuran urutan yang terjadi pada pergeseran tata letak terbesar pada setiap perubahan tata letak yang tidak terduga yang dimana terjadi selama seluruh waktu halaman sampai berhasil dimuat.
Urutan pergeseran tata letak, yang disebut juga sebagai jendela sesi, adalah ketika satu atau beberapa pergeseran tata letak individual yang terjadi secara berurutan dengan cepat dengan waktu mencapai kurang dari 1 detik di antara setiap pergeseran dan juga berlangsung selama maksimum 5 detik.
Cumulative Layout Shift ini penting untuk diperhatikan karena metrik ini menjadi salah satu dari 3 metrik penting yang masuk pada Core Web Vitals. Sedangkan Core Web Vitals dapat dipastikan menjadi salah satu ranking factor yang digunakan oleh Google di tahun 2021.
Web Vitals adalah inisiatif Google yang berupa sekumpulan metrik dalam mengukur beberapa hal yang dianggap penting untuk memberikan user experience atau pengalaman pengguna yang baik. Core Web Vitals merupakan metrik yang menjadi bagian dari Web Vitals yang dianggap paling penting dan paling mempengaruhi pada pengalaman pengguna.
Dengan adanya core web vitals, maka pemilik website mempunyai tiga aspek yang lebih jelas yang dapat digunakan untuk mengukur efektivitas halaman-halaman websitenya, yaitu :
Google menyebutkan bahwa ada kemungkinan pengunjung dapat meninggalkan website yang dapat menurun 24 persen jika bisa mengoptimalkan ketiga aspek di atas. Tidak hanya itu saja, core web vitals juga dapat berpengaruh terhadap SEO.
Sama halnya dengan metrik Core Web Vitals yang lain, CLS juga mempunyai tiga kategori dalam penilaiannya, yaitu :
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
Jika pada halaman website terjadi banyak perubahan tata letak, maka untuk agar mendapatkan nilai CLS, perlu menjumlahkan keseluruhan skor Layout Shiftnya.
Jadi rumus Cumulative Layout Shift ini bisa ditulis sebagai berikut :
Dari rumus tersebut pasti menyadari bahwa untuk menghitung nilai Cumulative Layout Shift, maka harus memahami dua istilah berikut ini :
Impact Fraction adalah metrik yang mengukur bagaimana elemen yang tidak stabil mempengaruhi viewport di antara dua frame. Agar lebih mudah memahaminya dapat melihat contoh di bawah ini :
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 menganggap area terdampaknya adalah 75% dari total tampilan halaman yang dapat terlihat pada layar, maka itulah Impact Fraction. Jadi dapat menganggap Impact Fractionnya adalah sekitar 75% atau 0.75.
Distance Fraction merupakan pergeseran yang dihitung dari jarak terjauh pergerakan elemen yang tidak stabil dan relatif terhadap viewport. Sebagai contohnya dapat melihatnya pada gambar di bawah ini :
Jika diperhatikan pada gambar yang kedua terdapat tanda panah biru yang memberitahukan bahwa jarak pergeseran elemen dari tempatnya semula. Kemudian jarak tersebut dapat dibagi dengan tinggi tampilan halaman yang tampak pada layar.
Misalnya panah biru tersebut menandakan antara jarak 25 milimeter, kemudian tinggi tampilan halaman yang terlihat pada layar dapat menganggap yaitu 100 milimeter. Jadi nilai Distance Fractionnya adalah 25 dibagi 100 yaitu 0.25.
Sekarang sebagai contohnya, jika menginginkan mencari nilai CLS dari kedua contoh di atas maka :
Impact Fraction = 0.75
Distance Fraction =0.25
Jadi CLS nya adalah = 0.75 * 0.25 = 0.1875
Cumulative Layout Shift = 0.1875
Jika menyesuaikan dengan kategorinya, maka skor tersebut telah termasuk pada kategori “Need Improvement” atau butuh perbaikan pada tata letak website.
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 :
Cukup memasukkan URL yang ingin di analisa, kemudian klik analize, dalam beberapa detik laporannya akan dapat diakses.
Terdapat beberapa hal yang dapat menyebabkan CLS pada website yaitu :
Masih bersumber pada referensi yang sama web.dev. Dikatakan bahwa terdapat beberapa cara untuk melakukan optimasi Cumulative Layout Shift, yaitu :
Menemukan topik blog yang menarik dan terkini mungkin tidak mudah, terutama bagi pemula yang belum…
Cara Memonetisasi Blog – Menulis blog pribadi bukan lagi sekedar hobi, kegiatan ini menawarkan peluang…
Membuat blog adalah salah satu cara terbaik untuk berbagi cerita dan kisah Anda sambil terhubung…
Pada artikel ini, kami merekomendasikan beberapa contoh desain web terbaik untuk menginspirasi Anda. Dari contoh…
LMS adalah singkatan dari Learning Management System dan merupakan suatu bentuk aplikasi perangkat lunak yang…
Situs web yang dirancang dengan baik dapat membantu menarik pengunjung, meningkatkan kredibilitas perusahaan Anda, dan…