Digital Transformation
LCP (Largest Contentful Paint)
TL;DR: LCP (Largest Contentful Paint) adalah salah satu dari tiga metrik Core Web Vitals yang mengukur kapan elemen konten terbesar di viewport selesai dirender. Skor baik versi Google: di bawah 2,5 detik untuk 75 persen kunjungan pengguna nyata.
Apa itu LCP?
LCP mencatat waktu sejak halaman mulai dimuat sampai elemen konten paling besar yang terlihat di viewport selesai digambar. Elemen yang dihitung biasanya adalah hero image, video poster, atau blok teks utama. Berbeda dengan First Contentful Paint yang mengukur piksel pertama, LCP fokus pada elemen yang paling dipersepsikan pengguna sebagai "halaman sudah jadi".
Analoginya, LCP adalah momen ketika pengunjung restoran melihat menu utamanya terbuka di meja, bukan saat lampu pertama menyala. Dari pengalaman menangani performa di proyek client, halaman dengan hero image tanpa optimasi sering mencatat LCP di kisaran 3,5 sampai 5 detik di koneksi 4G Indonesia.
Cara Kerja LCP
| Aspek | Detail |
|---|---|
| Elemen yang dihitung | <img>, <image> di SVG, <video> poster, background image via CSS, blok teks |
| Threshold Google | Baik di bawah 2,5 detik, perlu perbaikan 2,5 sampai 4 detik, buruk di atas 4 detik |
| Pengukuran | Browser pengguna nyata via CrUX dan RUM atau lab via Lighthouse |
| Pengaruh ranking | Faktor ranking Google sejak update Page Experience 2021 |
LCP dihitung berdasarkan elemen terbesar yang berubah selama loading. Browser akan mencatat kandidat baru jika elemen yang lebih besar muncul, sampai pengguna berinteraksi dengan halaman.
Kenapa Penting?
LCP adalah proxy paling akurat untuk persepsi kecepatan halaman. Untuk website bisnis Indonesia yang sebagian besar pengguna mengakses via mobile dan jaringan 4G, LCP buruk berkorelasi langsung dengan bounce rate dan kehilangan konversi. Studi web.dev menunjukkan tiap penundaan satu detik di LCP berpotensi menurunkan konversi sekitar 7 persen, meskipun angka pastinya bervariasi tergantung industri.
Sumber rujukan: dokumentasi LCP di web.dev.
Pertanyaan Umum
Apa bedanya LCP dengan FCP?
FCP mengukur kapan piksel pertama apa pun dirender. LCP mengukur kapan elemen terbesar yang relevan untuk pengguna selesai dirender. LCP selalu sama dengan atau lebih lambat dari FCP.
Bagaimana cara memperbaiki LCP yang buruk?
Empat lever utama: optimasi hero image (format WebP/AVIF, ukuran tepat, atribut fetchpriority="high"), pangkas waktu TTFB server, hapus blocking resource sebelum elemen LCP, dan preload font yang dipakai elemen LCP.
Istilah Terkait