Cumulative Content Shift (CLS): Definisi, Skor, dan Lainnya
Cumulative Layout Shift (CLS) bukanlah sekadar istilah teknis yang rumit; hal ini mencerminkan stabilitas tata letak halaman web selama proses pemuatan, sehingga dapat mencegah pergeseran konten yang mengganggu dan tak terduga.
Dalam artikel ini, kami akan mengulas definisi CLS, mekanisme penilaian, strategi yang paling efektif untuk optimalisasi, dan bagaimana Anda dapat memastikan kinerjanya melalui audit situs dengan Sequence Stats. Mari kita mulai!
Apa itu Cumulative Layout Shift (CLS)?
Cumulative Layout Shift, sering disingkat sebagai CLS, adalah salah satu Core Web Vitalsyang diperkenalkan oleh Google untuk menilai dan meningkatkan pengalaman pengguna di web. CLS mengukur stabilitas visual halaman web saat dimuat. Ini mengukur sejauh mana pergeseran konten halaman terjadi secara tak terduga selama proses pemuatan.
Pergeseran ini dapat disebabkan oleh elemen seperti gambar, iklan, atau konten yang dimasukkan secara dinamis yang memengaruhi tata letak.
CLS sangat penting karena memengaruhi langsung pengalaman pengguna. Ketika konten tiba-tiba berpindah posisi, hal ini dapat menyebabkan klik yang tidak diinginkan, gangguan dalam membaca, atau frustrasi selama penjelajahan, yang mengakibatkan pengalaman pengguna menjadi buruk.
Google dan mesin pencari lainnya sekarang mempertimbangkan CLS sebagai metrik kunci untuk menilai kualitas pengalaman pengguna situs web.
Bagaimana CLS Dinilai?
CLS diukur menggunakan sistem penilaian yang mencerminkan tingkat pergeseran tata letak pada halaman web. Skor dihitung dengan mengalikan fraksi dampak dan fraksi jarak, yang didefinisikan sebagai berikut:
- Fraksi Dampak: Ini mewakili proporsi viewport (bagian terlihat dari halaman web) yang terpengaruh oleh pergeseran tata letak. Dengan kata lain, ini mengukur seberapa besar area terlihat halaman yang terlibat dalam pergeseran.
- Fraksi Jarak: Ini mengukur sejauh mana elemen-elemen yang tergeser bergerak. Fraksi ini menghitung jarak maksimum (dalam piksel) antara posisi awal dan akhir elemen-elemen ini.
Skor CLS dihitung secara terus-menerus saat halaman dimuat, dan skor akhir adalah jumlah dari semua skor individu selama waktu tertentu. Tujuannya adalah menjaga skor CLS sebisa mungkin mendekati nol, menandakan tata letak halaman yang stabil dan ramah pengguna.
Berikut adalah perhitungan skor CLS yang dilihat dalam laporan:
1. Skor CLS Baik
Skor CLS dikategorikan "baik" jika mewakili nilai di bawah 0.1. Ini berarti halaman web sangat stabil selama proses pemuatan, dan pengguna mengalami pergeseran konten yang minimal hingga hampir tidak ada.
Dari segi pengalaman pengguna, skor CLS yang baik memastikan bahwa pengunjung dapat membaca dan berinteraksi dengan konten tanpa gangguan, menciptakan pengalaman menjelajah yang menyenangkan.
Dari perspektif SEO, skor CLS yang baik dapat berdampak positif pada peringkat mesin pencari situs. Mesin pencari memprioritaskan pengalaman pengguna, dan tata letak yang stabil berkontribusi pada kepuasan pengguna yang lebih tinggi.
2. Skor CLS Perlu Ditingkatkan
Skor CLS "perlu perbaikan" biasanya berkisar antara 0.1 hingga 0.25. Meskipun tidak buruk, ini menunjukkan bahwa masih ada ruang untuk meningkatkan stabilitas tata letak selama proses pemuatan halaman.
Pengguna mungkin mengalami beberapa pergeseran konten, yang dapat sedikit mengganggu namun umumnya dapat diatasi. Namun, mengatasi skor ini dapat membawa pengalaman yang lebih baik.
Dari segi SEO, skor CLS dalam kisaran ini menunjukkan bahwa pengalaman pengguna situs web Anda bisa lebih kompetitif. Meningkatkan CLS dapat membantu Anda unggul dalam peringkat mesin pencari.
3. Skor CLS Buruk
Skor CLS kategori "buruk" melebihi 0.25, menunjukkan pergeseran konten yang signifikan dan mengganggu selama proses pemuatan halaman. Pengguna sering merasa terganggu oleh perpindahan elemen yang terjadi. Pergeseran konten yang tiba-tiba dapat menyebabkan klik yang tidak diinginkan, berkurangnya keterlibatan pengguna, dan pengalaman secara keseluruhan yang negatif.
Dampak SEO untuk skor CLS yang buruk dapat sangat serius. Mesin pencari bertujuan untuk memberikan pengalaman pengguna terbaik, dan skor CLS yang buruk dapat mengakibatkan penurunan peringkat dalam hasil pencarian dan berkurangnya lalu lintas organik.
Mengoptimalkan Cumulative Layout Shift (CLS)
Mengoptimalkan Cumulative Layout Shift (CLS) adalah hal yang penting untuk menciptakan pengalaman web yang stabil dan ramah pengguna. Berikut adalah penjelasan tentang setiap strategi yang digunakan untuk meningkatkan skor CLS:
1. Identifikasi Sumber Pergeseran
Untuk mengoptimalkan CLS, penting untuk mengidentifikasi elemen-elemen yang menyebabkan pergeseran tata letak. Pergeseran ini dapat disebabkan oleh gambar, video, iklan, atau konten yang dimasukkan secara dinamis.
Gunakan alat web dev browser dan alat pemantauan kinerja web untuk mengidentifikasi elemen-elemen bermasalah ini.
Setelah Anda mengidentifikasi masalahnya, Anda dapat membangun strategi untuk mengatasi masing-masing masalah pergeseran tata letak.
2. Tentukan Dimensi Gambar dan Video
Banyak pergeseran tata letak dipicu oleh gambar dan video yang tidak memiliki dimensi yang telah ditentukan dalam HTML. Hal ini membuat browser mengalokasikan ruang untuk elemen-elemen ini, sehingga menyebabkan pergeseran saat mereka dimuat.
Untuk mengoptimalkan CLS, tentukan atribut lebar dan tinggi dalam HTML untuk semua gambar dan video. Langkah ini dapat mengalokasikan ruang yang diperlukan untuk elemen-elemen tersebut, mencegah pergeseran konten saat mereka dimuat.
3. Tentukan Lebar dan Tinggi Iklan Banner
Iklan banner, terutama jika disajikan dari sumber eksternal, dapat berkontribusi pada pergeseran tata letak. Iklan ini sering dimuat secara asinkron, dan dimensinya mungkin tidak diketahui sebelumnya.
Untuk menangani masalah CLS, pastikan iklan banner memiliki atribut lebar dan tinggi yang telah ditentukan dalam HTML. Jika memungkinkan, silakan bekerja sama dengan penyedia iklan untuk menyampaikan iklan dengan dimensi yang ditentukan.
4. Tinjau Konten yang Dimasukkan Secara Dinamis
Konten yang dimasukkan secara dinamis, seperti pop-up, widget obrolan, atau widget media sosial, bisa menjadi sumber pergeseran tata letak. Konten ini sering dimuat setelah proses render halaman awal dan dapat mendorong konten yang sudah ada ke bawah atau ke samping.
Untuk mengoptimalkan CLS, tinjau implementasi konten yang dimasukkan secara dinamis. Pastikan bahwa konten ini tidak mengganggu tata letak yang ada secara berlebihan.
5. Lakukan Audit Situs
Setelah melakukan optimasi, Anda perlu memastikan bahwa skor CLS meningkat. Untuk melakukannya, Anda dapat melakukan audit situs menggunakan Sequence Stats dan melihat apakah skor CLS sudah cukup baik.
Buka Audit Situs Sequence Stats dan atur audit untuk domain yang Anda inginkan. Selanjutnya, sistem akan memberikan hasil secara otomatis.
 |
|---|
| Gambar 1 - Audit Situs di Sequence Stats menggunakan Lighthouse. |
Dengan mengatasi masalah ini, Anda dapat mengurangi pergeseran tata letak kumulatif pada situs web Anda, memberikan pengalaman menjelajah yang lebih stabil dan ramah pengguna.
Hal ini, pada akhirnya tidak hanya meningkatkan kepuasan pengguna tetapi juga dapat berdampak positif pada kinerja SEO situs web Anda, karena mesin pencari memberikan prioritas pada pengalaman pengguna dalam algoritma mereka.