Digital Transformation
CLS Trigger Source
TL;DR: CLS Trigger Source adalah informasi tambahan dari Web Vitals Attribution yang mengidentifikasi elemen atau aksi penyebab pergeseran tata letak (Cumulative Layout Shift) pada halaman web. Dengan data ini, developer dapat memperbaiki layout shift secara presisi tanpa menebak-nebak.
Apa itu CLS Trigger Source?
CLS Trigger Source adalah label kontekstual yang dilampirkan oleh library web-vitals attribution build saat mereka melaporkan metrik CLS (Cumulative Layout Shift). Label ini menyebut sumber penyebab, misalnya font swap, image tanpa dimensi, iklan, atau injeksi DOM dari script pihak ketiga.
Analoginya: kalau CLS adalah angka skor gempa, trigger source adalah peta titik episentrumnya. Tanpa trigger source, developer cuma tahu halaman bergeser 0,25 poin, tidak tahu apa penyebabnya.
Jenis Trigger Source Umum
| Trigger | Penyebab |
|---|---|
image-element | <img> tanpa width/height eksplisit |
iframe-element | Iframe (embed YouTube, Maps) tanpa reservasi tinggi |
font-change | Web font swap setelah render awal |
injected-content | Script pihak ketiga inject DOM |
animation | Transisi CSS yang menggeser elemen |
Kenapa Penting?
Untuk marketer Indonesia yang mengelola landing page, CLS Trigger Source memangkas waktu debug performa dari berjam-jam menjadi menit. Di proyek Atmo dan Vetmo, atribut ini membantu tim menemukan bahwa ikon sosial yang lazy-load tanpa reservasi adalah penyebab utama CLS, bukan font seperti yang awalnya disangka.
Pertanyaan Umum
Apakah CLS Trigger Source otomatis aktif?
Tidak. Anda perlu memakai build attribution dari library web-vitals (web-vitals/attribution), bukan build standar.
Bagaimana cara membaca trigger source di RUM?
Kirim field attribution.largestShiftSource ke endpoint analitik Anda, lalu kelompokkan agar terlihat penyebab dominan.
Istilah Terkait