Digital Transformation
Largest Contentful Paint (LCP)
TL;DR: Largest Contentful Paint (LCP) mengukur berapa lama elemen terbesar di layar pertama selesai dirender sejak halaman mulai dimuat. Sejak 2021, LCP jadi salah satu dari tiga sinyal Core Web Vitals yang dipakai Google untuk peringkat. Skor baik di bawah 2,5 detik, perlu perbaikan antara 2,5 sampai 4 detik, buruk di atas 4 detik.
Apa itu Largest Contentful Paint?
Largest Contentful Paint mencatat waktu, dihitung dari mulai navigasi, sampai elemen visual terbesar di viewport selesai dirender. Elemen yang biasanya jadi LCP candidate adalah gambar hero, blok teks utama, atau video poster. Browser memilih ulang kandidat LCP sampai pengguna berinteraksi atau halaman selesai memuat.
LCP berbeda dari First Contentful Paint (FCP). FCP mencatat piksel pertama apa pun yang muncul, sedangkan LCP fokus pada elemen besar yang merepresentasikan konten utama. Bagi pengunjung, LCP adalah momen halaman terasa "sudah jadi".
Penyebab LCP Lambat
Ada empat penyebab paling sering ditemui di lapangan:
- Server response time lambat: Time to First Byte (TTFB) tinggi karena hosting jauh, query database berat, atau tanpa cache. Lihat TTFB untuk konteks lengkap.
- Render-blocking resource: CSS atau JavaScript di head yang harus selesai diunduh sebelum browser bisa render.
- Resource load time: Gambar hero besar tanpa kompresi, tanpa format modern (WebP, AVIF), atau tanpa
priority. - Client-side rendering: Halaman yang mengandalkan JavaScript untuk merender konten utama biasanya punya LCP lebih lambat.
Cara Memperbaiki LCP
| Area | Aksi konkret |
|---|---|
| Gambar | Pakai next/image dengan priority di atas lipatan, format AVIF/WebP, ukuran sesuai breakpoint |
| Font | font-display: swap, preload font kritis, batasi jumlah weight |
| Server | Aktifkan CDN, edge caching, atau ISR. Kurangi TTFB di bawah 600 ms |
| JS | Hapus script render-blocking, defer non-kritis, code-splitting per route |
| HTML | Pakai semantic HTML supaya browser bisa memprioritaskan elemen utama |
Kenapa Penting?
LCP adalah sinyal paling kuat untuk persepsi kecepatan. Riset dari web.dev menunjukkan halaman dengan LCP di bawah 2,5 detik punya bounce rate jauh lebih rendah dibanding halaman lambat. Untuk bisnis Indonesia yang banyak pengakses pakai jaringan 4G di luar Jabodetabek, LCP juga jadi proxy untuk inklusi: halaman lambat di koneksi lemah berarti calon pelanggan hilang sebelum sempat baca.
Pertanyaan Umum
Berapa target LCP yang ideal?
Google merekomendasikan di bawah 2,5 detik untuk 75 persen kunjungan, diukur di Chrome User Experience Report. Untuk pasar Indonesia, idealnya di bawah 2 detik supaya aman saat jaringan lemah.
Apakah LCP sama dengan page load time?
Tidak. Page load time mencatat sampai semua resource selesai dimuat. LCP fokus pada momen elemen terbesar di layar pertama selesai dirender, jauh lebih relevan dengan pengalaman pengguna.