Cumulative Layout Shift (CLS) adalah salah satu dari tiga metrik inti dari Core Web Vitals yang digunakan oleh Google untuk mengukur pengalaman pengguna di situs web Anda. CLS mengukur sejauh mana tampilan halaman web berubah saat dimuat, dan ini dapat memengaruhi peringkat pencarian Anda. Jika Anda telah menerima laporan masalah CLS di Google Search Console, Anda harus segera mengatasi masalah ini untuk meningkatkan pengalaman pengguna dan peringkat situs web Anda. Berikut adalah beberapa langkah untuk mengatasi masalah CLS:
1. Identifikasi Penyebab CLS
Pertama-tama, Anda perlu mengidentifikasi apa yang menyebabkan CLS di situs web Anda. Penyebab umum CLS adalah gambar yang dimuat lambat, elemen yang bergeser saat dimuat, atau skrip yang memblokir tampilan halaman. Gunakan alat pemantauan performa web seperti Google PageSpeed Insights atau Lighthouse untuk mengidentifikasi sumber CLS.
2. Optimalisasi Gambar
Gambar yang belum diatur ukuran dan kompresi yang baik dapat menjadi penyebab CLS. Pastikan untuk mengoptimalkan gambar-gambar di situs Anda agar mereka dimuat dengan cepat. Gunakan format gambar yang tepat seperti WebP, sesuaikan ukuran gambar dengan elemen halaman, dan gunakan atribut width dan height untuk menghindari pergeseran saat dimuat.
Jika penyebabnya karena gambar, atau iframe kamu hanya perlu manambahkan attribute width dan height pada element-element tersebut.
Untuk gambar contoh kode HTMLnya seperti ini :
<img src="https://example.com/image.png" alt="Image" width="300" height="200">
Iframe
<iframe src="https://example.com/" width="300" height="200"></iframe>
3. Hindari Penempatan Dinamis Konten
Jika ada elemen halaman web yang ditambahkan secara dinamis, pastikan mereka memiliki ruang yang diatur sebelum dimuat. Ini akan menghindari pergeseran yang tidak diinginkan saat halaman dimuat. Pastikan juga bahwa elemen dinamis dimuat secara asinkron untuk mengurangi dampaknya terhadap pengalaman pengguna.
4. Prioritaskan Muatan Dasar
Pastikan bahwa konten inti halaman web, seperti teks dan gambar, dimuat secepat mungkin. Ini akan mengurangi waktu tampilan elemen penting dan mengurangi risiko CLS yang signifikan.
5. Hapus Skrip yang Memengaruhi Tampilan Halaman
Skrip JavaScript yang memblokir rendering halaman dapat menyebabkan pergeseran yang tidak diinginkan. Identifikasi skrip yang tidak diperlukan atau yang dapat dimuat secara asinkron. Pastikan untuk mengoptimalkan penggunaan skrip pada situs Anda.
6. Gunakan Layanan CDN
Menggunakan Content Delivery Network (CDN) dapat membantu mempercepat pengiriman konten situs Anda kepada pengguna dari lokasi server terdekat, mengurangi pergeseran yang mungkin terjadi karena jarak geografis.
7. Periksa Pembaruan Regular
Periksa secara berkala laporan CLS di Google Search Console dan pastikan untuk memonitor perubahan. Tindakan perbaikan yang diambil harus diperiksa secara berkala untuk memastikan bahwa CLS tetap terkendali.
Mengatasi masalah CLS memerlukan perhatian khusus terhadap performa situs web Anda dan pengalaman pengguna. Dengan mengikuti langkah-langkah di atas, Anda dapat meningkatkan peringkat pencarian Anda dan memberikan pengalaman yang lebih baik kepada pengunjung situs web Anda.
8. Gunakan Praperendering
Praperendering adalah teknik di mana Anda dapat memuat halaman berikutnya yang mungkin akan diakses pengguna sebelum mereka benar-benar mengkliknya. Ini mengurangi waktu pemuatan saat pengguna berpindah halaman dan mengurangi kemungkinan CLS. Namun, perlu hati-hati dalam mengimplementasikan teknik ini, karena dapat memakan sumber daya server.
9. Uji Situs di Berbagai Perangkat dan Browser
Pastikan bahwa situs Anda menampilkan konsistensi dan stabilitas pada berbagai perangkat dan browser. Hal ini akan membantu Anda mengidentifikasi masalah CLS yang mungkin hanya muncul pada platform tertentu.
10. Monitor dan Tinjau Secara Berkala
Terus pantau performa situs Anda dengan alat pemantauan performa web, dan tinjau laporan CLS di Google Search Console secara berkala. Hal ini akan membantu Anda memastikan bahwa perbaikan yang telah Anda terapkan efektif dan tidak munculnya masalah CLS baru.
11. Jaga Kualitas Konten dan User Experience
Selain faktor teknis, pastikan bahwa konten situs Anda informatif, relevan, dan bermanfaat bagi pengguna. Pengalaman pengguna yang baik dan konten berkualitas juga berkontribusi pada peringkat pencarian dan dapat membantu mengurangi tingkat pembengkokan tampilan halaman.
12. Cari Bantuan dari Ahli
Jika Anda kesulitan mengatasi masalah CLS atau mengidentifikasi penyebabnya, pertimbangkan untuk berkonsultasi dengan seorang ahli SEO atau pengembang web. Mereka dapat memberikan panduan lebih lanjut dan solusi yang sesuai dengan situasi Anda.
Kesimpulan:
Mengatasi masalah CLS di Google Search Console adalah langkah penting untuk meningkatkan peringkat pencarian dan pengalaman pengguna pada situs web Anda. Dengan mengidentifikasi penyebab CLS dan mengikuti langkah-langkah perbaikan yang tepat, Anda dapat mengurangi pergeseran tampilan halaman web dan meningkatkan performa situs Anda secara keseluruhan. Jangan lupa untuk terus memantau performa situs Anda dan beradaptasi dengan perubahan yang mungkin terjadi di masa depan