CLS (Cumulative Layout Shift) adalah salah satu metrik penting dalam Core Web Vitals (CWV) yang sering kali menjadi tantangan bagi pemilik situs web.
Pergeseran layout secara tiba-tiba membuat pengguna terganggu, bahkan bisa menyebabkan frustasi saat membaca konten.
Pengalaman buruk ini bukan hanya merugikan pengguna, tetapi juga menurunkan peringkat situs web di mesin pencari.
Banyak situs kehilangan pengunjung hanya karena tampilan konten yang tidak stabil dan navigasi yang terasa sulit.
Untuk mengatasinya, Anda bisa optimasi CLS secara efektif. Dengan memperbaiki faktor-faktor yang mempengaruhi CLS, teman-teman dapat meningkatkan pengalaman pengguna dan performa SEO secara signifikan.
Berikut ini panduan lengkap cara optimasi CLS untuk meningkatkan skor CWV.
Daftar Isi
Apa Itu Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) adalah metrik yang mengukur pergeseran tak terduga elemen-elemen dalam tampilan layar pengguna selama halaman dimuat.
Tujuannya adalah untuk mengetahui sejauh mana konten pada halaman berpindah-pindah tanpa peringatan.
Ketika elemen-elemen halaman bergeser tanpa diduga, hal itu dapat mengganggu kenyamanan pengguna dan menurunkan pengalaman mereka.
Contoh umumnya adalah saat pengguna hendak menekan tombol tertentu, seperti “Beli”, namun tombol tersebut tiba-tiba bergeser akibat iklan yang baru muncul, di mana hal ini bisa membuat pengguna salah klik.
CLS merupakan salah satu elemen dari tiga Core Web Vitals (CWV) yang diukur oleh Google untuk menilai pengalaman pengguna di sebuah situs web.
Selain CLS, ada juga metrik lain seperti Largest Contentful Paint (LCP) dan Interaction to Next Paint (INP) yang menilai responsivitas halaman.
Bagaimana Cara Mengukur CLS?
Untuk mengukur Cumulative Layout Shift (CLS) halaman situs web, Anda bisa pakai PageSpeed Insights dari Google atau tools berbayar lain.
Berikut adalah langkah-langkah sederhana cara cek skor CLS menggunakan PageSpeed Insights Google:
- Buka PageSpeed Insights: Kunjungi PageSpeed Insights dan masukkan URL halaman web yang ingin Anda analisis pada kolom pencarian yang tersedia
- Cari “Analyze”: Klik“Analyze” dan tunggu proses analisis. Setelah selesai, Anda akan melihat hasil skor CLS serta metrik lain yang berkaitan dengan Core Web Vitals
- Lihat saran di bagian “Diagnostics”: Gulir ke bawah ke bagian “Diagnostics” dan pilih filter “CLS” untuk mendapatkan rekomendasi mengenai bagaimana teman-teman dapat meningkatkan stabilitas visual halaman dan mengurangi pergeseran layout yang tak terduga
Tips: Ketika melakukan pengecekan, sebaiknya lakukan di mode penyamaran atau incognito mode untuk menghindari histori website dan ekstensi yang bisa mempengaruhi performa dari website Anda.
Berapa Skor CLS yang Bagus untuk SEO?
Skor CLS yang ideal adalah 0,1 atau lebih rendah, berdasarkan data Chrome User Experience Report (CrUX).
Apabila website ingin dikatakan stabil, maka 75% dari halaman harus memiliki skor CLS 0,1 atau kurang.
Berikut adalah klasifikasi skor CLS:
- Baik: ≤ 0,1
- Perlu Peningkatan: > 0,1 dan ≤ 0,25
- Buruk: > 0,25
Masalah Umum yang Membuat Skor CLS Buruk
Stabilitas visual halaman sangat penting untuk pengalaman pengguna yang baik.
Beberapa masalah umum sering kali menyebabkan skor CLS rendah dan mengganggu kenyamanan pengunjung saat halaman dimuat.
Berikut adalah beberapa masalah yang sering menyebabkan skor CLS buruk:
- Gambar tanpa dimensi: Gambar yang dimuat tanpa ukuran jelas menyebabkan pergeseran elemen di halaman saat dimuat. Hal ini terjadi karena browser tidak tahu berapa banyak ruang yang harus dialokasikan sampai halaman selesai dimuat
- Iklan, embed, dan iFrame tanpa dimensi: Elemen-elemen ini bisa mendorong konten lain saat dimuat, mengganggu pengalaman pengguna. Hal ini biasanya terjadi ketika Anda memakai iklan dari pihak ketiga
- Konten yang dimuat secara dinamis: Konten seperti banner atau widget yang muncul otomatis dapat menggeser elemen lain secara tak terduga dimana bisa mempengaruhi skor CLS
- Font web menyebabkan FOIT/FOUT: Pergantian font dari fallback ke font utama bisa memicu pergeseran layout, terutama jika ukuran berbeda
- Animasi yang tidak tepat: Penggunaan animasi CSS yang salah, seperti “box-shadow” atau “top,” dapat menyebabkan pergeseran tak terduga di halaman atau memicu tata letak ulang halaman
Bagaimana Cara Meningkatkan Skor CLS?
Memastikan halaman web memiliki skor CLS (Cumulative Layout Shift) yang baik akan meningkatkan pengalaman pengguna dan berpotensi meningkatkan peringkat di mesin pencari.
Berikut adalah beberapa cara efektif untuk memperbaiki skor CLS dan meningkatkan CWV.
1. Tentukan dimensi gambar
Menentukan dimensi gambar sangat penting untuk mencegah pergeseran layout yang mengganggu.
Saat dimensi ditetapkan, browser dapat mengalokasikan ruang sebelum gambar sepenuhnya dimuat, sehingga mengurangi perubahan posisi elemen lainnya.
Misalnya, tentukan atribut width dan height pada setiap gambar atau video di situs Anda. Dengan menentukan ukuran, elemen tidak akan tiba-tiba bergeser saat konten baru dimuat di sekitarnya.
Contohnya jika gambar banner berukuran 1200 x 400 piksel, silakan tambahkan kode berikut:
<img src=”banner.jpg” width=”1200″ height=”400″ alt=”Example banner image.”>
2. Gunakan kotak rasio aspek CSS
Menggunakan kotak rasio aspek dalam CSS membantu menjaga stabilitas layout saat konten berubah ukuran.
Teknik ini ideal untuk memastikan responsivitas dan menjaga proporsi konten saat tampil di perangkat berbeda.
Teman-teman bisa membuat kotak rasio aspek yang stabil untuk video dengan CSS, sehingga elemen tersebut tetap berada di area yang telah ditentukan tanpa menyebabkan pergeseran layout saat halaman dimuat.
Untuk membuat aspek rasio, Anda bisa memakai cara berikut:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-container iframe {
width: 100%;
height: 100%;
}
3. Siapkan ruang untuk dynamic content
Siapkan ruang khusus untuk konten dinamis seperti iklan atau banner agar tidak mendorong elemen lain saat dimuat.
Dengan mengatur placeholder yang sesuai, konten dinamis dapat dimuat tanpa mengganggu layout halaman.
Penting untuk menentukan ukuran placeholder yang akan menyesuaikan ukuran iklan atau konten dinamis lainnya.
Hal ini mencegah pergeseran tak terduga yang dapat merusak pengalaman pengguna di halaman. Berikan div ini sebuah ‘id’ atau ‘class’, contohnya sebagai berikut:
<div id=”ad-placeholder”></div>
Tempatkan div tersebut di bagian atas artikel dan gunakan css untuk menentukan dimensi dari placeholder tersebut.
Contoh iklan dengan ukuran 728 x 90 piksel, maka tambahkan css kode berikut:
#ad-placeholder {
width: 728px;
height: 75px;
background-color: #fffff;
}
4. Hindari menambahkan konten baru di existing content
Menambahkan konten baru di atas elemen yang sudah ada sering kali menyebabkan pergeseran layout.
Sebaiknya, tambahkan elemen baru di bagian halaman yang belum dilihat atau setelah interaksi pengguna.
Misalnya, daripada menempatkan banner promosi di atas konten yang sedang dilihat pengguna, tambahkan di area yang akan terlihat selanjutnya. Ini menghindari pergeseran tak terduga saat pengguna membaca.
5. Lakukan optimasi font
Gunakan metode preload untuk font penting dan atur font-display menjadi “optional” untuk mencegah teks tidak terlihat (FOIT) atau berganti gaya mendadak (FOUT).
Hal ini menjaga stabilitas layout saat font dimuat.
Dengan cara ini, font fallback akan ditampilkan jika font utama memerlukan waktu untuk dimuat, sehingga tampilan halaman tetap konsisten dan menghindari pergeseran tak terduga. Berikut contohnya:
<link rel=”preload” href=”https://example.com/fonts/mywebfont.woff2″ as=”font” type=”font/woff2″ crossorigin>
Pakai kode css berikut supaya teks tetap terlihat ketika font dimuat dan mencegah tata letak bergeser:
@font-face {
font-family: ‘MyWebFont’;
src: url(‘/mywebfont.woff2’) format(‘woff2’);
font-display: optional;
}
6. Gunakan properti transform CSS untuk animasi
Jika animasi menyebabkan skor CLS buruk, gunakan properti transform di CSS. Ini memungkinkan animasi berjalan tanpa menyebabkan pergeseran layout yang tak diinginkan, seperti perubahan ukuran atau posisi elemen.
Anda bisa mengatur animasi elemen dengan transform: scale() atau transform: translate() alih-alih mengubah properti posisi atau ukuran lainnya.
Cara ini membantu mempertahankan layout yang stabil di halaman.
Tingkatkan CWV Website dengan Optimasi CLS yang Efektif
Mengoptimalkan CLS sangat penting untuk memastikan pengguna merasa nyaman saat mengakses situs web teman-teman.
Saat konten tampil stabil tanpa pergeseran yang mengganggu, pengguna cenderung bertahan lebih lama sehingga berdampak positif pada peringkat SEO dan tingkat konversi.
Dengan menerapkan langkah-langkah sederhana, seperti menetapkan dimensi pada gambar, menyiapkan ruang untuk iklan, dan menggunakan properti transformasi CSS untuk animasi, teman-teman dapat mengurangi skor CLS dan meningkatkan Core Web Vitals secara keseluruhan.
Jadi, jangan tunggu lagi! Mulailah optimasi CLS pada situs Anda untuk pengalaman pengguna yang lebih baik dan kinerja SEO yang optimal.
Siap untuk langkah selanjutnya? Yuk, optimasi CLS untuk meningkatkan Core Web Vitals website Anda dan raih hasil yang lebih maksimal!
Jika teman-teman ingin memahami lebih jauh tentang Cumulative Layout Shift dan mencari wadah untuk berdiskusi mengenai SEO lebih dalam serta topik digital marketing lainnya, gabunglah dengan grup Telegram DailySEO ID.
Di sana, Anda bisa bertukar pikiran dan belajar bersama dengan praktisi SEO lainnya.
Selain itu, daftarlah untuk kelas intermediate SEO jika Anda ingin mengasah kemampuan lebih dalam, di sini.
Untuk pemula yang ingin mendalami dasar-dasar SEO, langsung saja masuk waiting list SEO Fundamental Course DailySEO ID dengan mengunjungi halaman ini!
References:
Cumulative Layout Shift: What It Is & How to Improve Your Score
