Digital Transformation
Layout Shift Source
TL;DR: Layout Shift Source adalah element spesifik yang menjadi penyebab pergeseran tata letak halaman. API PerformanceObserver mengembalikan daftar element ini lewat properti sources, sehingga developer dapat mengidentifikasi banner, iklan, atau gambar mana yang merusak skor CLS, alih-alih menebak.
Apa itu Layout Shift Source?
Saat browser mengukur Cumulative Layout Shift (CLS), setiap pergeseran disertai metadata sources yang menunjukkan element pemicu, ukuran, dan posisi sebelum dan sesudah pergeseran. Properti ini bagian dari Layout Instability API yang didukung Chromium. Tanpa sources, tim hanya tahu skor CLS tinggi tapi tidak tahu element mana yang harus diperbaiki. Untuk konteks dasar, lihat CLS budget yang menjelaskan ambang batas skor yang sehat.
Cara Membacanya
| Field | Arti |
|---|---|
| node | Element DOM pemicu pergeseran |
| previousRect | Posisi element sebelum bergeser |
| currentRect | Posisi element setelah bergeser |
| value | Kontribusi element terhadap skor CLS halaman |
Kenapa Penting?
Untuk website bisnis Indonesia yang banyak memuat banner promosi, slot iklan, dan gambar produk, Layout Shift Source mengubah pekerjaan optimasi dari spekulatif jadi terukur. Berdasarkan praktik di proyek client, sebagian besar masalah CLS ternyata datang dari 1-2 element saja: banner promo tanpa dimensi tetap atau slot iklan yang dimuat lambat. Begitu element tersebut ditambahkan width/height eksplisit atau diberi placeholder, skor CLS turun drastis. Kombinasikan dengan RUM supaya tim mendapat data dari pengguna nyata, bukan hanya lab test.
Pertanyaan Umum
Apakah Layout Shift Source tersedia di semua browser?
Saat ini didukung Chromium-based (Chrome, Edge). Safari dan Firefox belum menyediakan properti sources, sehingga RUM perlu fallback ke skor CLS tanpa breakdown.
Apakah pergeseran karena interaksi user dihitung?
Tidak. Pergeseran dalam jendela 500 ms setelah input user dianggap intentional dan tidak masuk skor CLS halaman.
Istilah Terkait