Largest Contentful Paint (LCP) adalah salah satu metrik yang dilacak di bagian Performa pada laporan Lighthouse. Setiap metrik menangkap beberapa aspek kecepatan pemuatan halaman.
Lighthouse menampilkan LCP dalam hitungan detik:
Yang diukur LCP
LCP mengukur saat elemen konten terbesar di area pandang dirender ke layar. Ini memperkirakan kapan konten utama halaman dapat dilihat oleh pengguna. Lihat Largest Contentful Paint yang ditentukan untuk mengetahui detail selengkapnya tentang cara menentukan LCP.
Cara Lighthouse menentukan skor LCP
Lighthouse mengekstrak data LCP dari alat pelacakan Chrome.
Tabel di bawah menunjukkan cara menafsirkan skor LCP:
| Waktu LCP (dalam detik) |
Pengkodean warna |
|---|---|
| 0-2.5 | Hijau (cepat) |
| 2.5-4 | Oranye (sedang) |
| Lebih dari 4 | Merah (lambat) |
Cara meningkatkan skor LCP
Jika LCP berupa gambar, pengaturan waktunya dapat dibagi menjadi empat fase. Mengetahui fase mana yang memerlukan waktu terlama dapat membantu Anda mengoptimalkan LCP. Lighthouse akan menampilkan elemen LCP beserta perincian fase dalam diagnostik "Largest Contentful Paint element" (elemen Largest Contentful Paint).
| Fase LCP | Deskripsi |
|---|---|
| Waktu ke byte pertama (TTFB) | Waktu dari saat pengguna mulai memuat halaman sampai saat browser menerima byte pertama dari respons dokumen HTML. Pelajari TTFB lebih lanjut. |
| Penundaan pemuatan | Delta di antara TTFB dan saat browser mulai memuat resource LCP. |
| Waktu pemuatan | Waktu yang diperlukan untuk memuat resource LCP itu sendiri. |
| Penundaan render | Delta antara saat resource LCP selesai dimuat hingga elemen LCP dirender sepenuhnya. |