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? cara-cek-cls-core-web-vitals

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

ATAU

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