Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Seo

Cara Mengatasi Masalah CLS (Cumulative Layout Shift)

Oleh Seohel Posting Komentar
Web vitals inti adalah matriks yang digunakan untuk meningkatkan pengalaman pengguna situs web. Cumulative Layout Shift atau CLS juga salah satunya yang menunjukkan adanya pergeseran konten. Mulai pertengahan Juni 2021, data vital web inti juga akan menjadi faktor untuk hasil penelusuran. Dari situ, kita dapat mengatakan, CLS juga penting untuk SEO situs web. Artikel tutorial ini akan membahas tentang cara mengatasi masalah CLS (Cumulative Layout Shift) dan bagaimana pengaruhnya terhadap pengalaman pengguna. Anda juga dapat mempelajari cara menghilangkan CLS.

cara mengatasi masalah cls
Apa Itu Pergeseran Tata Letak Kumulatif?

Untuk mengatasi suatu masalah, kita harus memahami apa masalah sebenarnya. Seperti namanya Layout Shift, artinya ada yang bergeser.

Seperti yang sudah Anda ketahui, fokus Google selalu pada pengalaman pengguna. Itu sebabnya jika elemen bergeser dalam tata letak halaman dan merusak pengalaman pengguna. Google akan menghukum situs web tersebut melalui pembaruan vital web inti ini.

Cara Mengatasi Masalah CLS



Pada gambar di atas, Anda dapat melihat perubahan perilaku tata letak dalam masa pakainya. Awalnya, konten WordPress/Blogger muncul di dekat bagian atas, dan kemudian bergeser ke bawah.

Perubahan tata letak ini mungkin disebabkan oleh iklan atau gambar yang tidak dinyatakan dengan benar di file CSS halaman web. Untuk mengatasi masalah ini, pertama, kita harus memeriksa elemen yang menyebabkan masalah CLS.

Periksa Elemen Yang Menyebabkan Masalah CLS

Untuk memeriksa elemen yang menyebabkan masalah CLS, kami harus melakukan pengujian PageSpeed ​​Insights pada halaman web. Dan hasil pengujiannya akan terlihat seperti berikut ini.

Cara Mengatasi Masalah CLS



Dalam hasil di atas, Anda dapat memfilter hasil untuk masalah CLS dan kemudian menemukan opsi pergeseran tata letak besar. Di sini Anda dapat melihat elemen yang menyebabkan masalah CLS di halaman web. Anda dapat mencoba menentukan ukuran blok menggunakan CSS.

Bagaimana Pengaruhnya Terhadap Optimasi Mesin Pencari?

Pergeseran Tata Letak Kumulatif mengganggu pengalaman pengguna yang dapat menyebabkan peningkatan rasio pentalan atau Bounce Rate .

Selain itu, konsol pencarian Google menghitung total CLS halaman web selama masa pakainya. Data vital web ini secara langsung memengaruhi SEO halaman mulai pertengahan Juni 2021. Waktu untuk menghadirkan pengalaman halaman ke Google Penelusuran .

Data web inti terdiri dari cat konten terbesar, First Input Delay, Cumulative Layout Shift (CLS). Semua faktor ini akan diberlakukan sebagai faktor peringkat mesin pencari mulai pertengahan Juni 2021.

Seperti yang sudah Anda ketahui, pengalaman pengguna terbaik adalah salah satu bagian penting dari SEO halaman web.

Bagaimana Meningkatkan Skor Pergeseran Tata Letak Kumulatif?

Skor CLS bisa serendah 0 dan bisa sangat tinggi. CLS situs web dapat diperiksa dengan melakukan Tes Google Pagespeed Insights.

Skor CLS nol (0) berarti situs tersebut stabil. Skor ini harus mendekati 0. Jika skor meningkat, stabilitas menurun. Google mengkategorikan skor ini menjadi

Cara Mengatasi Masalah CLS




  • Praktik Terbaik – skor CLS 0 hingga 0,1,
  • Perlu perbaikan – Skor antara 0,1 dan 0,25,
  • Buruk – CLS di atas 0,25.
Jadi mari kita pahami bagaimana kita dapat mencapai skor CLS yang sangat rendah atau nol untuk situs web kita.

