Digital Transformation
Core Web Vitals Budget
Performance budget berbasis Core Web Vitals yang menetapkan ambang LCP, INP, dan CLS sebelum fitur baru boleh masuk produksi.
TL;DR: Core Web Vitals Budget adalah aturan internal yang menetapkan batas maksimum LCP, INP, dan CLS untuk halaman bisnis sebelum kode baru di-merge. Tujuannya menjaga skor pengalaman pengguna tetap hijau seiring waktu, bukan hanya saat audit pertama.
Apa itu Core Web Vitals Budget?
Core Web Vitals Budget adalah komitmen tertulis di tim produk dan engineering tentang ambang batas tiga metrik Core Web Vitals: LCP di bawah 2,5 detik, INP di bawah 200 ms, dan CLS di bawah 0,1. Setiap pull request yang melampaui ambang tersebut otomatis ditolak oleh CI sebelum sampai ke produksi.
Dalam praktik di proyek Atmo dan Vetmo, budget bukan sekadar angka. Ia disertai daftar halaman prioritas yang diukur, alat pengukuran (Lighthouse CI atau real user monitoring), dan siapa yang bertanggung jawab kalau angka memburuk. Tanpa kepemilikan, budget hanya jadi wacana rapat.
Cara Menetapkan Budget yang Realistis
| Komponen | Cara Menentukan |
|---|---|
| Halaman target | Pilih 3-5 halaman dengan trafik dan revenue tertinggi |
| Sumber data | Gabungkan field data (CrUX) dan lab data (Lighthouse) |
| Ambang awal | Mulai dari skor saat ini, perbaiki bertahap 5-10 persen per kuartal |
| Konsekuensi | Block merge atau deploy kalau melampaui ambang |
Kenapa Penting?
Budget mencegah penurunan performa diam-diam akibat akumulasi script pihak ketiga, gambar besar, atau komponen baru yang berat. Untuk bisnis Indonesia yang banyak mengandalkan trafik mobile dengan koneksi tidak stabil, jaga LCP tetap di bawah 2,5 detik bisa berarti selisih konversi 5-15 persen. Budget memberi tim alasan kuat untuk menolak fitur yang tidak sebanding dengan biaya performanya.
Pertanyaan Umum
Apakah budget harus sama untuk semua halaman?
Tidak. Halaman checkout boleh lebih ketat daripada halaman blog karena pengaruhnya langsung ke konversi. Sesuaikan dengan dampak bisnis tiap halaman.
Bagaimana mengukurnya secara otomatis?
Gunakan Lighthouse CI di pipeline GitHub Actions atau alat real user monitoring seperti SpeedCurve, Vercel Speed Insights, atau Sentry Performance. Kombinasi keduanya memberi sinyal lab dan field secara bersamaan.
Istilah Terkait