Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatasi Masalah CLS di Google Search Console

Mengatasi Masalah CLS Data Web Inti di Google Search Console

Hari ini saya menerima laporan di Google Search Console bahwa ada masalah CLS pada Data Web Inti. Apa itu dan bagaimana cara mengatasinya?

Fitur Data Web inti (Core Web Vitals) adalah sebuah fitur baru di Google Search Console. Sementara ini yang saya tahu, Data Web Inti akan memeriksa faktor CLS (Cumulative Layout Shift) dan LCP (Largest Contentful Paint) dari sebuah situs web.

Dalam tulisan ini saya akan lebih fokus pada cara menyelesaikan masalah CLS dahulu. Jika ada kesempatan, saya akan coba ulas mengenai LCP pada artikel berikutnya.

Apa itu CLS?


Cumulative Layout Shift (CLS) adalah metrik yang penting dan berpusat pada pengguna untuk mengukur stabilitas visual. Metrik ini akan mengukur seberapa sering pengunjung situs mengalami perubahan tata letak yang tidak terduga.

CLS menghitung jumlah total dari semua nilai pergeseran tata letak individu (individual layout shift scores) untuk setiap perubahan tata letak yang tidak terduga selama halaman dibuka.

Sederhananya, pernahkah kamu mengunjungi sebuah situs web dan ketika halaman di-scroll tiba-tiba layout atau tampilan berubah? Yang sering ditemui, ketika laman di-scroll muncul iklan secara tiba-tiba di beberapa elemen halaman.

Perubahan layout atau tata letak yang tiba-tiba ini kadang bisa sangat menjengkelkan karena membuat kita mengklik sesuatu yang terkadang tidak ingin kita buka.

Contoh nyata dari kasus tersebut bisa dilihat pada gambar ilustrasi berikut ini:


Pergerakan konten halaman ini biasanya terjadi karena file sumber dimuat secara 'asynchronously' atau elemen DOM ditambahkan secara dinamis ke halaman yang ada.

Objeknya mungkin berupa gambar atau video dengan ukuran yang tidak ditentukan, font yang di-render lebih besar atau lebih kecil dari seharusnya, atau iklan pihak ketiga yang secara dinamis bisa mengubah ukurannya sendiri (iklan responsive).

Dari laporan yang didapat di salah satu situs dengan masalah CLS, penyebabnya mungkin karena saya menggunakan script LazyLoad.

Seperti diketahui, script LazyLoad akan mengambil file sumber secara tidak sinkron (asynchronously) dan baru ditampilkan setelah keseluruhan elemen situs di-load dengan sempurna.

Mudahnya, dengan script LazyLoad maka iklan baru akan muncul setelah semua konten situs di-load sepenuhnya oleh browser. Hal ini sebenarnya sangat bagus karena akan mengurangi sumber daya memory dan mempercepat loading sebuah situs.

Tapi memang, kelemahan dari script semacam ini, elemen situs kadang bisa berubah total akibat adanya iklan, gambar, atau video yang 'nongol' tiba-tiba.

Dan disinilah CLS memegang peranan penting dalam menentukan apakah sebuah situs tersebut menyenangkan untuk dikunjungi atau tidak.

Berapa skor CLS yang baik?


Untuk memberikan pengalaman terbaik bagi pengguna, sebuah situs harus memiliki skor CLS kurang dari 0,1 baik di perangkat seluler maupun desktop.

Cumulative Layout Shift Scores

Cara mengatasi masalah CLS


Untuk mengatasi masalah CLS, kamu harus menghindari semua perubahan tata letak yang tidak terduga dengan cara:
  1. Pastikan kamu sudah mengatur atribut ukuran pada gambar atau video di semua halaman situs. Tapi kamu juga bisa menggunakan fitur unsized-media untuk memaksa web browser menampilkan elemen seperti ini.
  2. Jangan memasukkan konten baru di atas konten yang sudah ada, kecuali sebagai respon terhadap interaksi pengguna.
  3. Jangan gunakan efek transisi animasi secara berlebihan yang membuat berpindahnya sebuah elemen situs ke bagian lain.

Kamu juga bisa membaca cara mengoptimalkan CLS secara lebih mendalam di sini:
https://web.dev/optimize-cls/

3 komentar untuk "Mengatasi Masalah CLS di Google Search Console"

  1. Jadi lazyadsense di APUS aja apa gan?

    BalasHapus
    Balasan
    1. Jika ingin memperbaiki masalah CLS, lazy adsense atau lazy image bisa dihapus. Meskipun tidak dihapus pun sebenarnya tidak apa. Bahkan script di blog ini juga masih dipertahankankan .

      Hapus
  2. saya malah pasang lazy adsense dan lazy image bisa ngilangin error cls :D

    BalasHapus