Cara Mengatasi Masalah CLS Di Google Search Console

Salah satu peringatan yang sering muncul di Google Search Console adalah masalah CLS atau Content Layout Shift.

Peringatan tersebut muncul pada menu Data Web Inti di Google Search Console. Biasanya judul peringatannya seperti ini:

Masalah CLS: lebih dari 0,2 (seluler)

Atau

Masalah CLS: lebih dari 0,2 (desktop)

Apa Penyebab Masalah CLS?

Sumber masalah CLS sebenarnya sangat mudah diketahui. Sesuai dengan namanya, CLS atau Content Layout Shift adalah masalah yang disebabkan oleh adanya pergeseran layout konten.

Pergeseran layout konten tersebut biasanya terjadi karena ada elemen-elemen di blog yang dimuat secara dinamis menggunakan JavaScript. Contohnya seperti iklan (termasuk iklan AdSense), widget recent posts, recent comments, dan lain-lain.

Selain konten yang dimuat secara dinamis, penyebab lainnya adalah adanya elemen gambar atau iframe yang tidak diset tinggi dan lebarnya pada kode HTML.

Contoh CLS karena Iklan AdSense

Pada contoh tersebut, iklan AdSense dipasang di atas postingan. Ketika pengunjung membuka postingan, umumnya iklan tidak langsung muncul karena harus menunggu kode JavaScript iklan AdSense selesai termuat.

Ketika kode JavaScript iklan AdSense sudah termuat, iklan baru bisa muncul dan konten artikelnya menjadi tergeser ke bawah.

Perlu dicatat, CLS hanya dihitung pada bagian yang terlihat di viewport atau muncul di layar. Konten-konten yang bergeser di bagian bawah atau bagian lain yang tidak muncul pada viewport tidak menyebabkan masalah CLS.

Begitulah kira-kira bagaimana masalah CLS bisa terjadi.

Cara Mengatasi Masalah CLS

Untuk mengatasi masalah CLS, tentunya caranya harus disesuaikan dengan penyebabnya.

Untuk mengetahui penyebabnya, sobat bisa melihat detail peringatan pada menu Data Web Inti di Google Search Console. Di situ akan ditampilkan URL-URL yang terkena masalah CLS.

Sobat bisa cek satu per satu URL tersebut, apakah penyebabnya gambar, iklan, atau yang lainnya.

Cara Mengatasi Masalah CLS karena Gambar atau Iframe

Jika penyebabnya gambar atau iframe, sobat hanya perlu menambahkan atribut width dan height pada elemen-elemen tersebut.

Untuk gambar, contoh kode HTML-nya seperti ini:

<img src="https://example.com/image.png" alt="Image" width="300" height="200">

Iframe:

<iframe src="https://example.com/" width="300" height="200"></iframe>

Cara Mengatasi Masalah CLS karena Widget Recent Posts, Recent Comments, dll.

Masalah CLS yang disebabkan oleh widget-widget seperti recent posts, recent comments, dan lain-lain biasanya hanya terjadi pada desktop. Alasannya, widget tersebut umumnya dipasang di sidebar dan hanya langsung tampil di viewport jika dibuka pada desktop.

Ada beberapa opsi yang bisa dilakukan untuk mengatasinya:

1. Hapus widget-widget tersebut jika tidak benar-benar dibutuhkan.
2. Jika ingin tetap dipasang, usahakan jangan di bagian atas sidebar, tetapi di bagian paling bawah. Intinya supaya widget tersebut tidak langsung muncul pada viewport (layar).

Cara Mengatasi Masalah CLS karena Iklan AdSense

Dari beberapa penyebab masalah CLS di atas, penyebab paling umum adalah iklan AdSense, khususnya iklan yang muncul di bagian atas halaman.

Berikut beberapa hal yang bisa dilakukan untuk mengatasinya:

1. Cegah iklan otomatis muncul di bagian atas halaman

Fitur iklan otomatis pada AdSense bisa dibilang cukup bermanfaat, karena kita hanya perlu memasang kode iklan satu kali saja dan iklan akan otomatis muncul di berbagai tempat.

Tetapi efek buruknya, iklan yang muncul menjadi tidak terkontrol. Terkadang iklan muncul di lokasi yang kurang pas, terkadang iklannya kecil, terkadang besar, terkadang di atas, terkadang di bawah, dan tentunya menyebabkan masalah CLS.

Sobat bisa mengatur fitur iklan otomatis ini supaya tidak muncul di lokasi-lokasi tertentu, khususnya di bagian atas halaman yang menjadi penyebab utama masalah CLS.

Caranya, sobat masuk ke Akun AdSense > Iklan > Menurut situs > klik ikon pensil.

Selanjutnya klik menu “Area yang dikecualikan” dan pilih lokasi-lokasi yang ingin dikecualikan supaya iklan AdSense tidak muncul di lokasi tersebut:

2. Gunakan unit iklan AdSense dengan ukuran tetap

Mengecualikan iklan otomatis dari bagian atas halaman ada kemungkinan memengaruhi penghasilan AdSense, karena lokasi penempatan iklan dengan CTR tinggi justru di bagian atas halaman.

Solusinya, sobat bisa memasang unit iklan AdSense ukuran tetap khusus untuk bagian atas halaman.

Sobat bisa membuat unit iklan dengan ukuran tetap di menu Iklan > Menurut unit iklan > Iklan Display > pada opsi ukuran iklan pilih “tetap”.

Selanjutnya, bungkus kode iklannya menggunakan elemen div yang diset secara manual lebar dan tingginya, seperti ini:

<div style="width:300px;height:250px;"> kode iklan </div>

Sesuaikan lebar dan tingginya dengan ukuran unit iklan AdSense yang dibuat.

3. Lazy Load AdSense?

Di beberapa blog lain banyak yang menyarankan untuk memasang Lazy Load AdSense. Tetapi menurut saya, lazy load AdSense tidak benar-benar mengatasi masalah CLS, justru malah memperparah.

Lazy Load AdSense hanya menunda munculnya iklan AdSense. Tanpa melakukan solusi-solusi di atas, memasang Lazy Load AdSense tidak ada gunanya.

Jadi saran saya, sobat tidak perlu memasang Lazy Load AdSense untuk mengatasi masalah CLS, kecuali jika sobat ingin memperbaiki skor Google PageSpeed.

Validasi Perbaikan di Google Search Console

Setelah menerapkan solusi-solusi di atas, jangan lupa untuk melakukan validasi perbaikan di Google Search Console.

Validasi perbaikan biasanya membutuhkan waktu beberapa hari sampai berminggu-minggu. Peringatan di Google Search Console tidak bisa otomatis langsung hilang setelah melakukan validasi.

Penutup

Mungkin hanya sampai di sini saja postingan saya kali ini mengenai cara mengatasi masalah CLS di Google Search Console.

Jika ada pertanyaan, silakan disampaikan melalui komentar.

Terima kasih.