Cumulative Layout Shift (CLS)
Mencegah konten meloncat saat image, font, banner, atau data async masuk ke halaman.
Tujuan belajar
- Menjelaskan dampak layout shift bagi user
- Mengenali penyebab umum CLS pada UI frontend
- Memilih cara menyediakan ruang untuk konten yang datang kemudian
- Membedakan perubahan layout akibat action user dari shift yang tidak diharapkan
Isi lesson
6 blok- 1.Halaman yang bergerak tanpa persetujuan user merusak kepercayaanBelum selesaiWajib
- 2.Cadangkan ruang sebelum image tersediaBelum selesaiWajib
- 3.Writing practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Tidak semua perubahan layout adalah masalah CLSBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Halaman yang bergerak tanpa persetujuan user merusak kepercayaan
WajibCumulative Layout Shift atau CLS mengukur stabilitas visual ketika element berpindah tanpa diduga. Bayangkan learner hendak menekan Mulai practice, lalu hero image tanpa dimensi selesai dimuat dan mendorong tombol ke bawah. Selain terasa tidak rapi, user dapat menekan control yang salah. Penyebab umum meliputi image atau embed tanpa ruang yang dicadangkan, font yang mengubah ukuran teks setelah dimuat, banner yang disisipkan di atas konten, dan data async yang menggantikan placeholder dengan tinggi sangat berbeda. Target panduan CLS adalah 0.1 atau kurang, tetapi tujuan engineering-nya adalah menjaga posisi action penting dapat diprediksi.
Bagian ini memengaruhi progres lesson.
Cadangkan ruang sebelum image tersedia
Wajib<img
src="/course-hero.webp"
alt="Preview course Frontend Engineering"
width="1200"
height="675"
/>Dimensi memberi browser informasi rasio area sebelum file image selesai dimuat. Dalam layout responsive, CSS masih dapat mengatur ukuran tampilannya. Intinya bukan angka ini saja, melainkan bahwa ruang visual untuk resource yang datang belakangan sudah direncanakan.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Sebuah halaman course menampilkan skeleton kecil, lalu setelah data datang judul dua baris, description panjang, dan CTA mendorong daftar lesson jauh ke bawah. Tulis diagnosis CLS singkat: jelaskan apa yang terasa bagi user, penyebab layout yang mungkin, bagaimana kamu akan menyesuaikan placeholder atau ruang layout, dan apa yang akan kamu ukur setelahnya.
Tulis draft dulu sebelum menandai writing practice selesai.
0/240 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Perubahan mana yang paling langsung membantu mencegah CLS pada image di viewport awal?
Progres lesson naik setelah jawaban benar.
Catatan penting
WajibTidak semua perubahan layout adalah masalah CLS
Perubahan yang memang dipicu action user, seperti membuka accordion setelah click, dapat diharapkan bila feedbacknya jelas. Fokus diagnosis CLS adalah perubahan yang mengejutkan user saat halaman memuat atau ketika resource masuk tanpa interaction yang menjelaskannya.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- CLS menangkap perpindahan layout yang tidak diharapkan.
- Image, embed, font, banner, dan content async dapat menyebabkan shift bila ruangnya tidak dipersiapkan.
- Cadangkan ruang berdasarkan struktur final yang realistis.
- Nilai stabilitas dari sudut action dan posisi baca user, bukan dari angka semata.
- Berikutnya, Lighthouse dan data lapangan akan membantu memilih bukti yang tepat untuk diagnosis.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Halaman yang bergerak tanpa persetujuan user merusak kepercayaan.