Cara Memperbaiki & Mengoptimalkan Masalah LCP di WordPress

Largest Contentful Paint (LCP) mengukur berapa lama elemen terbesar di layar pertama muncul, biasanya gambar hero, judul besar, atau gambar pratinjau video. Panduan Google menganggap 2,5 detik atau kurang sebagai baik, diukur pada 75% kunjungan nyata.

Langkah 1: Temukan elemen LCP Anda

Di PageSpeed Insights, buka bagian diagnostik dan cari “Largest Contentful Paint element”. Di situ terlihat persis gambar atau blok teks mana yang menjadi elemen LCP di mobile. Perbaiki elemen itu lebih dulu. Mengoptimalkan gambar lain tidak akan mengubah LCP.

Langkah 2: Pahami empat bagiannya

Respons server (TTFB): berapa lama sampai HTML tiba.
Resource load delay: berapa lama sebelum browser mulai mengunduh gambar.
Resource load duration: berapa lama gambar diunduh.
Element render delay: jeda antara unduhan selesai dan tampil, sering disebabkan CSS atau JavaScript yang memblokir.

Langkah 3: Terapkan perbaikan

Jangan lazy-load gambar hero

Lazy loading bagus untuk gambar yang lebih bawah di halaman, tetapi menunda gambar di bagian atas. Pastikan gambar hero Anda tidak memiliki loading="lazy", dan beri tahu browser bahwa gambar itu penting:

<img src="hero.webp" width="1200" height="600" alt="Describe the image" fetchpriority="high">

Buat gambar mudah ditemukan browser

Jika hero berupa gambar latar CSS, atau ditambahkan oleh slider JavaScript, browser menemukannya terlambat. Pakai tag gambar biasa, atau preload:

<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high">

Ukuran tepat, format modern

Jangan unggah foto 4000 piksel untuk ruang 600 piksel. Perkecil, ekspor sebagai WebP atau AVIF, dan kompres. WordPress menambahkan ukuran srcset responsif secara otomatis untuk gambar dari pustaka media.

Hindari slider dan video autoplay di bagian atas

Carousel dan video latar memuat beberapa file berat sebelum tampilan pertama. Satu gambar statis biasanya dimuat jauh lebih cepat.

Singkirkan yang memblokir rendering

CSS dan JavaScript yang memblokir rendering menunda tampilan. Lihat panduan FCP. Periksa juga animasi fade-in yang menyembunyikan konten utama sampai sebuah skrip berjalan.

Jika elemen LCP Anda berupa teks

Font berpengaruh. Gunakan font-display: swap dan preload font utama Anda.

Percepat server

TTFB yang lambat menyisakan lebih sedikit waktu untuk hal lainnya. Lihat cara mengurangi TTFB.

Periksa hasilnya

Jalankan ulang PageSpeed Insights dan pastikan waktu LCP turun. Data pengguna nyata adalah jendela bergulir 28 hari, jadi hasil lapangan butuh beberapa minggu untuk mencerminkan perubahan Anda sepenuhnya.