Apa Itu LCP
Largest Contentful Paint mengukur kapan elemen terbesar di layar awal selesai ditampilkan — dan Google menetapkan ≤ 2,5 detik sebagai batas baik, diukur di persentil ke-75 kunjungan.
Yang dihitung sebagai elemen LCP hampir selalu salah satu dari ini: gambar utama, gambar latar yang besar, poster video, atau blok teks terbesar di bagian atas halaman.
Langkah pertama sebelum memperbaiki apa pun: cari tahu elemen mana yang jadi LCP di halaman Anda. PageSpeed Insights dan Lighthouse menunjukkannya secara langsung, dan jawabannya sering berbeda dari yang diperkirakan.
LCP adalah satu dari tiga Core Web Vitals, jadi hasilnya perlu dibaca dari data lapangan, bukan hanya dari satu pengujian lokal.
Empat Bagian yang Menyusun LCP
Angka LCP adalah jumlah dari empat bagian, dan mengetahui bagian mana yang paling besar menentukan apa yang perlu diperbaiki:
- Waktu respons server — sampai byte pertama diterima.
- Jeda sebelum sumber daya mulai diunduh — biasanya karena elemennya ditemukan terlambat.
- Waktu mengunduh sumber dayanya — ukuran berkas gambar.
- Waktu merender setelah berkasnya sampai.
Sebagian besar situs bermasalah di bagian satu dan tiga. Bagian dua yang paling sering luput, dan biasanya berasal dari gambar yang dimuat lewat CSS atau skrip.
Penyebab yang Paling Sering
- Gambar utama terlalu besar — diunggah dalam ukuran asli tanpa dikompres.
- Gambar utama dipasangi lazy loading, sehingga pemuatannya justru ditunda.
- Server lambat merespons, karena hosting berbagi yang penuh atau kueri basis data yang berat.
- Berkas CSS dan JavaScript menghalangi render di bagian
<head>. - Huruf khusus yang menahan teks tampil sampai berkasnya selesai diunduh.
- Gambar dimuat lewat CSS atau skrip, sehingga peramban baru menemukannya belakangan.
- Pengalihan bertingkat sebelum halaman sebenarnya mulai dimuat.
Urutan Perbaikan
- Cabut lazy loading dari gambar LCP. Perbaikan satu baris, dan sering langsung memangkas ratusan milidetik.
- Kompres dan ubah ukuran gambar utamanya ke format modern seperti WebP atau AVIF, dengan lebar yang sesuai tampilnya.
- Muat gambar LCP lebih awal dengan
fetchpriority="high", dan sediakanpreloadkalau ia tidak ditemukan dari HTML awal. - Percepat respons server — aktifkan caching halaman, dan pertimbangkan CDN kalau pengunjung tersebar.
- Singkirkan CSS dan JavaScript yang menghalangi render, atau tunda yang tidak dibutuhkan di layar awal.
- Pakai
font-display: swapsupaya teks tampil lebih dulu sambil huruf khususnya menyusul. - Hilangkan rantai pengalihan sebelum halaman dimuat.
- Sediakan
srcsetsupaya perangkat mengunduh ukuran yang sesuai layarnya.
Masalah server, gambar, dan skrip yang muncul di sini juga masuk urutan lebih luas dalam optimasi kecepatan website.
Langkah pertama dan kedua menyelesaikan sebagian besar kasus di situs biasa. Sisanya baru dikerjakan kalau angkanya masih di atas ambang.
Cara Memeriksanya
- PageSpeed Insights untuk satu alamat — ia menyebutkan elemen LCP dan memecah waktunya per bagian.
- Laporan Core Web Vitals di Search Console untuk melihat kelompok halaman mana yang bermasalah.
- Panel Performance di alat pengembang untuk melihat urutan pemuatan secara rinci.
- Ulangi pengukuran dengan pembatasan jaringan, karena kondisi lokal Anda hampir selalu terlalu bagus.
Pertanyaan Umum Seputar LCP
Kenapa LCP saya bagus di laboratorium tapi buruk di data lapangan?
Karena data lapangan berasal dari perangkat dan jaringan nyata pengunjung, diukur di persentil ke-75. Komputer dan koneksi Anda jauh lebih baik daripada seperempat pengunjung terburuk.
Berapa lama perbaikan LCP terlihat di Search Console?
Sampai empat minggu, karena laporannya memakai rentang 28 hari bergulir. Untuk melihat efeknya lebih cepat, pakai PageSpeed Insights pada halaman contoh.
Apakah mengganti hosting menyelesaikan LCP?
Hanya kalau masalahnya memang di waktu respons server. Periksa dulu pemecahan waktunya — kalau bagian terbesarnya di pengunduhan gambar, ganti hosting tidak mengubah banyak.