Digital Transformation
LCP (Largest Contentful Paint)
LCP adalah metrik Core Web Vitals yang mengukur waktu render elemen konten terbesar di viewport pengguna. Skor baik di bawah 2,5 detik.
TL;DR: LCP (Largest Contentful Paint) adalah metrik Core Web Vitals dari Google yang mengukur kapan elemen konten paling besar di layar pengguna selesai dimuat. Skor baik di bawah 2,5 detik, perlu perbaikan 2,5 sampai 4 detik, buruk di atas 4 detik. LCP sering didominasi oleh gambar hero, blok teks utama, atau video poster.
Apa itu LCP?
LCP adalah salah satu dari tiga Core Web Vitals yang dipakai Google sebagai sinyal pengalaman halaman. Berbeda dari metrik lama seperti DOMContentLoaded, LCP fokus pada momen paling penting bagi pengguna, yaitu saat konten utama terlihat. Ibaratnya, LCP mengukur "kapan halaman terasa siap dipakai", bukan "kapan kode selesai dimuat".
Elemen yang dihitung sebagai kandidat LCP umumnya berupa <img>, <video> poster, gambar latar dari background-image, atau blok teks level blok dengan ukuran besar. Browser otomatis memilih kandidat terbesar yang terlihat di viewport awal dan melaporkannya melalui Web Vitals API.
Cara Kerja Pengukuran LCP
| Tahap | Penjelasan |
|---|---|
| Deteksi kandidat | Browser memantau elemen yang dirender di viewport awal. |
| Update kandidat | Setiap kali ada elemen baru lebih besar muncul, kandidat LCP berubah. |
| Penguncian | Saat pengguna berinteraksi (scroll, klik), nilai LCP dikunci. |
| Pelaporan | Nilai dikirim ke layanan analytics atau CrUX. |
Faktor Utama yang Memperburuk LCP
Tiga penyebab paling umum dari pengalaman saya menangani audit performa: TTFB lambat di server, gambar hero tanpa kompresi modern seperti WebP, dan render-blocking CSS atau font. Saat membantu Vetmo (klinik hewan) memperbaiki LCP dari sekitar 4,1 detik ke 2,2 detik, fokus utamanya bukan ganti hosting, melainkan mengonversi hero image ke AVIF dan menambahkan fetchpriority="high" di Next.js Image.
Kenapa Penting?
LCP punya bobot signifikan di Core Web Vitals, dan Web Vitals adalah salah satu sinyal ranking SEO yang dikonfirmasi Google sejak 2021. Untuk pemilik website bisnis di Indonesia yang banyak diakses lewat 4G dengan latensi tinggi, perbaikan LCP biasanya berdampak ganda, yaitu peringkat pencarian lebih baik dan tingkat bounce yang lebih rendah.
Pertanyaan Umum
Apakah LCP sama dengan First Contentful Paint?
Tidak. FCP mencatat elemen konten pertama yang muncul, sementara LCP fokus pada elemen terbesar yang biasanya menjadi titik fokus pengguna.
Berapa skor LCP yang dianggap baik?
Di bawah 2,5 detik untuk persentil ke-75 pengguna, sesuai panduan Google.
Apakah LCP bisa berbeda di lab dan lapangan?
Ya. Pengukuran lab seperti Lighthouse memakai kondisi simulasi, sedangkan data lapangan seperti CrUX mencerminkan jaringan dan perangkat asli pengguna.
Istilah Terkait