Cumulative Layout Shift: Cara Optimasi & Pentingnya Bagi SEO

Dalam mengatur strategi SEO, banyak sekali metrik pengukuran yang perlu Anda analisis. Tak hanya tentang trafik website, Anda juga perlu memantau metrik yang merepresentasikan tampilan website Anda, untuk memaksimalkan strategi marketing menggunakan SEO.

Salah satu metrik yang termasuk dalam core web vitals adalah Cumulative Layout Shift (CLS). Sudahkah Anda mengetahui apa itu CLS dan bagaimanakah cara optimasi CLS untuk memaksimalkan strategi SEO bagi website Anda? Berikut ini penjelasan lengkapnya.

Apa Itu CLS?

Cumulative Layout Shift atau CLS adalah sebuah metrik core web vitals yang berfungsi untuk menilai stabilitas sebuah website. Dalam Bahasa Indonesia, CLS disebut sebagai pergeseran tata letak kumulatif. CLS mampu menghitung pergeseran halaman yang tidak terduga ketika posisi atau ukuran elemennya berubah hingga menggeser posisi konten.

CLS merupakan elemen yang mempengaruhi user experience. Penting bagi Anda untuk melakukan optimasi CLS, sebab salah satu strategi untuk memaksimalkan SEO adalah memiliki user experience yang baik. Pergeseran halaman website pada umumnya terjadi saat halaman tersebut sedang diunduh. Pergeseran tata letak individual biasanya terjadi secara berurutan dalam rentang waktu 1-5 detik. 

Pentingnya CLS Terhadap SEO

Cumulative Layout Shift (CLS) menjadi salah satu faktor yang mempengaruhi pengalaman pengguna dan posisi suatu website di SERP. Karena metrik yang satu ini merupakan salah satu metrik core web vitals, maka website bisa menerima penalti dari Google apabila tidak mengikuti ketentuannya.

Untuk membangun strategi SEO yang baik, Anda juga harus memiliki nilai CLS yang kredibel. Jika website Anda memiliki nilai CLS yang kurang baik, maka biasanya kecepatan loading pun menjadi lama sehingga pengguna akan enggan berlama-lama mengunjungi website Anda. Maka dari itu, optimasi CLS untuk mempengaruhi user experience sangat penting untuk dilakukan bila Anda menginginkan website tersebut menempati posisi teratas Google. 

Cara Mengetahui Nilai CLS

Sebelum mengetahui cara menghitung nilai CLS, Anda wajib memahami berapakah nilai CLS yang dianggap kredibel oleh mesin pencari. Google telah menetapkan standar nilai bagi seluruh metrik core web vitals, antara lain:

• Good: Kurang dari 0,1
• Needs Improvement: Antara 0,1-0,25
• Poor: Lebih dari 0.25

Setiap halaman dalam satu website bisa memiliki nilai CLS yang berbeda, tergantung dari jenis layar (perangkat) yang digunakan, entah itu desktop atau mobile. Pergeseran tata letak yang terjadi di perangkat mobile memiliki pengaruh yang lebih signifikan terhadap nilai CLS.

1. Impact Fraction

Impact fraction adalah metrik yang mampu mengukur pengaruh elemen yang tidak stabil terhadap viewport di antara dua frame. Metrik ini merepresentasikan perbandingan luas viewport dengan luas area yang terdampak. 

Misalnya, jika area terdampaknya adalah 60% dari total tampilan yang terlihat di layar, maka 60% tersebut merupakan impact fraction. Jadi, kita bisa menyimpulkan bahwa nilai impact fraction-nya adalah 60% atau 0,6.

2. Distance Fraction

Distance fraction adalah pergeseran yang dihitung dari jarak terjauh pergerakan elemen yang tidak relatif terhadap viewport. 

Misalnya, sebuah tampilan penuh pada layar memiliki tinggi 150 milimeter. Kemudian, jarak antara bagian atas layar dengan konten yang ditampilkan adalah 50 milimeter, kita bisa menyimpulkan bahwa nilai distance fraction-nya adalah 50 dibagi 150, yakni 0.3.

3. Nilai Cumulative Layout Shift

Setelah Anda menemukan beberapa nilai impact fraction dan distance fraction-nya, lanjutkan mencari nilai cumulative layout shift dengan rumus berikut ini:

Nilai CLS = impact fraction * distance fraction

Jika tadi Anda sudah mengumpamakan 0,6 sebagai impact fraction dan 0,3 sebagai distance fraction, rumus tersebut berubah menjadi:

Nilai CLS = 0,6 * 0,3

