Pernahkah kamu mendengar istilah CLS atau Cumulative Layout Shift? CLS merupakan salah satu metrik yang digunakan untuk menilai seberapa cepat pemuatan elemen yang ada di suatu halaman.
Metrik ini jadi salah satu bagian dari penilaian performa dari Core Web Vitals yang sangat mempengaruhi kinerja optimasi suatu website.
Sebelum mengetahui bagaimana cara meningkatkan CLS, yuk simak lebih dulu penjelasan tentang apa itu CLS, bagaimana cara mengukurnya dan bagaimana cara memperbaiki kesalahannya.
Simak penjelasan lengkapnya dalam artikel di bawah ini.
Baca Juga: Perbedaan No Index Tag dan Robots.txt dan Kapan Waktu Menggunakannya
Arti Cumulative Layout Shift (CLS)
Cumulative Layout Shift atau CLS adalah sebuah metrik yang digunakan untuk mengukur seberapa banyak elemen di halaman web bergerak selama pemuatan halaman. Dengan kata lain, CLS mengukur stabilitas elemen visual pada saat halaman dimuat.
Beberapa elemen yang berkaitan dengan CLS adalah media dalam website seperti gambar dan video, iFrame, iklan banner, sematan (embed), website font dan konten dinamis lainnya dalam website.
CLS melihat sejauh mana pergeseran elemen pada halaman web baik secara posisi atau ukuran sehingga menggeser elemen lain di sekitarnya. Misalnya, saat membaca artikel, tiba-tiba teks atau gambar berpindah-pindah, itulah yang diukur oleh CLS.
Halaman web yang visualnya tiba-tiba berpindah atau bergeser tentu dapat memberikan pengalaman pengguna yang buruk. Maka dari itu penting untuk segera memperbaiki masalah CLS agar pengguna bisa mengakses halaman tanpa gangguan.
CLS merupakan salah satu metrik penilaian core web vitals bersamaan dengan dua matriks lainnya, yaitu Largest Contentful Paint (LCP) dan First Input Delay (FID). Nilai CLS yang rendah menunjukkan bahwa halaman web memiliki stabilitas layout yang baik, begitupun sebaliknya.
Indikator dan Cara Mengukur CLS
CLS terdiri dari 2 faktor/indikator yang menilai seberapa jauh pergeseran layout yang ada. Kedua hal tersebut yaitu:
- Impact fraction: melihat seberapa besar pengaruh pergeseran elemen atau total area yang digunakan oleh elemen yang tidak stabil.
- Distance fraction: melihat seberapa jauh elemen bergerak atau bergeser dari posisi awalnya.
Lalu selanjutnya kedua indikator tersebut dikalikan untuk mengetahui skor CLS atau dengan rumus berikut:
Nilai CLS akhir = Impact fraction x Distance fraction
Jika elemen-elemen di halaman bergeser jauh atau sering, maka semakin tinggi nilai CLS pada halaman atau website tersebut.
Nilai CLS yang ideal adalah di bawah 0.1, sementara 0.1-0.25 adalah nilai yang wajar dan masih membutuhkan beberapa perbaikan. Sedangkan >0.25 menunjukkan nilai CLS yang buruk dan ada masalah yang perlu segera diperbaiki.
Lantas bagaimana cara mengetik lnilai CLS? Untuk mengukur CLS, ada beberapa tools yang bisa digunakan, diantaranya yaitu:
- PageSpeed Insights: Tools ini memberikan gambaran lengkap tentang kinerja halaman web, termasuk nilai CLS. Cukup dengan memasukkan URL suatu halaman, tools ini akan memberikan beberapa laporan terkait dengan performa hingga rekomendasi untuk perbaikan.
- Google Lighthouse: Sama seperti tools sebelumnya, tools ini juga bisa mengukur CLS dan performa website lainnya. Lighthouse memberikan data yang lebih rinci untuk para developer agar bisa lebih mudah memperbaiki masalah teknikal.
- Chrome DevTools: Tools ini digunakan untuk memantau dan menganalisis kinerja halaman web secara langsung, termasuk melacak masalah CLS saat pengujian dilakukan.
- Web Vitals Extension: Tools ini merupakan salah satu ekstensi untuk Chrome yang bisa kamu gunakan untuk melacak metrik Core Web Vitals seperti CLS secara real-time saat browsing.
Baca Juga: Apa itu Revamp Website? Manfaat dan Langkah Optimasinya
Cara Memperbaiki Masalah CLS
CLS jadi salah satu masalah performa website yang harus segera kamu tangani agar tidak memberikan user experience yang buruk. Berikut beberapa cara yang bisa kamu lakukan untuk menyelesaikan masalah CLS:
- Tetapkan Ukuran untuk Elemen Visual
Beberapa elemen seperti gambar, iklan, dan elemen video sering menjadi penyebab utama pergeseran layout.
Untuk menghindari ini, pastikan kamu menetapkan ukuran yang sesuai untuk elemen-elemen tersebut.
Mulai dari lebar dan tingginya serta pastikan bahwa ruang di halaman sudah sesuai untuk menempatkan elemen-elemen ini.
- Gunakan Font yang Tepat
Selain elemen visual, penggunaan font yang tidak tepat juga dapat menyebabkan pergeseran layout.
Misalnya, ketika font dimuat secara dinamis, teks mungkin bergeser. Untuk memperbaiki hal ini gunakan font preload untuk memastikan font yang dibutuhkan sudah dimuat terlebih dahulu.
Atur juga font fallback yang stabil agar tidak ada perubahan ukuran teks saat font dimuat.
- Gunakan CSS untuk Mengatur Posisi Elemen
Pastikan elemen-elemen yang berada di dalam halaman memiliki posisi yang sudah ditentukan dengan jelas, terutama untuk elemen yang akan dimuat setelah halaman pertama dimuat seperti iklan atau pop-up.
Kamu bisa menggunakan ‘position: relative’ atau ‘position: absolute’ untuk menghindari adanya elemen yang menggeser layout.
- Pilih Iklan dengan Hati-hati
Iklan adalah salah satu penyebab utama terjadinya masalah CLS, terutama ketika iklan ditampilkan secara dinamis atau bergerak setelah halaman dimuat.
Untuk mengurangi masalah ini, kamu bisa menetapkan ruang kosong yang cukup untuk iklan.
Serta gunakan iklan responsif agar penempatan iklan dapat menyesuaikan dengan ukuran layar tanpa menyebabkan pergeseran layout yang besar.
- Tunda Pemuatan Elemen yang Tidak Penting
Jika kamu menggunakan beberapa elemen yang tidak begitu penting seperti widget atau skrip tertentu. Pastikan untuk menunda pemuatannya agar tidak mengganggu kinerja halaman. Tahan pemuataan untuk elemen tersebut hingga konten utama telah dimuat seluruhnya dengan baik.
Sekian pembahasan mengenai apa itu CLS, apa saja indikator pengukurannya serta bagaimana cara memperbaiki masalahnya. CLS adalah salah satu metrik penting yang perlu kamu perhatikan agar memastikan websitemu bisa diakses tanpa gangguan.
Bagaimana apakah kamu sudah mampu menerapkannya di website yang kamu miliki? Jika belum, serahkan semuanya ke tim SEO Specialist Croloze.
Tim kami merupakan para profesional di bidang SEO yang sudah berpengalaman mengelola dan mengoptimasi berbagai website.
Optimalkan website dan strategi seo bisnis bersama SEO Agency dari Croloze! Dapatkan audit SEO gratis dan konsultasi langsung dengan tim ahli kami. Klik di sini untuk terhubung dengan Digital Marketing Agency Croloze.
Referensi:
- https://www.hostinger.co.id/tutorial/cumulative-layout-shift
- https://web.dev/articles/cls
- https://idwebhost.com/blog/cumulative-layout-shift-cls/
