Digital Transformation
Optimasi LCP (Largest Contentful Paint)
TL;DR: Optimasi LCP (Largest Contentful Paint) adalah upaya mempercepat waktu sampai elemen konten terbesar di layar selesai dirender. Target skor baik menurut Google adalah di bawah 2,5 detik. Elemen yang diukur biasanya gambar hero, video poster, atau blok teks besar di paruh atas halaman.
Apa itu Optimasi LCP?
Largest Contentful Paint adalah salah satu dari tiga metrik Core Web Vitals milik Google. Metrik ini mengukur kapan elemen visual terbesar di area yang langsung terlihat pengguna selesai dimuat. Optimasi LCP berarti memangkas segala hal yang menunda kemunculan elemen tersebut, mulai dari respons server yang lambat, gambar berukuran besar, sampai skrip yang memblokir render.
Penyebab LCP buruk umumnya berurutan: waktu respons server (TTFB) tinggi, lalu sumber daya penghambat render seperti CSS dan font, baru kemudian waktu muat aset gambar itu sendiri. Memahami urutan ini penting agar perbaikan tidak salah sasaran. Untuk gambaran lebih luas soal tiga metriknya, lihat pembahasan Core Web Vitals untuk marketer.
Cara Memperbaiki
| Area | Tindakan |
|---|---|
| Server | Aktifkan caching dan gunakan CDN untuk memangkas TTFB |
| Gambar | Kompres, pakai format modern (WebP/AVIF), set prioritas muat |
| Render | Kurangi CSS dan font yang memblokir, pakai preload aset kritis |
| Kode | Hindari hidrasi berat di paruh atas halaman |
Kenapa Penting?
Bagi pebisnis di Indonesia dengan banyak pengunjung dari jaringan seluler, LCP yang lambat membuat halaman terasa kosong terlalu lama dan menaikkan kemungkinan pengunjung pergi. Dalam beberapa proyek yang saya tangani, memberi prioritas muat pada gambar hero dan memangkas font yang tidak terpakai memberi perbaikan LCP yang terasa, meski besarnya bergantung pada kondisi awal situs. Data lapangan dari web.dev menjadi acuan teknis yang baik untuk menetapkan target.
Pertanyaan Umum
Apakah skor Lighthouse yang hijau menjamin LCP bagus?
Tidak selalu. Lighthouse adalah uji lab dengan kondisi simulasi, sedangkan yang dipakai Google untuk peringkat adalah data lapangan asli pengguna (CrUX). Keduanya bisa berbeda jauh, seperti dibahas di kasus Lighthouse hijau tapi CrUX merah.
Berapa target LCP yang baik?
Di bawah 2,5 detik dianggap baik, 2,5 sampai 4 detik perlu perbaikan, dan di atas 4 detik tergolong buruk. Angka ini diukur pada persentil ke-75 kunjungan.