Digital Transformation
LCP Budget
TL;DR: LCP Budget adalah ambang Largest Contentful Paint yang disepakati tim sebelum sebuah halaman dirilis. Target standar Google adalah di bawah 2,5 detik pada perangkat seluler. Budget ini berfungsi sebagai gerbang rilis supaya elemen utama, seperti gambar hero atau judul, tampil sebelum pengguna merasa lambat.
Apa itu LCP Budget?
LCP Budget adalah angka maksimum Largest Contentful Paint yang boleh terjadi pada satu halaman. LCP mencatat waktu sampai elemen konten terbesar yang terlihat di viewport pertama muncul. Budget ini bekerja berdampingan dengan INP Budget dan ambang Cumulative Layout Shift, membentuk garis pertahanan performa tim sebelum data dipantau di CrUX Dataset.
Di proyek Vito Atmo, budget LCP halaman pilar biasanya dipasang pada 2,0 detik, sedangkan halaman utilitas pada 2,3 detik. Selisih 0,2 sampai 0,5 detik ini memberi tim ruang aman bila ada penambahan font, gambar, atau widget pihak ketiga sebelum melewati ambang publik Google.
Komponen LCP Budget
| Komponen | Aturan praktis |
|---|---|
| Gambar hero | Pakai Next.js Image LCP Budget dengan priority dan sizes tepat |
| TTFB server | Targetkan di bawah 600 ms melalui edge atau cache CDN |
| Font | Pakai font-display: optional, preload satu font utama saja |
| Skrip pihak ketiga | Tunda load sampai elemen utama tergambar |
Kenapa Penting?
Halaman dengan LCP di atas 2,5 detik dianggap kurang baik oleh Google Search dan berisiko menurunkan posisi konten di hasil pencarian. Bagi UMKM Indonesia yang banyak memakai jaringan seluler 4G dengan ping tidak stabil, LCP Budget menjaga konversi tetap terlindungi, terutama pada halaman penawaran dan landing. Dokumentasi web.dev tentang LCP menjelaskan elemen kandidat dan teknik prioritasi yang relevan untuk tim kecil.
Pertanyaan Umum
Apakah LCP Budget sama dengan target Google?
LCP Budget bersifat internal tim, sedangkan target Google adalah ambang publik yang dipakai untuk menilai sinyal pengalaman halaman. Budget biasanya lebih ketat agar tim punya ruang aman sebelum melewati ambang Google.
Bagaimana cara memantau LCP Budget?
Pantau lewat dashboard CrUX, PageSpeed Insights, dan log Real User Monitoring di proyek Next.js. Pasang gerbang otomatis di pipeline rilis supaya halaman gagal dirilis bila skor uji lab melewati budget yang ditetapkan.
Istilah Terkait