Saat membuka sebuah website, tentu kita ingin menikmati halaman yang nyaman tanpa gangguan. Apalagi ketika sedang membaca artikel, mencari informasi, melihat produk, atau hendak menekan tombol tertentu, tampilan yang stabil membuat aktivitas terasa jauh lebih menyenangkan.
Sebaliknya, ketika halaman tiba-tiba bergeser, gambar muncul secara mendadak, tulisan berubah posisi, atau tombol berpindah saat kita hendak mengekliknya, pengalaman tersebut tentu terasa menjengkelkan.
Apa Itu Cumulative Layout Shift?
Cumulative Layout Shift mengukur stabilitas visual sebuah halaman. Metrik ini menghitung perpindahan elemen yang terjadi secara tidak terduga ketika pengguna melihat atau berinteraksi dengan halaman. Semakin sering elemen berpindah dan semakin jauh perpindahannya, semakin tinggi pula skor CLS. Sebaliknya, halaman dengan posisi elemen yang stabil cenderung menghasilkan skor yang lebih baik.
Penyebab Cumulative Layout Shift Tinggi
Gambar Tidak Memiliki Dimensi
Gambar tanpa atribut ukuran dapat membuat browser kesulitan menyediakan ruang sejak awal. Akibatnya, ketika gambar selesai dimuat, konten di sekitarnya dapat bergeser. Dengan cara tersebut, browser dapat menyediakan ruang sebelum gambar tampil.
Iklan dan Iframe Mengubah Ukuran
Selain gambar, iklan, video, iframe, dan elemen embed juga dapat memicu pergeseran. Misalnya, Anda menyediakan ruang kecil untuk iklan, tetapi jaringan iklan kemudian menampilkan materi dengan ukuran lebih besar. Untuk mengatasinya, tentukan ruang yang cukup sejak awal. Selanjutnya, pertahankan ukuran container agar konten lain tidak ikut terdorong ketika elemen tersebut muncul.
Font Mengubah Tampilan Teks
Font web juga dapat memicu CLS. Browser mungkin menampilkan font cadangan terlebih dahulu, kemudian menggantinya dengan font utama. Perbedaan ukuran karakter dapat mengubah tinggi baris dan posisi elemen di halaman.
Karena itu, pilih fallback font yang memiliki karakteristik serupa. Selain itu, Anda dapat mengoptimalkan pemuatan font dan mempertimbangkan penggunaan font-display sesuai kebutuhan.
Cara Perbaiki Cumulative Layout Shift
1. Tentukan Ukuran Elemen Visual
Pertama, berikan dimensi yang jelas pada gambar, video, iframe, dan elemen visual lainnya. Dengan begitu, browser langsung mengetahui ruang yang perlu disediakan. Teknik ini membantu menjaga ruang elemen tetap konsisten meskipun ukuran layar berubah.
2. Sediakan Ruang untuk Konten Dinamis
Selanjutnya, siapkan ruang untuk konten yang muncul setelah halaman mulai tampil. Banner, iklan, rekomendasi produk, dan notifikasi dapat menggeser konten apabila Anda memasukkannya tanpa perencanaan layout.
3. Hindari Menambahkan Konten di Atas Konten Utama
Kemudian, perhatikan elemen yang muncul secara dinamis di bagian atas viewport. Banner promosi, formulir, dan notifikasi dapat mendorong seluruh konten ke bawah. Jika Anda memang perlu menampilkan elemen tersebut, sediakan ruang sejak awal atau tampilkan elemen sebagai overlay ketika desain memungkinkan.
4. Optimalkan Penggunaan Font
Berikutnya, evaluasi font yang Anda gunakan. Kurangi variasi font dan bobot yang tidak perlu. Selain itu, gunakan fallback yang memiliki karakteristik ukuran serupa dengan font utama. Anda juga dapat melakukan preload terhadap font penting agar browser lebih cepat mengambil resource tersebut. Namun, tetap pertimbangkan kebutuhan pengguna dan jangan melakukan preload secara berlebihan.
Cara Mengecek Nilai CLS
Chrome DevTools menyediakan informasi mengenai elemen yang mengalami layout shift sehingga Anda dapat menelusuri sumber masalah secara lebih spesifik. Selain itu, data pengguna nyata dapat membantu menemukan masalah yang tidak selalu muncul ketika Anda melakukan pengujian sendiri.
Perlu Anda ingat, kondisi lingkungan pengujian dapat berbeda dengan pengalaman pengguna sebenarnya. Cache, koneksi, perangkat, iklan pihak ketiga, serta konten dinamis dapat menghasilkan perilaku yang berbeda. Oleh karena itu, kombinasikan pengujian laboratorium dengan data lapangan agar analisis semakin akurat.
Kesimpulan
Memahami cara perbaiki Cumulative Layout Shift membantu Anda menciptakan website yang lebih stabil, nyaman, dan mudah digunakan. Mulailah dengan menentukan dimensi gambar, menyediakan ruang untuk iklan dan iframe, mengoptimalkan font, serta menghindari penyisipan konten secara tiba-tiba.
Selanjutnya, lakukan pengujian secara berkala menggunakan berbagai tools performa agar Anda dapat menemukan masalah dengan lebih cepat. Jika Anda membutuhkan strategi SEO yang lebih komprehensif untuk meningkatkan performa website, Anda juga dapat mempertimbangkan jasa seo depok sebagai bagian dari upaya pengembangan website.
Jurusann Teknik Jaringan Komputer dan Telekomunikasi. Mempunyai minat di bidang desain. Dapat menyesuaikan diri saya dengan orang baru, lingkungan baru, dan mudah berbaur dengan orang baru. Mampu bertanggung jawab serta mampu menyelesaikan tugas dengan tepat waktu. Memiliki keinginan untuk terus berkembang dengan cara belajar hal-hal baru.
