Panduan langkah demi langkah tentang cara menguraikan LCP dan mengidentifikasi area utama yang perlu ditingkatkan.
Dipublikasikan: 30 April 2020, Terakhir diperbarui: 31 Maret 2025
Largest Contentful Paint (LCP) adalah salah satu dari tiga metrik Core Web Vitals, dan metrik ini menunjukkan seberapa cepat konten utama halaman web dimuat. Secara khusus, LCP mengukur waktu dari saat pengguna memulai pemuatan halaman hingga gambar atau blok teks terbesar dirender dalam area pandang.
Untuk memberikan pengalaman pengguna yang baik, situs harus mengusahakan agar LCP 2,5 detik atau kurang untuk setidaknya 75% kunjungan halaman.
Sejumlah faktor dapat memengaruhi kecepatan browser dalam memuat dan merender halaman web, dan penundaan di salah satu faktor tersebut dapat berdampak signifikan pada LCP.
Perbaikan cepat pada satu bagian halaman jarang menghasilkan peningkatan yang berarti pada LCP. Untuk meningkatkan LCP, Anda harus melihat seluruh proses pemuatan dan memastikan setiap langkah dalam prosesnya dioptimalkan.
Memahami metrik LCP
Sebelum mengoptimalkan LCP, developer harus berusaha memahami apakah mereka memiliki masalah LCP, dan seberapa besar masalah tersebut.
LCP dapat diukur di sejumlah alat dan tidak semua alat ini mengukur LCP dengan cara yang sama. Untuk memahami LCP pengguna sebenarnya, kita harus melihat pengalaman pengguna sebenarnya, bukan yang ditampilkan oleh alat berbasis lab seperti Lighthouse atau pengujian lokal. Alat berbasis lab ini dapat memberikan banyak informasi untuk menjelaskan dan membantu Anda meningkatkan LCP, tetapi perlu diketahui bahwa pengujian lab saja mungkin tidak sepenuhnya mewakili pengalaman pengguna Anda yang sebenarnya.
Data LCP berdasarkan pengguna sebenarnya dapat ditampilkan dari alat Pemantauan Pengguna Nyata (RUM) yang diinstal di situs, atau dengan menggunakan Chrome User Experience Report (CrUX) yang mengumpulkan data anonim dari pengguna Chrome sebenarnya untuk jutaan situs.
Menggunakan data LCP CrUX Chrome DevTools
Panel Performa Chrome DevTools menampilkan pengalaman LCP lokal Anda di samping LCP CrUX halaman atau origin dalam tampilan metrik langsung, dan dalam Insight rekaman aktivitas performa, termasuk perincian waktu subbagian LCP (yang akan kami jelaskan sebentar lagi).