Apa itu Cumulative Layout Shift? - Penyebab & Cara Optimasi

Cumulative layout shift adalah salah satu metrik penting yang digunakan untuk mengukur nilai core web vitals.

CLS ini berkaitan dengan website behaviour yang bisa memengaruhi kenyamanan pengguna ketika menjelajahi sebuah situs.

Metrik yang satu ini penting diperhatikan jika Anda ingin meningkatkan performa website di Search Engine Result Pages (SERP).

Maka dari itu, kenali apa itu CLS dan bagaimana cara mengukur serta mengoptimalkan nilainya. Yuk, simak penjelasannya dalam artikel berikut ini!

Apa itu Cumulative Layout Shift?

Tak jarang, para pengunjung website mendapatkan pengalaman yang kurang baik saat menjelajahi suatu situs.

Misalnya, saat mereka membuka sebuah webpage dan membaca konten di dalamnya, tiba-tiba muncul banner iklan, sehingga tulisannya bergeser ke bawah.

Ilustrasi cumulative layout shift

Nah, pergeseran semacam ini disebut layout shift, dan metrik yang mengukurnya adalah Cumulative Layout Shift (CLS). Semakin sering dan besar pergeserannya, semakin tinggi (buruk) nilai CLS halaman tersebut.

Jika ditinjau dari definisinya, pengertian Cumulative Layout Shift atau CLS adalah metrik yang mengukur seberapa besar pergeseran tata letak (layout shift) tak terduga yang terjadi pada halaman. Skor CLS diambil dari rangkaian pergeseran terbesar (session window), yaitu sekumpulan pergeseran yang terjadi berdekatan dengan jeda kurang dari 1 detik dan berlangsung maksimal 5 detik.

Pergeseran layar semacam ini umumnya terjadi karena elemen yang dimuat belakangan tidak diberi ruang sejak awal.

Contohnya, banner iklan diproses lebih lambat dari konten lainnya, sehingga muncul secara tiba-tiba dan memengaruhi tampilan window.

Perlu diketahui, CLS ini merupakan core web vitals bersamaan dengan dua metrik lainnya, yaitu Largest Contentful Paint (LCP) dan Interaction to Next Paint (INP) yang sejak 12 Maret 2024 menggantikan First Input Delay (FID).

Pentingnya Cumulative Layout Shift

Setiap pengguna yang mengunjungi website tentu menginginkan kenyamanan saat menjelajahi dan membaca konten di dalamnya.

Jika ada pergeseran tampilan layar secara tiba-tiba, hal ini tentu memengaruhi kenyamanan mereka saat membaca konten Anda.

Apalagi pergeseran layar juga bisa membuat user salah klik, sehingga hal ini berpotensi membuat mereka frustrasi. Jika demikian, maka user akan cenderung mencari website lain yang lebih nyaman.

Perilaku semacam ini tentu bisa memengaruhi kepercayaan user, traffic, dan berbagai metrik penting lainnya.

Di sisi lain, cumulative layout shift core web vitals merupakan metrik yang bisa memengaruhi performa dan ranking website di SERP.

Diketahui, Google akan memberikan ranking bagus untuk website yang memiliki performa baik. Nah, performa ini bisa diukur dari tingkat User Experience (UX).

Oleh karena itu, semakin baik UX yang ditawarkan, maka performa website akan bagus dan bisa berdampak pada kenaikan peringkat di SERP.

Meski begitu, Google menegaskan bahwa relevansi dan kualitas konten tetap lebih utama. Skor Core Web Vitals yang baik tidak menjamin peringkat teratas, tetapi pengalaman halaman yang buruk dapat merugikan ketika halaman Anda bersaing dengan halaman lain yang sama relevannya. Maka dari itu, perhatikan skor CLS dengan baik, ya!

Penyebab Cumulative Layout Shift Buruk

Nilai cumulative layout shift buruk menandakan bahwa tingkat UX yang dimiliki situs tersebut rendah. Hal ini tentu sangat tidak menguntungkan bagi website.

Pertanyaannya, apa penyebab nilai cumulative layout shift buruk atau terlalu tinggi?

Telah disebutkan sebelumnya, hal ini disebabkan oleh kecepatan muat konten yang berbeda, sehingga mengakibatkan pergeseran layar secara tak terduga.

Nah, apabila hal ini terjadi, terdapat beberapa elemen yang harus Anda periksa. Adapun di antaranya yaitu:

• Ukuran dan dimensi media dalam website, termasuk gambar dan video.
• Dimensi iFrame, iklan banner, dan sematan (embed)
• Website font
• Respons jaringan sebelum update Document Object Model (DOM)
• Konten dinamis dalam website

Cara Mengukur Nilai Cumulative Layout Shift

Nilai CLS (sumber: Sitechecker)

Hasil pengukuran nilai cumulative layout shift dibagi menjadi 3 kategori, yaitu good (baik), need improvement (butuh ditingkatkan), dan poor (buruk).

Nilai CLS dikatakan baik apabila berada di rentang angka kurang dari sama dengan 0.1. Kemudian dikatakan need improvement jika berada di rentang angka 0.1-0.25.

Lalu, nilai CLS akan dikatakan poor atau buruk ketika nilai CLS lebih dari 0.25.

Nah, untuk mengetahui nilai-nilai tersebut, Anda bisa menggunakan bantuan tool yang bernama PageSpeed Insights. Data dari pengguna nyata (field data) juga tersedia di laporan Core Web Vitals pada Google Search Console.

Dengan tool ini, Anda bisa mencari tahu rincian nilai dan penyebab tingginya skor CLS melalui bagian Diagnostics.

