LCP (Largest Contentful Paint)

TL;DR: Largest Contentful Paint (LCP) adalah metrik Google yang mengukur kapan elemen visual terbesar di viewport sebuah halaman selesai dimuat. LCP menjadi salah satu dari tiga pilar Core Web Vitals dan berpengaruh langsung pada peringkat SEO sejak 2021. Skor baik berada di bawah 2,5 detik, sedang 2,5 sampai 4 detik, dan buruk di atas 4 detik.

Apa itu LCP?

Largest Contentful Paint mencatat kapan konten terbesar di area yang langsung terlihat pengguna, biasanya gambar hero, video poster, atau blok teks utama, selesai dirender. Metrik ini merepresentasikan persepsi pengguna: seberapa cepat halaman terasa "siap dipakai". Elemen yang dihitung meliputi tag img, image di dalam svg, video dengan poster, background-image via CSS, dan blok teks level block.

Google memakai LCP sebagai sinyal ranking sejak rollout Page Experience Update tahun 2021. Artinya, halaman dengan LCP lambat berisiko kalah bersaing di hasil pencarian, meski konten dan backlinknya kuat. LCP juga bagian dari laporan Core Web Vitals di Google Search Console dan PageSpeed Insights.

Faktor yang Memengaruhi LCP

Empat penyebab umum LCP lambat:

1. Server response time lambat. Respon TTFB di atas 600 ms membuat browser menunggu terlalu lama sebelum bisa mulai rendering. Solusi: pilih hosting yang tepat, aktifkan CDN, cache di tingkat server.
2. Resource blocking render. CSS dan JavaScript yang memblokir proses rendering menunda paint. Solusi: inline critical CSS, defer non-critical JS.
3. Gambar hero berat tanpa optimasi. Gambar 2 MB di viewport utama bisa menambah 1 sampai 3 detik. Solusi: format modern (WebP, AVIF), responsive image, preload pada elemen LCP.
4. Client-side rendering berat. Framework yang mengandalkan JS untuk menampilkan konten awal menambah beban. Solusi: SSR, ISR, atau hybrid seperti yang difasilitasi Next.js.

Kenapa LCP Penting untuk Bisnis?

Riset Google menunjukkan bahwa situs yang memenuhi threshold Core Web Vitals memiliki kemungkinan 24% lebih kecil untuk ditinggalkan pengguna sebelum halaman selesai dimuat. Dalam konteks UMKM Indonesia yang pasar utamanya mobile dengan koneksi 4G rata-rata, perbaikan LCP dari 4 detik ke 2 detik sering menurunkan bounce rate 10 sampai 20 persen berdasarkan pengalaman optimasi yang kami lakukan di beberapa proyek portfolio vitoatmo.com, termasuk Atmo (LMS) dan Nalesha (e-commerce). Referensi metrik dan threshold resmi bisa dibaca di dokumentasi LCP web.dev.

Pertanyaan Umum

Berapa skor LCP yang dianggap baik?

Google menetapkan LCP baik di bawah 2,5 detik, perlu perbaikan 2,5 sampai 4 detik, dan buruk di atas 4 detik. Threshold diukur pada persentil ke-75 dari seluruh sesi pengguna selama 28 hari.

Apa beda LCP dengan First Contentful Paint (FCP)?

FCP mengukur kapan elemen konten pertama muncul, misalnya header kecil atau teks loading. LCP mengukur kapan elemen terbesar di viewport selesai dimuat, sehingga lebih merepresentasikan pengalaman "halaman siap dipakai".

Bagaimana cara mengukur LCP sebuah halaman?

Gunakan PageSpeed Insights, Chrome DevTools tab Performance, ekstensi Web Vitals, atau laporan Core Web Vitals di Google Search Console. Untuk data lapangan pengguna nyata, pakai Chrome UX Report atau Real User Monitoring (RUM).

Structured Data

{
  "@context": "https://schema.org",
  "@type": "DefinedTerm",
  "name": "LCP (Largest Contentful Paint)",
  "description": "Metrik Core Web Vitals Google yang mengukur waktu elemen terbesar di viewport selesai dimuat. Skor baik di bawah 2,5 detik.",
  "inDefinedTermSet": "https://vitoatmo.com/glosarium",
  "url": "https://vitoatmo.com/glosarium/lcp",
  "termCode": "LCP"
}

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {"@type": "Question", "name": "Berapa skor LCP yang dianggap baik?", "acceptedAnswer": {"@type": "Answer", "text": "LCP baik di bawah 2,5 detik, perlu perbaikan 2,5-4 detik, buruk di atas 4 detik, diukur pada persentil ke-75 dari sesi pengguna selama 28 hari."}},
    {"@type": "Question", "name": "Apa beda LCP dengan FCP?", "acceptedAnswer": {"@type": "Answer", "text": "FCP mengukur elemen konten pertama yang muncul, LCP mengukur elemen terbesar di viewport selesai dimuat."}},
    {"@type": "Question", "name": "Bagaimana cara mengukur LCP?", "acceptedAnswer": {"@type": "Answer", "text": "Gunakan PageSpeed Insights, Chrome DevTools, ekstensi Web Vitals, atau laporan Core Web Vitals di Google Search Console."}}
  ]
}