Mengatasi CLS Error Search Console (Cumulative Layout Shift)
Dalam kesempatan kali ini guru blogger akan membahas sedikit terkait error core web vitals di bagian CLS (Cumulative Layout Shift)
Nhaaa makanan apa itu?
Seperti telah saya bahas di banyak kesempatan, bahwa yang menjadi tolok ukur blog di era 2021 adalah performance
Kalau performa web buruk, bisa janjian dulu dengan pengacara karena google akan menghukum dengan penalty algorithm
Tidak ada yang tau bagaimana sebuah web terkena penalty algorithm, yang jelas web perlahan hilang dari halaman 1 google
Mau?

Standar Performa Blog
Sudah lama sebenarnya isu ini digembar gemborkan oleh google agar kita selalu menggunakan lighthouse (cikal bakal web.dev) untuk mengecheck check performa blog
Dan setelah perubahan nama dari webmaster tools menjadi google search console, sepertinya google memang tidak main main
Ini bukan false signal, betul betul dijalankan oleh google
Untuk melihat performa blog secara keseluruhan (termasuk error cls) silahkan kunjungi web.dev
Bagaimana hasilnya? apakah sama dengan gurublogger.id?
Biasanya saya selalu tidak puas dengan score dibawah 99,
Tapi apalah daya saya harus memasang banner group facebook agar blogspot indonesia bisa berkembang
Pilihan !!
-->Back to the topic
Terkait cls, penyebab utamanya adalah javascript dan kode css modifikasi
bisa dari template bawaan, atau bisa juga dari script yang teman teman inject kedalam blog
Bila dirasa masalahnya berasal dari template, saya pernah menulis artikel tentang kapan harus ganti template, bisa di cek di GANTI TEMPLATE BLOG
Suhu : Sek talah pak guru, CLS itu apaaaaa?
Guru Blogger : Oiya lupa
CLS : Cumulative Layout Shift
Pengertian CLS (Cumulative Layout Shift) adalah pergeseran elemen yang tidak diharapkan pada sebuah website dalam kondisi website belum ter load 100% (masih loading).
Eleman elamen yang bisa menjadi penyebab diantaranya adalah : font, gambar, video, form, div, script iklan, dll
Fungsi meminimalisir terjadinya cls adalah untuk kenyamanan pengunjung
Contoh, Salah klik gara gara element ordernya sedikit bergeser

Nha, itulah mengapa meminimalisir terjadinya CLS sangat penting
Saya rasa teman teman blogger sering mengalami hal itu, itulah yang dinamakan CLS
Suhu : Trus skor saya lebih dari 0,25 itu maksudnya apa?
Guru Blogger : Memang ada rumusnya kok !!
Score CLS
Rumus untuk menghitung besarnya cls adalah
impact fraction X distance fraction

Dari contoh diatas maka besarnya CLS adalah 75% X 25% = 0,75 X 0,25 = 0.1875
Suhu : Pak guru kita ini bukan mau jadi programmer, kita ini cuma mau jadi blogger.... hitung hitungan tidak penting, solusinya gimana?
Guru Blogger : Betul juga, ngapain belajar cls :D
Cara Mengatasi CLS Error di Search Console
Berdasarkan ilustrasi diatas, seharusnya teman teman sudah memiliki bayangan cara mengatasi masalah cls error di GSC (Google Search Console)
Silahkan cek blog masing masing dan sebelum loading selesai 100% coba klik atau scroll
Bila ada elemen yang bergerak, maka disitulah masalahnya
Akan saya berikan ilustrasi CLS yang terjadi di blog guru blogger

Ketika di reload, font berubah ukurannya sehingga jarak font pun berbeda
Itulah contoh cls (cumulative layout shift) pada font
Untuk saya pribadi, karena score cls blogg gurublogger.id sangat rendah jadi akan saya biarkan saja (PR untuk masa yang akan datang)
Score cls yang tinggi biasanya datang dari elemen elemen yang besar (luasnya bukan volumenya) diantaranya adalah :
CLS di Gambar dan Video
Bila di blog teman teman ada elemen gambar atau video yang bergeser
Maka untuk mengatasi caranya silahkan definisikan lebar dan tinggi gambar seperti ini
<img data-original-height="205" data-original-width="720" src="https://gurublogger.id/gambarku.jpg" />
ATAU
<img height="205" width="720" src="https://gurublogger.id/gambarku.jpg" />
Intinya deklarasikan ukuran tinggi gambar dan lebar gambar
Fungsinya adalah agar browser mengenali dimensi gambar, sehingga tidak diterjemahkan sebagai CLS
Suhu : Gambarnya sudah saya kasih dimensi tapi tetap saja bergerak
Guru Blogger : Mungkin masalahnya adalah elemen parent dari gambar, coba cek div nya
Suhu : Caranya gimana?
Guru Blogger : Sepertinya lebih efisien ganti template deh daripada buang buang waktu mencari div yang salah dalam kondisi tidak mengerti css
Suhu : Jahat !!!
CLS Pada Elemen
Pada Div, Span, dan elemen html lainnya cls bisa terjadi apabila lebar atau tinggi parent elemen mengikuti child elemen untuk dynamic content
Nha, disini teman teman harus men set gimana caranya agar waktu loading awal si child bisa lebar 100% atau tinggi 100%
Misalkan dengan membuat child elemen overflow secara sengaja, dll
Suhu : Aduh pusing saya pak guru, apa itu
Guru Blogger : Kita kan cuma blogger, yang bikin pusing delete saja :D
CLS Karena Iklan Adsense
Script ads juga terkadang membuat halaman kita memiliki cls score yang tinggi
Suhu : Ngga usah pasang adsense maksudnya? lha saya makan apa?
Guru Blogger : (*%$#@ Ga usah sensitip dong huu, pikir panjaaaaang .... di adsense kan ada pilihan ukuran ads yang ingin ditampilkan
Atau mungkin disitu bukan tempat yang bagus untuk meletakkan iklan, bisa dicoba di atas, dikanan dikiri, atau ditempat lain
CLS Karena Sticky Elemen
Bisa juga yang menyebabkan tingginya cls score adalah sticky elemen
Apa sih sticky? silahkan scroll artikel ini di komputer kemudian ada logo facebook dan jempol yang tidak ikut ter scroll ! nha itu dinamakan sticky element
Suhu : Ok deh, trus solusinya gimana?
Guru Blogger : Coba dilepas dulu stickynya kemudian tes di web.dev apakah berubah scorenya
Kalau iya, bisa jadi sticky lah penyebabnya
Suhu : Trus buang gitu maksudnya kalau penyebabnya adalah sticky?
Guru Blogger : Ya itu pilihan
Kesimpulan:
Terkait CLS Score yang tinggi, hanya teman teman sendirilah yang tau penyebabnya apa
Karena setiap blog adalah personal, empunya blog telah memodifikasi sesuai selera
Jadi apa yang salah? jangan tanyakan pada orang lain.... cek sendiri dan pecahkan sendiri
Suhu : Kok gitu?
Guru Blogger : Karena kalau minta bantuan saya.... saya cuma blogger, terkadang sih berurusan dengan script, tapi bawaannya pusiiiing mulu kalau inspect element :D
Saya mau jadi blogger ajah.... :D becanda suhu....mari silahkan diisi komennya
Semangat kawan, stay positif dan perbanyaklah tersenyum :D
Selamat Belajar