Apa Itu Cumulative Layout Shift (CLS) dan Cara Optimasinya

CLS adalah metrik yang mengukur seberapa sering elemen di halaman web bergerak secara tak terduga saat halaman dimuat. Metrik ini penting dipahami oleh developer, untuk memastikan website yang dibuat nyaman bagi pengunjung dan memberikan pengalaman yang lebih baik.

CLS termasuk salah satu metrik dalam kategori Core Web Vitals yang digunakan oleh mesin pencari seperti Google untuk menilai performa dan kualitas user experience pada sebuah situs. Dalam artikel ini kami akan berbagi informasi tentang apa kepanjangan CLS, cara mengukur hingga optimasinya. Simak informasi berikut ini.

Kepanjangan CLS adalah Cumulative Layout Shift, yaitu metrik yang mengukur seberapa sering dan seberapa besar elemen-elemen yang ada pada halaman website berpindah atau berubah posisinya selama halaman dimuat.

Perubahan ini dapat terjadi secara tiba-tiba di browser pengunjung dan sering kali membuat mereka merasa tidak nyaman saat mengakses website. CLS akan mengukur stabilitas visual pada sebuah halaman website selama situs tersebut dimuat. Secara garis besar, dasar penilaian CLS memiliki dua faktor utama, yaitu:

1. Impact Fraction

Penilaian CLS ini akan mengkalkulasikan nilai berdasarkan seberapa banyak area layar yang terpengaruh oleh perubahan tata letak yang terjadi pada sebuah website.

2. Distance Fraction

Penilaian CLS dengan distance fraction akan mengevaluasi seberapa jauh elemen-elemen di sebuah website berpindah dari posisi awal ke posisi akhirnya di layar saat ditampilkan.

Nilai CLS berkisar dari 0 hingga lebih dari 1. Semakin rendah nilai CLS maka semakin bagus untuk sebuah website. Hal tersebut menandakan bahwa website memliki stabilitas di tata letak halaman. Sebaliknya, jika nilai CLS tinggi, itu menunjukkan bahwa halaman web sering mengalami pergeseran tata letak secara tiba-tiba, yang dapat sangat mengganggu pengalaman pengunjung.

Penyebab Cumulative Layout Shift

Cumulative layout shift atau CLS pada sebuah halaman website dapat disebabkan oleh beberapa hal, diantaranya adalah sebagai berikut:

1. Gambar tanpa dimensi yang ditetapkan

Jika sebuah website memuat elemen gambar atau video yang dimuat tanpa menetapkan lebar dan tinggi yang spesifik, maka akan mengakibatkan halaman yang diakses akan mengalami perubahan tata letak ketika gambar/video tersebut selesai dimuat.

2. Iklan atau elemen dinamis

Penggunaan iklan atau elemen dinamis pada sebuah website juga dapat menjadi salah satu penyebab nilai CLS menjadi tinggi. Iklan atau elemen dinamis yang ditambahkan ke halaman sebuah website setelah konten utama dimuat seringkali akan menyebabkan pergeseran elemen lain pada halaman website yang diakses.

3. Font yang lambat dimuat

Tingginya nilai CLS juga dipengaruhi oleh element font yang lambat dimuat. Ketika ada elemen font khusus yang dimuat setelah konten teks tampil, elemen font khusus tersebut mungkin akan mengubah ukuran teks, dan tentunya dapat menyebabkan pergeseran tata letak.

4. Elemen DOM yang ditambahkan atau dihapus secara dinamis

Penyebab lainnya nilai CLS tinggi adalah adanya elemen DOM yang ditambahkan ataupun dihapus secara dinamis. Ketika ada elemen DOM baru ditambahkan atau dihapus, terutama pada elemen yang bersifat dinamis, maka hal tersebut akan menyebabkan tata letak halaman bisa berubah dan mengakibatkan pergeseran.

Cara Mengukur CLS

Lalu bagaimana cara mengetahui nilai CLS pada website yang Anda kelola? Mengukur nilai CLS dapat menggunakan beberapa tools yang disediakan oleh Google, seperti:

1. Google Lighthouse

Tools pertama yang dapat digunakan untuk mengukur CLS adalah Google Lighthouse. Google lighthouse terdapat pada developer tools di browser Google chrome. Berikut langkah untuk mengukur nilai CLS menggunakan Google lighthouse.

• Silahkan mengakses menu developer tools dengan menekan tombol ctrl+shift+i pada jendela website yang akan diukur CLS. Anda juga bisa mengklik “titik 3” di pojok kanan atas browser chrome, kemudian ke menu more tools dan klik developer tools.

• Kemudian pilih opsi lighthouse.

• Kemudian klik Analyze page load.

• Tunggu sampai prosesnya selesai, setelah itu akan tampil hasil analisis dari website anda termasuk nilai CLS.