Tinggi Dan Lebar Setiap Item Gambar

Mungkin ada gambar atau media lain yang tersedia di situs web Anda yang mungkin menjadi penyebab tingginya skor CLS situs web. Untuk menghindari hal ini, Anda dapat menyatakan tinggi dan lebar setiap item media yang digunakan di situs web. Ini akan mencadangkan blok untuk item media tersebut dan tidak menyebabkan perubahan dalam tata letak total situs web.

Misalnya <img src="/image-url.png" alt="alternative text for image" title="title of the image" width="960px" height="360px" />

Contoh di atas memberi tahu Anda cara memuat gambar di halaman web dengan memesan blok 960x360px. Oleh karena itu tidak akan ada perubahan dalam struktur tata letak situs web.

Iklan Google Adsense Atau Konten Yang Disuntikkan Secara Dinamis Lainnya

Konten yang disuntikkan secara dinamis dapat membuat perubahan besar pada konten halaman web yang sudah dimuat. Misalnya, unit iklan Google Adsense di paruh atas menyebabkan masalah CLS karena unit iklan Adsense menyuntikkan konten dinamis dan menyebabkan perubahan besar dalam tata letak yang meningkatkan skor CLS situs web.

Anda memiliki dua opsi untuk mengatasi masalah ini, pertama sangat sederhana untuk menghindari konten dinamis seperti unit Iklan Adsense di bagian paruh atas. Dan yang kedua adalah, memesan ruang blok menggunakan CSS. Coba gunakan struktur berikut untuk unit iklan.

<style>
.sn_responsive_1 { width: 320px; height: 250px;}
@media(min-width:400px) {.sn_responsive_1 {width: 336px; height: 280px;}}
@media(min-width:1100px) {.sn_responsive_1 {width: 728px;height: 90px;}}
</style>

<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<ins class="adsbygoogle sn_responsive_1" style="display:inline-block" data-ad-client="ca-pub-XXXXXXXXXXX" data-ad-slot="XXXXXX"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Anda dapat mengganti kode di atas dengan unit iklan Adsense yang ada. Metode ini mengikuti kebijakan Adsense; oleh karena itu, Anda dapat menerapkannya. Untuk panduan terperinci, baca cara membuat iklan Adsense responsif menggunakan metode ini .

Jika situs web Anda memiliki lebih dari 10 ribu sesi per bulan, maka ada  peluang  Ezoic yang harus Anda coba . Ini dapat meningkatkan penghasilan Adsense sebesar 150 hingga 300%. Adsense memiliki monopoli atas iklan, Ezoic akan menyelesaikan dan meningkatkan penghasilan Adsense.

Google Adsense juga memperlambat situs web Anda dan dapat menyebabkan masalah LCP , ikuti metode ini untuk cara mempercepat loading iklan Adsense.

Font Web Menyebabkan Keterlambatan Visibilitas Halaman

Sebuah website yang menggunakan banyak gaya font akan selalu mendapatkan skor CLS yang tinggi. Ini karena waktu muat font dari server cloud. Untuk menghindari hal ini, seseorang dapat menggunakan properti font: display untuk font CSS.

Anda dapat menggunakan rel=preload di bagian header situs web untuk memuat font saat terhubung ke server sehingga font yang dimuat dapat menulis teks tanpa penundaan.

Misalkan Anda menggunakan keluarga Roboto dari font Google di situs web Anda. Anda dapat gunakan

<link rel="preconnect" href="https://fonts.gstatic.com">



@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Ini akan memungkinkan browser untuk menulis tata letak halaman sesegera mungkin.

Kesimpulan

Solusi di atas akan membantu Anda cara mengatasi masalah CLS (Cumulative Layout Shift). Ikuti semua langkah dengan benar, dan Anda tidak perlu mengikuti trik lainnya.

Jika Anda memiliki umpan balik, keraguan, atau pertanyaan, silakan tanyakan di bagian komentar yang disediakan di bawah ini. Terima kasih!

Posting Komentar untuk "Cara Mengatasi Masalah CLS (Cumulative Layout Shift)"

Posting Komentar