Apa Itu Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) adalah salah satu metrik dalam Core Web Vitals yang digunakan Google untuk menilai stabilitas visual sebuah halaman web.
Misalnya, ketika seorang pengguna mengklik tombol “Beli Sekarang,” tetapi tepat sebelum klik terjadi, elemen lain tiba-tiba berpindah dan menyebabkan pengguna mengklik sesuatu yang berbeda, hal ini dapat menciptakan pengalaman yang membingungkan dan mengurangi kepercayaan terhadap situs.
CLS mengukur seberapa sering elemen-elemen di halaman mengalami perubahan posisi yang tidak terduga saat loading.
Skor CLS yang tinggi dapat berdampak buruk pada pengalaman pengguna dan peringkat SEO website Anda.
Baca Juga: Apa itu Core Web Vitals
Mengapa Optimasi CLS Penting?
Optimasi CLS sangat penting karena berpengaruh langsung pada pengalaman pengguna dan peringkat SEO. Berikut beberapa alasan utama mengapa Anda harus memperhatikan CLS:
- Meningkatkan Pengalaman Pengguna: Pengguna lebih nyaman dengan halaman yang stabil dan tidak mengalami pergeseran elemen mendadak.
- Mengoptimalkan SEO: Google menggunakan CLS sebagai faktor peringkat, sehingga skor CLS yang baik dapat meningkatkan posisi website di hasil pencarian.
- Meningkatkan Konversi: Website yang lebih stabil cenderung memiliki tingkat konversi yang lebih baik karena pengguna tidak terganggu dengan pergeseran elemen.
Cara Mengukur CLS Website Anda
Sebelum melakukan optimasi, penting untuk mengetahui bagaimana cara mengukur CLS pada website. Berikut beberapa alat yang bisa Anda gunakan:
- Google PageSpeed Insights: Memberikan laporan lengkap tentang performa website, termasuk CLS.
- Lighthouse: Alat audit web dari Google yang bisa digunakan untuk menganalisis CLS secara mendetail.
- Chrome DevTools: Menyediakan fitur Layout Shift Regions yang membantu mengidentifikasi elemen yang menyebabkan pergeseran layout.
- Web Vitals Chrome Extension: Memudahkan Anda untuk melihat metrik Core Web Vitals secara langsung di browser.
Penyebab Utama CLS yang Tinggi
Beberapa faktor yang sering menyebabkan CLS tinggi di antaranya:
- Gambar Tanpa Dimensi: Misalnya, jika sebuah artikel menampilkan gambar produk tanpa menetapkan ukuran tertentu, teks di sekitarnya dapat berpindah ketika gambar akhirnya dimuat.
- Iklan yang Dimuat Secara Dinamis: Contohnya, situs berita yang menampilkan iklan di tengah artikel tanpa slot tetap bisa menyebabkan paragraf bergeser tiba-tiba.
- Font yang Dimuat Secara Lambat: Jika font utama belum dimuat dan browser sementara menggunakan font default, perubahan ukuran teks setelah font utama tersedia bisa menggeser tata letak.
- Elemen DOM yang Ditambahkan Terlambat: Misalnya, pop-up langganan yang muncul tanpa memperhitungkan tata letak halaman bisa menggeser konten.
- Video atau Embed yang Tidak Memiliki Placeholder: Jika sebuah situs menyisipkan video YouTube tanpa ukuran tetap, elemen di bawahnya bisa berpindah ketika video akhirnya muncul.
- Gambar Tanpa Dimensi: Gambar yang tidak memiliki atribut width dan height dapat menyebabkan pergeseran elemen saat loading.
- Iklan yang Dimuat Secara Dinamis: Iklan yang muncul tanpa reservasi ruang dapat menggeser konten lainnya.
- Font yang Dimuat Secara Lambat: Penggunaan font custom tanpa fallback dapat menyebabkan perubahan layout ketika font utama selesai dimuat.
- Elemen DOM yang Ditambahkan Terlambat: Elemen seperti pop-up atau banner yang dimuat terlambat dapat menyebabkan pergeseran layout.
- Video atau Embed yang Tidak Memiliki Placeholder: Elemen yang dimuat dari sumber eksternal tanpa dimensi tetap dapat mengubah tata letak halaman.
Strategi Optimasi CLS Website
Untuk mengurangi CLS dan meningkatkan stabilitas visual website Anda, berikut beberapa strategi yang bisa diterapkan:
1. Tetapkan Dimensi untuk Gambar dan Video
Pastikan setiap gambar dan video memiliki atribut width dan height.
Alternatif lainnya adalah menggunakan CSS aspect-ratio untuk memastikan ruang sudah tersedia sebelum konten dimuat.
img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
2. Gunakan Ruang Reserved untuk Iklan dan Embed
Jika website Anda menampilkan iklan, pastikan slot iklan memiliki tinggi dan lebar yang tetap agar tidak mengganggu tata letak konten utama.
3. Optimalkan Font Loading
Hindari perubahan besar pada layout saat font dimuat dengan menggunakan font-display: swap; pada file CSS:
@font-face {
font-family: ‘CustomFont’;
src: url(‘customfont.woff2’) format(‘woff2’);
font-display: swap;
}
4. Hindari Penambahan Elemen Secara Mendadak
Jika Anda perlu menambahkan elemen baru ke halaman, gunakan placeholder atau animasi yang halus agar tidak menyebabkan pergeseran mendadak.
5. Gunakan Lazy Loading dengan Bijak
Lazy loading sangat bermanfaat untuk meningkatkan kecepatan website, tetapi perlu diterapkan dengan hati-hati agar tidak menyebabkan perubahan layout yang signifikan.
6. Pastikan Animasi dan Transisi Halus
Gunakan animasi berbasis transform daripada width, height, atau position karena lebih ramah terhadap performa layout. Hal ini karena transform bekerja di level kompositing tanpa memicu reflow atau repaint, sehingga animasi lebih halus dan tidak membebani proses rendering halaman.
Sebaliknya, perubahan pada width, height, atau position dapat menyebabkan browser harus menghitung ulang tata letak elemen lain di halaman, yang berpotensi meningkatkan CLS.
.element {
transform: translateY(0);
transition: transform 0.3s ease-in-out;
}
Baca Juga: Apa itu LCP dan Cara Optimasinya
Bagaimana Cara Memeriksa Perbaikan CLS?
Setelah melakukan optimasi, Anda harus menguji kembali website untuk memastikan CLS telah berkurang.
Disarankan untuk melakukan pengujian secara berkala, misalnya setiap minggu atau setelah perubahan besar pada desain dan konten website, agar masalah CLS dapat terdeteksi dan diperbaiki dengan cepat. Berikut langkah-langkahnya:
- Gunakan Google PageSpeed Insights untuk melihat apakah skor CLS meningkat.
- Gunakan Chrome DevTools untuk menganalisis pergeseran layout secara real-time.
- Lakukan Tes pada Berbagai Perangkat untuk memastikan stabilitas pada semua ukuran layar.
Kesimpulan
Optimasi CLS sangat penting untuk meningkatkan pengalaman pengguna dan peringkat SEO website Anda.
Dengan menerapkan strategi seperti menetapkan dimensi untuk gambar dan video, menggunakan ruang reserved untuk iklan dan embed, serta mengoptimalkan font loading, Anda dapat mengurangi pergeseran tata letak yang tidak diinginkan.
Selain itu, memastikan animasi dan transisi yang halus menggunakan transform serta melakukan pengujian berkala akan membantu menjaga stabilitas visual website secara optimal.
Dengan memahami penyebab CLS dan menerapkan strategi optimasi yang tepat, Anda dapat membuat website lebih stabil, nyaman, dan responsif.
Gunakan alat seperti Google PageSpeed Insights dan Chrome DevTools untuk mengukur dan memantau perbaikan yang telah dilakukan. Dengan begitu, Anda bisa memastikan bahwa website Anda tidak hanya cepat tetapi juga stabil dan ramah pengguna.
Dengan memilih layanan SEO dari Adsind.id, Anda mendapatkan strategi yang disesuaikan dengan kebutuhan bisnis, analisis mendalam, dan eksekusi yang efektif untuk meningkatkan traffic organik.
Investasi dalam SEO yang terjangkau dari Adsind.id adalah solusi cerdas untuk bisnis yang ingin berkembang secara online dengan hasil maksimal.
