Jarang Diketahui!! Inilah Cumulative Layout Shift & Cara Optimasinya

01-11-2023 by Author

Pernahkah kamu mendengar istilah Cumulative Layout Shift? Cumulative Layout Shift menjadi metrik yang dapat mengukur pergeseran pada tata letak yang tidak terduga pada suatu halaman website. Pergeseran ini pada umumnya terjadi ketika halaman tersebut di download. Jika masih bingung, berikut Digital Marketing Depok akan menjelaskan lebih detail.

Cumulative Layout Shift adalah ukuran urutan yang terjadi pada pergeseran tata letak terbesar pada setiap perubahan tata letak yang tidak terduga, yang terjadi selama waktu pada sebuah 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 sampai dengan 5 detik di antara setiap pergeseran.

Cumulative Layout Shift itu termasuk hal yang penting. Ini 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 ini.

Apa yang dimaksud dengan Core Web Vitals??

Web Vitals adalah inisiatif Google, berupa sekumpulan metrik dalam mengukur beberapa hal yang dianggap penting untuk memberikan user experience atau pengalaman pengguna yang baik. Menurut Digital Marketing Depok Core Web Vitals merupakan metrik yang menjadi bagian dari Web Vitals yang dianggap paling penting dan paling mempengaruhi pada pengalaman pengguna.

Bahkan, dengan adanya core web vitals, maka kamu atau pemilik website mempunyai tiga aspek yang lebih jelas, yang dapat digunakan untuk mengukur efektivitas halaman-halaman websitenya, yaitu:

• Kecepatan loading
• Baik atau tidaknya respons elemen halaman website
• Stabilitas layout halaman

Google menyebutkan bahwa peluang pengunjung meninggalkan website dapat menurun 24 persen jika kamu bisa mengoptimalkan ketiga aspek di atas. Tidak hanya itu saja, menurut Digital Marketing Depok core web vitals juga dapat berpengaruh terhadap SEO.  

Kategori Cumulative Layout Shift

Sama halnya dengan metrik Core Web Vitals yang lain, CLS juga mempunyai tiga kategori dalam penilaiannya, yaitu :

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

Bagiamana cara mengetahui skor Cumulative Layout Shift (CLS) ? Berikut Digital Marketing Depok akan memberikan rumsunya.

Rumus menghitung CLS dapat dilakukan dengan cara menjumlahkan semua skor Layout Shift. Sedangkan cara menghitung Layout Shift adalah sebagai berikut.

Jadi hasil dari layout shift score = impact fraction * distance fraction

Jika pada halaman website kamu terjadi banyak perubahan tata letak, maka untuk mendapatkan nilai CLS, kamu perlu menjumlahkan keseluruhan skor Layout Shiftnya. Jadi rumus Cumulative Layout Shift ini bisa ditulis sebagai berikut.

Dari rumus tersebut, kamu menyadari bahwa untuk menghitung nilai CLS, maka perlu memahami dua istilah berikut ini. Yaitu Impact Fraction dan juga Distance Fraction.

Impact Fraction

Impact Fraction merupakan metrik yang dapat mengukur bagaimana elemen yang tidak stabil dapat mempengaruhi viewport di antara dua frame. Impact Fraction merupakan perbandingan luas area terdampak dengan luas viewportnya.

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

Distance Fraction

Distance Fraction merupakan pergeseran yang dihitung dari jarak terjauh pergerakan elemen yang tidak stabil dan relatif terhadap viewport.

Mengapa ada masalah Cumulative Layout Shift (CLS) ?? Menurut Digital Marketing Depok terdapat beberapa hal yang dapat menyebabkan CLS pada website yaitu :

• Gambar, foto dan video yang tidak memiliki dimensi.
• Iklan, iframe dan juga object lain yang di-embed tidak beserta dimensinya.
• Web Font yang bisa menyebabkan Flash Of Invisible Text (FOIT) atau Flash Of Unstyled Text (FOUT). Maksudnya adalah waktu yang dibutuhkan website dalam memuat font yang berukuran besar. Jadi sebagian browser dapat menyembunyikan teks hingga font dimuat sepenuhnya.
• Konten yang dimasukkan ke dalam halaman website yang secara dinamis
• Tindakan menunggu respons jaringan sebelum memperbarui DOM. Document Object Model atau DOM adalah dokumen (HTML) yang dimodelkan dalam sebuah bentuk objek. Objek dari dokumen ini menyuguhkan sekumpulan fungsi dan atribut/data yang bisa kamu gunakan dalam membuat program Javascript. Hal inilah yang disebut juga dengan API (Application Programming Interface).

Demikian ulasan yang dapat Digital Marketing Depok sampaikan pada artikel ini, semoga bisa bermanfaat untuk pembaca. Untuk informasi tentang website, iklan online dan lain-lain, kamu bisa menghubungi ahlinya yaitu The Conversion yang telah menangani perusahaan – perusahaan besar seperti sirup ABC, Lasalle Food, BMW, Mitsubishi Elektrik dan lain – lain di nomor 081294795042