Apa itu Cumulative Layout Shift? Dan bagaimana cara memperbaikinya?
Cumulative Layout Shift Pada tahun 2021, Pergeseran Tata Letak Kumulatif diperhitungkan dalam peringkat Google sebagai bagian dari pembaruan Data Web Inti dan Pengalaman Halaman Google. Anda dapat menghitung skor CLS menggunakan PageSpeed Insights dari Google.
Pergeseran Tata Letak Kumulatif menunjukkan ketidakstabilan dalam Tata Letak situs web, di mana skor yang lebih rendah berarti stabilitas yang lebih tinggi dan sebaliknya. Artikel ini akan menjelaskan cara memperbaiki masalah CLS di situs web Anda dan meningkatkan peringkat situs web Anda di hasil Google.
Salah satu aspek yang paling membuat frustrasi dari situs web yang tidak stabil adalah konten halaman berubah saat pengguna melihatnya. Di atas faktor gangguan, itu juga dapat menyebabkan perilaku yang tidak terduga. Terkadang efek pergeseran itu tidak berbahaya. Yang harus dilakukan pengguna adalah menemukan tempat mereka di halaman lagi untuk terus melihat.
Google sekarang menganggap vital web inti sebagai faktor peringkat, dan CLS adalah bagian darinya. Oleh karena itu, menstabilkan Layout tidak hanya akan meningkatkan skor PageSpeed Insights tetapi juga bermanfaat untuk SEO website.
Baca juga : Panduan Belajar SEO untuk Pemula
Situs web yang tidak stabil merusak pengalaman pengguna, dan untuk mengatasinya, Core Web Vitals Google masuk ke dalam sistem data vital web inti. Data vital web inti adalah kombinasi dari matriks yang digunakan untuk meningkatkan pengalaman pengguna, dan CLS adalah bagian darinya.
Dari pertengahan Juni 2021, data vital web inti ini sudah diperhitungkan dalam hasil penelusuran. Dari situ, kita dapat mengatakan bahwa CLS juga penting untuk SEO situs web. Dalam posting ini, kita akan membahas apa itu CLS dan bagaimana pengaruhnya terhadap pengalaman pengguna. Kami juga akan membahas cara menghilangkan CLS.
Apa itu Cumulative Layout Shift?
Skor Layout Shift kumulatif menunjukkan stabilitas situs web. Anda dapat menghitung skor CLS Anda menggunakan PageSpeed Insights dari Google. Alat akan menampilkan skor CLS, di mana skor Nol menunjukkan situs web yang sangat stabil dan skor yang lebih tinggi menunjukkan ketidakstabilan yang lebih tinggi.
Cumulative layout shift (CLS) atau diterjemahkan ke dalam bahasa Indonesia adalah Pergeseran Tata Letak Kumulatif ini menghitung proporsi area pandang yang terpengaruh oleh pergeseran tata letak dan jarak perpindahan elemen.
Cumulative layout shift adalah metrik Data Web Inti yang dihitung dengan menjumlahkan semua perubahan tata letak yang menyebabkan ukuran ketidakstabilan di situs web. Ukuran ini menentukan apakah situs web berperilaku seperti yang diharapkan pengguna.
Salah satu aspek yang paling membuat frustrasi dari situs web yang tidak stabil adalah bahwa konten halaman berubah saat pengguna melihatnya. Di atas faktor gangguan, itu juga dapat menyebabkan perilaku yang tidak terduga. Terkadang efek pergeseran itu tidak berbahaya. Yang harus dilakukan pengguna adalah menemukan tempat mereka di halaman lagi agar dapat terus dilihat.
Di lain waktu, efeknya bisa terasa lebih buruk. Misalnya, pengguna mungkin berharap untuk mengklik tombol atau tautan, tetapi sebelum mereka mencapai tautan atau tombol, elemen bergeser pada halaman saat mereka melakukannya.
Jika pengguna berharap untuk membatalkan pesanan, tetapi halaman bergeser saat mereka akan menekan BATAL, mereka mungkin akan mengklik ORDER SEKARANG. Mereka juga dapat mengklik iklan ketika mereka tidak menginginkannya karena perubahan tampilan.
Dengan begitu tindakan ini dapat membuat pengguna menjauh dari situs Anda, mereka mungkin memutuskan untuk tidak kembali. Jenis perilaku ini sangat membuat frustrasi pengguna. Tetapi sebagai pemilik situs web, itu dapat membuat klien potensial menjauh atau, lebih buruk lagi, membuat mereka menentang Anda.
Untuk memecahkan suatu masalah, kita harus memahami masalah yang sebenarnya. Seperti namanya, Layout Shift berarti ada sesuatu yang bergeser. Tata letak situs web tidak berperilaku seperti yang diharapkan oleh pengguna.
Seperti yang sudah Anda ketahui, fokus Google selalu pada pengalaman pengguna. Itu sebabnya Google akan menghukum situs web dengan skor CLS tinggi melalui pembaruan vital web inti ini.
Pada gambar di atas, Anda dapat melihat bagaimana perilaku tata letak berubah selama masa pakainya. Awalnya, konten Blogger muncul di dekat bagian atas, lalu bergeser ke bawah.
Perubahan tata letak ini mungkin disebabkan oleh iklan atau gambar yang tidak dinyatakan dengan benar di file CSS halaman web. Pertama, kita harus memeriksa elemen yang menyebabkan masalah CLS untuk menyelesaikan masalah ini.
Periksa elemen yang menyebabkan masalah CLS
Untuk memeriksa elemen yang menyebabkan masalah CLS, kami harus melakukan pengujian PageSpeed Insights di halaman web. Dan hasil pengujiannya akan terlihat seperti berikut ini.
Bagaimana CLS memengaruhi Pengoptimalan Mesin Pencari?
Data vital web inti sekarang memiliki dampak langsung pada posisi peringkat dalam hasil pencarian. Selain itu, Pergeseran Tata Letak Kumulatif mengganggu pengalaman pengguna, yang menyebabkan peningkatan rasio pentalan atau pogo-sticking.
Selain itu, konsol pencarian Google menghitung total CLS halaman web selama masa pakainya. Data web penting ini secara langsung memengaruhi SEO halaman mulai pertengahan Juni 2021. Waktu yang tepat untuk menghadirkan pengalaman halaman ke Google Penelusuran.
Data web inti terdiri dari cat konten terbesar, First Input Delay, Cumulative Layout Shift (CLS). Semua faktor tersebut akan diterapkan sebagai faktor peringkat mesin pencari sejak mulai pertengahan Juni 2021.
Seperti yang sudah Anda ketahui, pengalaman pengguna terbaik adalah salah satu bagian penting dari SEO halaman web. Selain itu, Anda dapat membaca postingan kami sebelumnya tentang SEO untuk Telepon Seluler.
Bagaimana Cara Meningkatkan Skor Cumulative layout shift?
Skor CLS bisa serendah 0 dan bisa sangat tinggi. CLS situs web dapat diperiksa dengan melakukan Google Pagespeed Insights Test. Skor CLS dibagi menurut skor mereka.
Berikut penjelasan mengenai Cumulative Layout Shift dari gambar di atas:
- GOOD – skor CLS 0 hingga 0,1,
- NEEDS IMPROVEMENT – Skor antara 0,1 dan 0,25,
- POOR – CLS di atas 0,25.
Jadi marilah kita memahami bagaimana kita dapat mencapai skor CLS yang sangat rendah atau nol untuk situs web kita.
Nyatakan tinggi dan lebar setiap item media
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 menentukan tinggi dan lebar setiap item media yang digunakan di situs web. Ini akan mencadangkan blok untuk item media tersebut dan tidak menyebabkan perubahan total Layoutf situs web.
Misalnya seperti pada kode berikut ini:
Contoh di atas memberi tahu Anda cara memuat gambar di halaman web dengan memesan blok 960x360px. Oleh karena itu tidak akan ada perubahan pada struktur layout website.
Iklan Google Adsense Menghasilkan Skor CLS Tinggi?
Konten yang disuntikkan secara dinamis dapat secara signifikan mengubah konten halaman web yang awalnya dimuat. Misalnya, unit iklan Google Adsense paruh atas menyebabkan masalah CLS karena unit iklan Adsense menyuntikkan konten dinamis dan menyebabkan perubahan besar dalam Tata Letak, 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 paro atas. Dan yang kedua adalah memesan ruang blok menggunakan CSS. Anda bisa mencoba menggunakan 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 bisa mengganti kode di atas yang saya beri tanda warna merah dengan unit iklan Adsense yang sudah ada. Metode ini mengikuti kebijakan Adsense; oleh karena itu, Anda dapat menerapkannya.
Jika situs web Anda memiliki lebih dari 10 ribu sesi per bulan, maka ada peluang Ezoic yang harus Anda coba. Itu dapat meningkatkan penghasilan Adsense sebesar 150 hingga 300%. Adsense memiliki monopoli atas iklan. Ezoic akan membuat penyelesaian dan meningkatkan penghasilan Adsense.
Google Adsense juga memperlambat situs web Anda dan dapat menyebabkan masalah LCP, ikuti metode ini untuk Memecahkan Masalah Adsense Memperlambat Kecepatan Situs Web.
Font Web menyebabkan keterlambatan visibilitas halaman
Situs web yang menggunakan banyak gaya font akan selalu mendapatkan skor CLS yang tinggi. Ini karena waktu muat font dari server cloud. Untuk menghindari ini, seseorang dapat menggunakan font:display di CSS untuk font.
Anda dapat menggunakan rel=preload di bagian header situs web untuk memuat font saat menghubungkan ke server sehingga font yang dimuat dapat melukis teks tanpa penundaan.
Misalkan Anda menggunakan jenis font Family Roboto dari font Google di situs web Anda. Anda dapat menggunakan kode berikut ini.
<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;
}
Fungsi dari kode di atas akan memungkinkan browser untuk melukis Layout halaman sesegera mungkin.
Kesimpulan
Artikel ini membahas Google CLS, bagaimana elemen yang berbeda menyebabkan masalah CLS, dan solusinya. Solusi di atas akan membantu Anda mendapatkan skor CLS nol. 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. Demikian posting kali tentang Apa itu Cumulative Layout Shift? Dan solusi untuk mengatasinya. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
Add Comment
comment url
