Digital Transformation
Layout Shift
TL;DR: Layout shift adalah pergeseran posisi elemen halaman secara tiba-tiba saat halaman sedang dimuat, misalnya tombol yang lompat ketika gambar atau iklan muncul. Pergeseran ini diukur oleh metrik CLS dalam Core Web Vitals, dan skor baik adalah di bawah 0,1.
Pengalaman yang menjengkelkan ini pasti pernah dialami: kita hendak menekan tombol, tapi tepat saat jari menyentuh layar, kontennya bergeser dan kita malah mengklik hal lain. Itulah layout shift, dan Google menghitungnya sebagai sinyal kualitas pengalaman pengguna.
Apa itu Layout Shift?
Layout shift terjadi ketika elemen visual berpindah posisi tanpa interaksi dari pengguna, biasanya karena aset yang dimuat belakangan mendorong konten lain. Akumulasi pergeseran ini diukur oleh Cumulative Layout Shift (CLS), salah satu dari tiga metrik Core Web Vitals. Skor dihitung dari seberapa besar area yang bergeser dikalikan jarak pergeserannya.
Penyebab Umum dan Solusinya
| Penyebab | Solusi |
|---|---|
| Gambar tanpa dimensi | Tetapkan width dan height, gunakan responsive images |
| Font yang berganti saat dimuat | Pakai font-display dan preload font penting |
| Iklan atau embed dinamis | Sediakan ruang cadangan (reserve space) |
| Konten disuntikkan di atas konten lain | Hindari menyisipkan elemen di atas yang sudah terlihat |
Menetapkan dimensi gambar adalah perbaikan paling cepat dan paling sering saya pakai saat menurunkan CLS sebuah halaman.
Kenapa Penting?
CLS yang buruk membuat pengguna salah klik, frustrasi, dan lebih cepat meninggalkan halaman. Bagi website bisnis, ini berarti kehilangan calon pembeli pada momen paling kritis. Karena CLS adalah faktor peringkat sejak 2021, memperbaikinya menguntungkan dari sisi pengalaman sekaligus SEO. Panduan teknis lengkap tersedia di web.dev tentang CLS.
Pertanyaan Umum
Berapa skor CLS yang dianggap baik?
Di bawah 0,1 dianggap baik, 0,1 sampai 0,25 perlu perbaikan, dan di atas 0,25 buruk.
Apa cara tercepat menurunkan layout shift?
Tetapkan atribut width dan height pada semua gambar dan video agar browser memesan ruang sebelum aset selesai dimuat.
Istilah Terkait