Nilai CLS = 0,18

Jadi, dari perumpamaan tersebut dapat disimpulkan bahwa nilai CLS-nya adalah 0,18 yang termasuk dalam kategori ‘needs improvement’.

Cara Optimasi CLS

Setelah mengetahui cara menghitung nilai CLS, kini Anda harus mengetahui how to optimize CLS, guna memaksimalkan strategi SEO bagi website Anda. Simak penjelasannya di bawah ini.

1. Gunakan ‘font:display’

Cara optimasi CLS yang pertama adalah gunakan ‘font:display’. Menambahkan custom font ke website bisa meningkatkan skor CLS, yang disebabkan oleh beberapa hal berikut ini:

• Flashes of Unstyled Text (FOUT): Kondisi di mana browser menampilkan font pengganti sampai custom font selesai dimuat dan mengabaikan layout halaman untuk sementara.
• Flashes of Invisible Text (FOIT): Kondisi di mana saat proses rendering, halaman akan menampilkan teks yang tidak terlihat sampai custom font sudah selesai dimuat.

Memuat custom font mampu menyebabkan perubahan layout secara signifikan. Anda bisa menggunakan atribut ‘font:display’ seperti: auto, block, fallback, dan swap. Selain itu, menambahkan atribut <link rel=preload> ke dalam file font Anda juga bisa menghindari pergeseran layout yang tidak diinginkan saat memuat custom font.

2. Tentukan Dimensi Gambar

Menentukan dimensi gambar merupakan cara optimasi CLS yang mudah dilakukan namun memiliki dampak yang sangat besar bagi website Anda. Semua elemen gambar pada sebuah website membutuhkan dimensi tetap untuk menghindari terjadinya pergeseran yang tak terduga. 

Hal itu pun termasuk gambar responsif yang juga menggunakan rasio lebar dan tinggi yang sama agar browser mampu menghitung berapa banyak ruang yang diperlukan supaya gambar tersebut bisa ditampilkan dengan sempurna. 

Anda bisa menggunakan atribut ‘srcset’ untuk menentukan gambar yang berbeda menurut rasio lebar dan tinggi yang sama. Atribut ini mampu membantu browser mengirimkan gambar responsif yang benar.

3. Tinjau Konten Dinamis

Meninjau konten dinamis merupakan salah satu cara optimasi CLS yang memiliki dampak besar bagi website Anda. Banyak website yang menggunakan konten dinamis sebagai upaya untuk membuat pengguna merasa tertarik untuk melakukan tindakan tertentu. Namun, ketika ada elemen baru di bagian atas atau bawah halaman, konten dinamis seringkali menggeser konten lain yang ada di sekitarnya.

Oleh karena itu, ada beberapa cara yang bisa Anda lakukan untuk meninjau konten dinamis, di antaranya berikut ini:

• Muatlah konten dinamis di luar viewport pengguna dan gunakanlah overlay untuk mengajak pengguna melihat konten tersebut. Sebab, pergeseran yang terjadi saat lazy loading tidak akan mempengaruhi skor CLS.
• Gunakan container ukuran tetap untuk mencegah pergeseran layout.
• Ajak pengguna menginisiasi perubahan dengan menambahkan elemen interaksi yang memicu munculnya konten baru, sehingga hal ini akan meminimalisir terjadinya pergeseran tata letak.

4. Atur Lebar dan Tinggi Banner Iklan

Cara optimasi CLS yang terakhir adalah mengatur lebar dan tinggi banner iklan. Keberadaan banner iklan mampu mendorong atau menggeser konten yang sedang dilihat oleh pengguna. Hal ini mengakibatkan website Anda memiliki user experience yang kurang baik. Publisher iklan dinamis harus menyediakan ruang terlebih dahulu supaya tidak memperburuk nilai CLS dari sebuah website. 

Anda bisa mengatur gaya elemen sebelum library tag, sehingga banner iklan tidak menggeser atau menghalangi konten yang sedang dilihat oleh pengguna. Cara optimasi CLS yang satu ini juga penting untuk dilakukan meskipun iklan mengisi seluruh halaman, sehingga layout-nya tidak akan bergeser meskipun iklannya tidak dapat dimuat.

Demikianlah pembahasan mengenai apa itu CLS, hingga bagaimana cara optimasi CLS untuk website Anda. Anda bisa menggunakan jasa SEO untuk membantu optimasi CLS dan core web vitals pada website Anda. Sebab, jasa SEO disediakan oleh tenaga profesional yang menyusun strategi secara terukur dan detail untuk meningkatkan performa website secara optimal.