Largest Contentful Paint (LCP)
Membaca LCP sebagai sinyal kapan konten utama benar-benar terasa hadir bagi user.
Tujuan belajar
- Menjelaskan pengalaman user yang direpresentasikan LCP
- Mengidentifikasi kandidat element LCP pada sebuah halaman
- Membaca sinyal LCP dari laporan tanpa langsung menebak solusi
- Menyusun langkah diagnosis awal yang berbasis bukti
Isi lesson
6 blok- 1.User menunggu konten utama, bukan sekadar halaman mulai terbukaBelum selesaiWajib
- 2.Baca satu sinyal LCP sebelum mengubah kodeBelum selesaiWajib
- 3.Writing practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan menyamakan LCP dengan seluruh waktu halaman selesaiBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
User menunggu konten utama, bukan sekadar halaman mulai terbuka
WajibLargest Contentful Paint atau LCP membantu menjawab satu pertanyaan dari sudut pandang user: kapan konten terbesar yang relevan di viewport awal benar-benar terlihat? Pada halaman detail course, kandidatnya dapat berupa heading utama, hero image, atau kartu informasi besar. Nilai LCP yang lambat belum memberi resep tunggal. Ia adalah sinyal untuk mencari jalur kritis: response server, resource yang memblokir render, ukuran atau prioritas image, font, JavaScript, atau element utama yang baru muncul setelah kerja client. Gunakan target 2.5 detik sebagai panduan pengalaman baik, lalu cari penyebab pada halaman dan kondisi yang benar-benar diukur.
Bagian ini memengaruhi progres lesson.
Baca satu sinyal LCP sebelum mengubah kode
Wajib{
"page": "/learn/frontend-engineering",
"largest-contentful-paint": {
"displayValue": "3.4 s",
"candidateElement": "img.course-hero"
},
"notes": [
"Hero image dimuat dari network.",
"Heading sudah terlihat lebih awal."
]
}Laporan ini memberi hipotesis awal: image hero adalah kandidat LCP dan waktunya melewati target panduan. Jangan langsung menambah teknik optimasi. Periksa dulu ukuran file, response image, prioritas request, apakah image berada di viewport awal, serta apakah hasil itu konsisten pada kondisi pengukuran yang relevan.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Baca laporan LCP di atas. Tulis diagnosis awal untuk halaman tersebut: sebutkan kandidat element LCP, bukti yang sudah tersedia, dua hal yang perlu diperiksa sebelum mengubah kode, dan satu perbaikan yang ingin kamu uji terlebih dahulu. Jelaskan mengapa perbaikan itu relevan dengan jalur konten utama, bukan sekadar menaikkan skor.
Tulis draft dulu sebelum menandai writing practice selesai.
0/280 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Saat LCP lambat dan laporan menandai hero image, langkah awal yang paling tepat adalah
Progres lesson naik setelah jawaban benar.
Kesalahan umum
WajibJangan menyamakan LCP dengan seluruh waktu halaman selesai
LCP bukan indikator bahwa semua request, analytics, atau bagian bawah halaman sudah selesai. Fokusnya adalah kapan konten terbesar yang bermakna di viewport awal terlihat. Karena itu, optimasi yang benar biasanya dimulai dari prioritas konten utama dan jalur resource yang membawanya.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- LCP adalah sinyal kapan konten utama di viewport awal terlihat.
- Kandidat LCP dapat berupa image, heading, atau blok besar yang benar-benar user lihat.
- Nilai lambat adalah awal diagnosis, bukan perintah untuk memakai satu teknik tertentu.
- Pisahkan bukti laporan, hipotesis penyebab, dan eksperimen perbaikan.
- Berikutnya, INP memeriksa apakah aplikasi tetap merespons ketika user mulai berinteraksi.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: User menunggu konten utama, bukan sekadar halaman mulai terbuka.