Diketahui, dalam menilai CLS, Google menggunakan dua komponen penting, yaitu impact fraction dan distance fraction dengan formula hitung sebagai berikut:

Skor Layout Shift = Impact Fraction x Distance Fraction

Rumus ini menghasilkan skor untuk setiap pergeseran. Nilai CLS halaman adalah jumlah skor pergeseran pada session window terbesar.

Impact fraction adalah total area atau ruang yang digunakan oleh elemen yang tidak stabil. Dengan kata lain, impact fraction merujuk pada total ruang yang digunakan sebelum dan sesudah konten bergeser.

Impact fraction dalam CLS

Untuk mengukur nilai impact fraction, Anda bisa menggunakan formula berikut ini:

Impact Fraction = Area Terdampak : Area Viewport (area layar yang bisa dilihat pengguna)

Di sisi lain, distance fraction adalah rasio atau jarak terjauh pergeseran elemen. Berikut cara menghitung distance fraction:

Distance Fraction = Jarak Pergeseran Terjauh : Dimensi Terbesar Viewport (lebar atau tinggi, mana yang lebih besar)

Distance fraction dalam CLS

Sebagai informasi, viewport adalah bagian atau tampilan webpage yang bisa dilihat di layar (window) pengguna.

Cara Optimasi Nilai Cumulative Layout Shift

Setelah memahami penjelasan sebelumnya, diketahui bahwa cumulative layout shift adalah bagian core web vitals yang tak boleh dikesampingkan.

Pemilik website perlu memastikan bahwa nilai CLS-nya bagus agar pengguna nyaman sekaligus mendukung performa di SERP.

Oleh karena itu, penting untuk melakukan optimasi CLS. Bagaimana caranya? Berikut cara yang bisa Anda lakukan:

1. Tentukan Ukuran Atribut untuk Gambar dan Video

Salah satu penyebab tingginya nilai CLS adalah gambar dan video yang tidak diberi atribut ukuran. Tanpa atribut width dan height (atau properti CSS aspect-ratio), browser tidak tahu berapa ruang yang harus disediakan sebelum media selesai dimuat.

Akibatnya, konten di bawahnya terdorong ketika gambar atau video muncul. Itulah kenapa CLS bisa terjadi.

Nah, sehubungan dengan itu, cara optimasi CLS yang bisa Anda lakukan adalah menentukan ukuran dan dimensi setiap atribut atau elemen, termasuk gambar dan video.

Dengan begitu, browser akan lebih mudah memprediksi ukuran elemen, sehingga bisa memberikan ruang yang pas, bahkan jika elemen tersebut masih loading.

2. Atur Ukuran Banner Iklan, Sematan, dan iFrame

Di samping menentukan ukuran atribut untuk gambar dan video, Anda juga perlu mengatur size banner iklan, iFrame, dan media sematan (embed).

Sama seperti sebelumnya, mengatur ukuran untuk ketiga elemen tersebut akan memudahkan browser dalam memprediksi space yang dibutuhkan.

Dengan begitu, saat elemen tersebut membutuhkan waktu lama untuk loading, browser telah menyediakan ruang sesuai ukuran, sehingga pergeseran layar bisa dicegah.

3. Terapkan Pengaturan Transisi

Kunci utama untuk mengurangi nilai cumulative layout shift adalah buat pergerakan layar yang terduga. Nah, sehubungan dengan ini, upaya yang bisa Anda lakukan adalah terapkan pengaturan transisi.

Pergeseran yang dipicu langsung oleh interaksi pengguna tidak dihitung sebagai pergeseran tak terduga. Selain itu, animasi atau transisi yang memakai properti CSS transform tidak memicu layout shift, sehingga lebih aman dibandingkan mengubah properti seperti top atau height.

Sebagai contoh, Anda dapat menggunakan transisi “read more” agar user bisa memuat lebih banyak konten. Pergeseran yang terjadi dalam 500 milidetik setelah pengguna mengklik atau mengetuk tidak dihitung dalam CLS, sehingga pengaturan ini tidak memengaruhi nilai CLS website Anda. Sebaliknya, konten yang muncul sendiri tanpa interaksi pengguna tetap dihitung.

4. Gunakan font-display

Saat Anda menggunakan font custom, ada kemungkinan font tersebut menyebabkan Flash of Invisible Text (FOIT) atau Flash of Unstyled Text (FOUT).

FOIT berarti, browser akan menampilkan halaman kosong hingga custom font selesai loading. Sementara itu, FOUT berarti, browser akan menampilkan font lain hingga custom font selesai loading.

Nah, baik FOIT dan FOUT bisa menyebabkan pergeseran layar dan meningkatkan nilai CLS website Anda.

Untuk mengatasinya, Anda bisa menggunakan properti CSS font-display dengan nilai auto, block, swap, fallback, atau optional. Agar pergeseran minimal, gunakan optional, atau kombinasikan swap dengan preload font dan font cadangan yang ukurannya mirip.

Sekian penjelasan lengkap mengenai cumulative layout shift yang perlu Anda ketahui. Kesimpulannya, cumulative layout shift adalah metrik yang mengukur pergerakan layar tak terduga saat konten masih loading.

CLS ini sangat memengaruhi user experience dan juga SEO. Bagaimana tidak, CLS merupakan bagian core web vitals yang bisa memengaruhi performa dan ranking website di SERP.

Maka dari itu, penting untuk memperhatikan nilai CLS agar tidak terlalu tinggi. Namun, aktivitas ini mungkin akan terlalu rumit karena sangat berkaitan dengan technical SEO.

Konsultasikan kebutuhan Anda!