2. PageSpeed Insights

Tools pengukuran CLS yang kedua adalah dengan menggunakan tools PageSpeed Insights. Anda bisa mengunjungi website PageSpeed lalu masukkan nama domain yang akan Anda test. Tunggu hingga proses selesai, dan nantinya akan muncul hasil dari analisis tersebut termasuk nilai CLS.

3. Google Search Console

Tools pengukuran CLS selanjutnya adalah Google Search Console. Google search console menyediakan nilai core web vitals, termasuk CLS. Berikut langkah-langkah pengecekannya.

• Silahkan login dahulu di akun Google Search Console yang digunakan, dan pilih properti yang ingin diketahui nilai CLS-nya. Kemudian klik pada menu Core Web Vitals.

• Selanjutnya, klik open report pada perangkat yang ingin dilihat nilai CLS-nya.

• Kemudian, akan muncul data yang menunjukkan URL yang sudah baik dan yang perlu diperbaiki. Jika data tersebut menunjukkan bagian yang perlu diperbaiki, berarti nilai CLS masih perlu ditingkatkan. Untuk melihat URL yang sudah baik, Anda bisa klik “view data about good URLs.

• Kemudian klik examples url di bagian bawah.

• Nantinya, akan muncul nilai CLS di bagian sidebar.

Nilai CLS yang disarankan oleh Google untuk memastikan user experience yang baik adalah:

• Baik: Di bawah 0,1
• Perlu Perbaikan: Antara 0,1 hingga 0,25
• Buruk: Di atas 0,25

Cara Optimasi Cumulative Layout Shift

Setelah mengukur CLS dengan salah satu metode di atas dan mendapatkan hasil yang perlu perbaikan atau buruk, langkah selanjutnya adalah melakukan optimasi CLS. Berikut adalah beberapa elemen yang dapat dioptimasi untuk memperbaiki nilai CLS:

1. Menentukan nilai spesifik ukuran pada gambar dan video

Salah satu cara yang paling efektif untuk menurunkan nilai CLS adalah dengan selalu menetapkan nilai yang spesifik pada atribut tinggi dan lebar pada elemen media seperti gambar dan video.

Dengan menetapkan ukuran yang spesifik, browser akan dapat menyisakan ruang untuk elemen-elemen tersebut sebelum mereka dimuat, sehingga menghindari perubahan tata letak pada halaman website anda. Berikut contohnya:

Pada contoh di atas, ukuran gambar ditentukan dengan atribut width dan height. Ini memastikan bahwa browser memesan ruang dengan rasio 600×400 pixel sebelum gambar dimuat.

2. Jangan menggunakan konten dinamis yang lambat dimuat

Langkah optimasi selanjutnya yang bisa dilakukan adalah dengan tidak menambahkan elemen dinamis yang lambat dimuat. Elemen dinamis ni bisa berupa iklan, banner, dan sejenisnya.

Jika elemen dinamis tersebut memang benar-benar anda perlukan seperti menambahkan iklan, banner, atau konten dinamis lainnya, pastikan untuk menentukan ruang untuk elemen-elemen tersebut sejak awal.

Hindari juga untuk menambahkan elemen-elemen ini di tengah-tengah proses halaman website dimuat, karena hal ersebut dapat menyebabkan pergeseran tata letak yang cukup signifikan pada halaman website anda.

3. Gunakan font yang lebih stabil dan ringan untuk dimuat

Langkah optimasi yang bisa anda lakukan adalah dengan menggunakan nt ang ringan untuk dimuat. Penggunaan font yang ringan bertujuan untuk menghindari perubahan tata letak akibat pemuatan font yang lambat.

Anda juga dapat mempertimbangkan untuk menggunakan teknik font-display: swap dalam CSS. Teknik ini dapat memastikan bahwa teks akan tetap ditampilkan menggunakan font cadangan hingga font yang diinginkan selesai dimuat, sehingga menghindari pergeseran tata letak yang signifikan pada website anda.

BACA JUGA: 30 Font Keren Terbaru untuk Website agar Lebih Aesthetic

Kesimpulan

Cumulative Layout Shift atau CLS adalah metrik yang mengukur stabilitas tata letak halaman web dengan melihat seberapa sering elemen-elemen bergerak secara tiba-tiba selama dimuat. Pentingnya CLS untuk SEO terletak pada dampaknya terhadap pengalaman pengguna.

Website dengan nilai CLS yang rendah memberikan tampilan yang stabil dan nyaman, yang dapat meningkatkan peringkat di hasil pencarian Google karena Google memprioritaskan situs yang menawarkan pengalaman pengguna yang baik.

Demikian artikel kali ini tentang CLS. Semoga dapat membantu dan menambah referensi anda dalam pengelolaan website yang bertujuan memberikan user experience terbaik bagi pengakses website anda.