Masalah CLS: lebih dari 0,25 (seluler) | Ini Cara Mengatasinya
Advertisement
Penawaran Terbatas! Paket Data 25GB Hanya Rp 90.000
Dapatkan kuota besar 25GB untuk semua nomor AS, Loop, dan simPATI hanya dengan Rp 90.000, berlaku selama 30 hari! Internet lancar tanpa khawatir kehabisan kuota, cocok untuk streaming, gaming, dan browsing sepuasnya!
Aktifkan sekarang dan nikmati kebebasan internet!
Read More Beli Paket
Advertisement
Masalah CLS: lebih dari 0,25 (seluler) Armaila temukan pertama sekali saat membuka webmaster tools, tepatnya dibagian Pengalaman Halaman - Sinyal pengalaman halaman - Data Web Inti dengan tambahan info "URL dengan status Buruk atau Perlu peningkatan di laporan Data Web Inti ditandai sebagai Gagal dalam laporan Pengalaman Halaman. Status URL dihitung berdasarkan jadwal waktu yang berbeda di du laporan ini, sehingga status Pengalaman Halaman mungkin tidak mencerminkan status Data Web Inti saat ini untuk URL tertentu."
Data Web Inti > Mobile
Dibagian sini akan terlihat url yang bermasalah yang salah satu masalahnya adalah "Masalah CLS: lebih dari 0,25 (seluler)". Tetapi ada info tambahan untuk jenis permasalahan yang selalu muncul:
Jenis masalah adalah status dari berbagai pengukuran:
LCP (largest contentful paint): Berapa lama waktu yang dibutuhkan untuk merender elemen terbesar yang terlihat
FID (penundaan input pertama): Berapa lama waktu yang dibutuhkan halaman untuk mulai merespons tindakan pengguna
CLS (cumulative layout shift): Jumlah pergeseran UI halaman selama pemuatan halaman.
Masalah kecepatan ditetapkan secara terpisah untuk pengguna desktop dan seluler.
Masalah CLS: lebih dari 0,25 (seluler)
Nah, untuk permasalahan Armaila temukan sendiri adalah tentang "Masalah CLS: lebih dari 0,25 (seluler)". Artinya kita harus mengecek kendala atau sumber permasalahan tersebut.
Cara Mengatasi Masalah CLS: lebih dari 0 25 Seluler
Klik link/url yang bermasalah sehingga muncul beberapa contoh url yang bermasalah. Kali ini saya akan fokus kepada salah url yang bermasalah yaitu: https://www.armaila.com/2019/01/sholawat-assalamualaik-zainal-anbiya-lirik-arab.html
Hasil dari pengecekan "PAGESPEED INSIGHTS" memberikan data Mobile terkhusus pada bagian CLS seperti berikut ini:
DIAGNOSTIK
Elemen gambar tidak memiliki width dan height yang jelas
Setel lebar dan tinggi yang jelas pada elemen gambar untuk mengurangi pergeseran tata letak dan memperbaiki CLS
Salah satu bagian yang bermasalah adalah banner "PAKET INTERNET SOCIETY TELKOMSEL" dan kita akan tunjukkan cara mengatasi permasalahan untuk yang tersebut.
Elemen gambar tidak memiliki width dan height yang jelas
"PAGESPEED INSIGHTS" telah memberikan apa tindakan yang perlu dilakukan untuk menyelesaikan permasalahan CLS: lebih dari 0,25 (seluler) ini yaitu dengan menambahkan informasi width dan height yang jelas pada kode html.
Berikut ini adalah kode HTML sebelum diperbaiki
<a href="https://www.armaila.com/p/society-telkomsel.html" target="_blank" >
<img border="0" alt="PAKET INTERNET SOCIETY TELKOMSEL" title="PAKET INTERNET SOCIETY TELKOMSEL" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdWzKv_tOY72HYbIFk57kQwRaYlZnW9zp-ZWx7UuQLAYSBMFCGBzLa93y2n0TZHGqTN6beezkVzUPLB9kT58kTXyzI4eyoa5pMToNuyrRAmo4ZHLyk2Oqy9-2KYBA0oRA0VO6zC7GRLgY/s16000/society+telkomsel+armaila.com.jpg"/></a>
Dan Ini adalah kode HTML setelah diperbaiki width dan height banner iklan tersebut.
<a href="https://www.armaila.com/p/society-telkomsel.html" target="_blank" >
<img height="313px" width="100%" border="0" alt="PAKET INTERNET SOCIETY TELKOMSEL" title="PAKET INTERNET SOCIETY TELKOMSEL" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdWzKv_tOY72HYbIFk57kQwRaYlZnW9zp-ZWx7UuQLAYSBMFCGBzLa93y2n0TZHGqTN6beezkVzUPLB9kT58kTXyzI4eyoa5pMToNuyrRAmo4ZHLyk2Oqy9-2KYBA0oRA0VO6zC7GRLgY/s16000/society+telkomsel+armaila.com.jpg"/></a>
Setelah selesai diperbaiki. Silahkan cek kembali menggunakan "PAGESPEED INSIGHTS" diatas. Jika berhasil maka pesan kesalahan CLS untuk "PAKET INTERNET SOCIETY TELKOMSEL" tidak akan muncul lagi.
Jika dengan cara tersebut selesai maka silahkan lakukan hal yang sama untuk kode lainnya yang bermasalah.
Selamat mencoba dan semoga berhasil.
Advertisement
