Digital Transformation
CLS Budget
Batas atas Cumulative Layout Shift yang disepakati tim sebelum rilis. Tools CI menolak deploy jika CLS halaman melebihi anggaran ini.
TL;DR: CLS Budget adalah ambang Cumulative Layout Shift maksimum yang ditetapkan tim sebelum suatu halaman boleh dirilis ke produksi. Anggaran umum: CLS di bawah 0,1 untuk lulus Core Web Vitals, dengan target internal lebih ketat (0,05) untuk halaman konversi tinggi.
Apa itu CLS Budget?
CLS Budget adalah praktik menetapkan target CLS sebagai bagian dari Core Web Vitals Budget yang dipantau di pipeline CI/CD. Ketika halaman diuji oleh Lighthouse atau WebPageTest, skor CLS dibandingkan dengan anggaran. Jika lebih buruk, build gagal dan deploy tertahan.
Ibarat anggaran belanja iklan, anggaran CLS memaksa tim disiplin: setiap penambahan banner, modal, atau widget harus dihitung dampak shift-nya sebelum dirilis.
Cara Menetapkan CLS Budget
| Tipe Halaman | Anggaran CLS | Alasan |
|---|---|---|
| Landing page konversi | <= 0,05 | Setiap shift bisa menyebabkan misclick di tombol CTA |
| Artikel atau blog | <= 0,1 | Threshold standar Core Web Vitals |
| Halaman e-commerce produk | <= 0,08 | Lazy-loaded image grid sering jadi sumber shift |
| Halaman dashboard internal | <= 0,15 | Toleransi lebih besar karena bukan halaman SEO |
Pasang anggaran ini di Lighthouse CI atau Calibre, lalu blokir deploy jika threshold dilanggar.
Kenapa Penting?
CLS adalah satu satunya metrik Core Web Vitals yang paling sering regress diam diam. Tim marketing Indonesia sering menambah pop-up promo atau widget sosial proof yang muncul setelah halaman selesai dimuat, yang langsung membuat layout bergeser dan menambah skor CLS. Tanpa anggaran formal, regresi ini baru ketahuan saat traffic organik turun. Praktik standar di industri menunjukkan bahwa tim yang menjalankan CLS budget di CI mengalami 40-60 persen lebih sedikit insiden Web Vitals di production.
Pertanyaan Umum
Bagaimana mengukur CLS untuk pengguna nyata, bukan lab?
Pakai Real User Monitoring yang mengirim data web-vitals dari browser pengguna. Bandingkan p75 CLS dari RUM dengan anggaran lab.
Apakah anggaran CLS bisa beda per device?
Bisa dan disarankan. Mobile sering lebih rentan shift karena viewport sempit. Tetapkan anggaran terpisah untuk mobile vs desktop di tools seperti Calibre atau SpeedCurve.
Istilah Terkait