Largest Contentful Paint atau LCP adalah metrik yang mengukur berapa lama waktu yang dibutuhkan sampai elemen konten terbesar yang terlihat pada viewport awal selesai dirender. Elemen tersebut sering berupa gambar hero, blok teks besar, poster video, atau elemen lain yang dianggap sebagai konten utama pada area yang pertama kali terlihat.
LCP menjadi salah satu dari tiga Core Web Vitals. Target yang umum digunakan untuk kategori baik adalah 2,5 detik atau kurang pada persentil ke-75 kunjungan. Angka ini bukan alasan untuk mengejar optimasi secara membabi buta; tujuannya adalah memastikan konten utama benar-benar terasa cepat tersedia bagi pengguna.
Bagaimana browser menentukan elemen LCP?
Selama halaman memuat, kandidat elemen terbesar dapat berubah. Browser mencatat kandidat yang memenuhi kriteria LCP sampai halaman mencapai titik tertentu. Karena itu, gambar hero yang terlambat muncul atau teks besar yang berganti setelah font dimuat dapat memengaruhi elemen dan waktu LCP.
Penyebab umum LCP lambat
1. Server merespons terlalu lambat
Jika HTML awal datang terlambat, semua resource penting ikut terlambat ditemukan. Periksa TTFB, cache halaman, pekerjaan backend, database, CDN, dan redirect sebelum HTML utama.
2. Resource LCP tidak cepat ditemukan
Gambar hero yang baru diketahui setelah JavaScript berjalan atau dimuat melalui pola CSS tertentu dapat terlambat diprioritaskan browser. Resource penting sebaiknya dapat ditemukan dari HTML awal bila memungkinkan.
3. Gambar terlalu besar
Dimensi piksel yang jauh lebih besar dari kebutuhan viewport, format yang tidak efisien, atau kualitas kompresi terlalu tinggi memperpanjang waktu transfer dan decoding. Optimasi ukuran tanpa merusak kualitas visual yang diperlukan.
4. CSS dan JavaScript memblokir rendering
Stylesheet atau script yang harus diproses sebelum konten terlihat dapat menambah delay. Jangan langsung menunda semua CSS atau JavaScript; tentukan mana yang benar-benar diperlukan untuk render awal dan mana yang aman ditunda.
5. Font menghambat teks besar
Jika elemen LCP berupa teks, strategi font dapat memengaruhi kapan teks dirender stabil. Gunakan font yang efisien, subset bila relevan, dan strategi display yang sesuai.
Cara menemukan elemen LCP
Gunakan alat performa browser atau PageSpeed Checker IDZ SEO untuk melihat elemen yang dilaporkan sebagai LCP dan diagnosis terkait. Jangan mengoptimasi gambar tertentu hanya karena terlihat besar secara visual; pastikan memang elemen itulah yang menjadi kandidat LCP pada pengujian.
Urutan optimasi LCP yang masuk akal
- Pastikan HTML awal tiba cukup cepat.
- Pastikan resource LCP dapat ditemukan segera.
- Hindari lazy-loading pada gambar yang menjadi LCP di viewport awal.
- Berikan prioritas yang tepat pada resource penting.
- Kompres dan sesuaikan dimensi gambar.
- Kurangi render delay akibat CSS, JavaScript, dan font.
- Uji ulang pada mobile dan desktop.
Lazy loading tidak selalu baik untuk gambar hero
Lazy loading sangat berguna untuk gambar di bawah viewport, tetapi gambar utama yang langsung terlihat seharusnya tidak sengaja ditunda. Jika browser menunggu kondisi lazy-load sebelum mulai mengambil resource hero, LCP dapat memburuk.
Preload bukan solusi universal
Preload dapat membantu resource yang penting tetapi sulit ditemukan browser. Namun terlalu banyak preload membuat resource saling bersaing. Gunakan setelah Anda memahami dependency dan prioritas network, bukan sebagai dekorasi performa.
LCP field dan lab dapat berbeda
Pengguna nyata memiliki jaringan, perangkat, cache, dan pola navigasi yang berbeda. Lab test adalah simulasi. Karena itu, angka LCP pada satu pengujian tidak selalu sama dengan field data. Pelajari konteksnya melalui perbedaan PageSpeed mobile dan desktop.
Hubungan LCP dengan Core Web Vitals lainnya
LCP hanya mengukur loading konten utama. Halaman juga harus responsif dan stabil. Baca panduan Core Web Vitals untuk memahami hubungan LCP dengan INP dan CLS. Jangan mempercepat hero dengan teknik yang justru menyebabkan layout bergeser; CLS tetap perlu dijaga.
Kesimpulan
LCP yang baik berasal dari jalur rendering yang efisien: server cepat, resource utama cepat ditemukan, aset sesuai kebutuhan, dan render delay terkendali. Temukan elemen LCP terlebih dahulu, pecah waktunya menjadi penyebab yang dapat ditindaklanjuti, lalu optimasi berdasarkan evidence.
Temukan Elemen LCP sebelum Mengoptimalkan
Largest Contentful Paint mengukur kapan elemen konten terbesar yang terlihat di viewport selesai dirender. Pada banyak halaman elemen tersebut berupa hero image, gambar produk, heading besar, atau blok teks. Langkah pertama bukan mengompresi semua file, melainkan mengidentifikasi elemen LCP aktual pada halaman dan memahami resource apa yang menahannya.
Target kategori baik adalah LCP hingga 2,5 detik pada persentil ke-75 kunjungan. Gunakan data lapangan untuk melihat pengalaman pengguna nyata dan Lighthouse atau DevTools untuk membedah waterfall serta dependency chain.
Prioritaskan Resource yang Benar-benar Dibutuhkan
Jika hero image menjadi LCP, pastikan ukuran file dan dimensi masuk akal, format efisien, URL tidak terlambat ditemukan, dan gambar tidak di-lazy-load jika berada di atas fold. Jika stylesheet atau font menahan render, cek critical path. Jika TTFB tinggi, optimasi frontend saja mungkin tidak cukup karena browser menerima HTML terlambat.
Hindari preload berlebihan. Preload hanya berguna jika resource memang penting dan browser belum akan menemukannya cukup awal. Terlalu banyak preload dapat bersaing dengan resource yang lebih penting.
Validasi Setelah Perubahan
Uji kembali pada kondisi mobile dan desktop, lalu pantau data lapangan setelah cukup traffic terkumpul. PageSpeed Checker membantu membandingkan perubahan, tetapi jangan menilai keberhasilan hanya dari satu run. Pastikan perbaikan LCP tidak memperburuk CLS atau interaksi.
