Pergeseran Tata Letak Kumulatif (CLS)

Apa yang dimaksud dengan Pergeseran Tata Letak Kumulatif (CLS)?

Cumulative Layout Shift (CLS) adalah metrik Core Web Vitals yang dikembangkan oleh Google untuk mengukur stabilitas visual halaman web. Metrik ini mengukur total semua pergeseran tata letak tak terduga yang terjadi selama masa pakai halaman. Pergeseran tata letak terjadi ketika elemen yang terlihat mengubah posisinya dari satu frame yang dirender ke frame berikutnya.

Bagaimana CLS Diukur

Skor CLS berkisar dari 0, yang menunjukkan tidak ada pergeseran, hingga nilai di atas 0 yang mengindikasikan tingkat ketidakstabilan yang berbeda-beda. Formula ini mempertimbangkan fraksi dampak dan fraksi jarak dari setiap pergeseran, menghitung seberapa banyak elemen bergerak dan seberapa banyak viewport yang dicakupnya.

Interpretasi Skor CLS

• Baik: 0 - 0,1
• Perlu Perbaikan: 0.1 - 0.25
• Buruk: Di atas 0,25

Mengapa CLS Penting?

CLS sangat penting untuk pengalaman pengguna karena perubahan tata letak yang tidak terduga dapat menyebabkan frustrasi pengguna. Misalnya, jika pengguna akan mengklik sebuah tombol dan tata letaknya bergeser, menyebabkan mereka mengklik sesuatu yang lain secara tidak sengaja, hal ini dapat menyebabkan pengalaman pengguna yang buruk dan potensi kehilangan konversi.

Penyebab Umum CLS yang Buruk

1. Gambar Tanpa Dimensi:

   • Menyertakan gambar dalam HTML Anda tanpa menentukan lebar dan tingginya dapat menyebabkan pergeseran tata letak karena browser tidak tahu berapa banyak ruang yang harus dialokasikan pada awalnya.

2. Iklan, Embed, dan Iframe Tanpa Dimensi:

   • Semua elemen ini dapat memuat secara dinamis dan menyebabkan pergeseran tata-letak jika dimensinya tidak ditentukan sebelumnya.

3. Konten yang Disuntikkan Secara Dinamis:

   • Menambahkan konten di atas konten yang sudah ada di DOM dapat mendorong elemen ke bawah, sehingga menyebabkan pergeseran.

4. Font Web yang Menyebabkan FOIT/FOUT:

   • Flash of Invisible Text (FOIT) dan Flash of Unstyled Text (FOUT) dapat menyebabkan pergeseran tata letak saat browser memuat font web.

Praktik Terbaik untuk Meminimalkan CLS

1. Sertakan Atribut Ukuran pada Gambar dan Video:

   • Selalu tentukan lebar dan tinggi gambar dan video dalam HTML untuk mencadangkan ruang dalam tata letak sebelum dimuat.

2. Mencadangkan Ruang untuk Iklan dan Sematan:

   • Gunakan CSS untuk mengatur dimensi untuk slot iklan, iframe, dan embed untuk menghindari pergeseran tata letak saat dimuat.

3. Hindari Menyuntikkan Konten Secara Dinamis di Atas Konten yang Sudah Ada:

   • Tambahkan konten baru di bawah lipatan atau di dalam wadah yang sudah memiliki ruang yang sudah dipesan.

4. Gunakan Strategi Pemuatan Font:

   • Memanfaatkan properti CSS font-display untuk mengontrol bagaimana font web ditampilkan dan meminimalkan pergeseran karena FOIT/FOUT.

5. Gunakan Transformasi CSS untuk Animasi:

   • Gunakan properti transform alih-alih atas, bawah, kiri, atau kanan untuk menganimasikan elemen tanpa menyebabkan pergeseran tata letak.

Kesimpulan

Pergeseran Tata Letak Kumulatif (CLS) adalah metrik penting dalam memastikan pengalaman pengguna yang stabil dan menarik secara visual. Dengan memahami faktor-faktor yang berkontribusi pada pergeseran tata letak dan menerapkan praktik terbaik untuk meminimalkannya, Anda dapat meningkatkan skor CLS halaman web Anda dan meningkatkan kepuasan pengguna secara keseluruhan.

Untuk informasi lebih lanjut tentang cara meningkatkan CLS dan Core Web Vitals lainnya, pertimbangkan untuk menjelajahi dokumentasi Web Vitals Google.