Cara Marketer Indonesia Pasang LCP Element Hint di Next.js untuk Pangkas Largest Contentful Paint 2026

TL;DR: LCP element hint adalah teknik memberi tahu browser elemen mana yang akan menjadi Largest Contentful Paint supaya didahulukan saat render. Di Next.js 15, ini dilakukan dengan kombinasi atribut fetchpriority high pada Image utama, preload di head, dan penghapusan lazy loading pada elemen di atas lipatan. Implementasi yang benar bisa memangkas LCP 40 sampai 60 persen.

Selama tiga minggu terakhir, saya melakukan audit Web Vitals untuk delapan website klien. Pola yang sama muncul: LCP di kisaran 3 sampai 4 detik karena browser tidak tahu elemen mana yang penting. Browser memperlakukan semua aset sama, sehingga gambar hero bersaing dengan font, CSS, dan skrip pihak ketiga di antrian unduh.

LCP element hint mengubah urutan ini. Anda memberi tahu browser elemen mana yang harus diprioritaskan, dan sisa render menyesuaikan. Hasilnya halaman terasa lebih cepat tanpa mengubah desain atau menambah server.

Apa yang Sebenarnya Diukur LCP?

LCP (Largest Contentful Paint) adalah waktu yang dibutuhkan elemen konten terbesar di area di atas lipatan untuk muncul di layar. Biasanya berupa gambar hero, video poster, atau blok teks besar. Skor baik di bawah 2,5 detik, perlu perbaikan 2,5 sampai 4 detik, buruk di atas 4 detik.

Masalah utamanya, browser baru tahu elemen LCP setelah layout selesai dihitung. Sementara di sela waktu itu, banyak aset lain sudah mulai diunduh. Akibatnya elemen LCP mengantre di belakang aset yang sebenarnya kurang penting.

Tiga Sinyal yang Dipakai Browser

Kombinasi ketiga sinyal ini efektif untuk gambar hero. Untuk teks LCP, cukup pakai preload font dan hindari render-blocking CSS.

Implementasi di Next.js 15

Di komponen Hero, gunakan Image dari next/image dengan tiga atribut wajib:

import Image from "next/image";

export function Hero() {
  return (
    <Image
      src="https://cdn.example.com/hero.webp"
      alt="Vito Atmo, Digital Marketing Strategist"
      width={1200}
      height={630}
      priority
      fetchPriority="high"
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  );
}

Atribut priority otomatis menambah preload link di head. fetchPriority high memastikan browser memberi slot unduh tertinggi. Tanpa kombinasi ini, browser akan memperlakukan gambar hero seperti gambar biasa.

Studi Kasus: Atmo LMS

Saat mengaudit performa Atmo, platform learning management untuk training karyawan, hasil PageSpeed Insights menunjukkan LCP 3,1 detik di mobile. Elemen LCP adalah banner hero ukuran 1920x800 px dengan format JPEG 280 KB.

Tiga perubahan diterapkan:

1. Konversi ke WebP, ukuran turun ke 95 KB.
2. Tambah priority dan fetchPriority high di tag Image.
3. Preload font display sebagai fallback supaya teks tidak menunggu font kustom.

Pengukuran ulang di Field Data CrUX setelah 30 hari menunjukkan p75 LCP turun ke 1,3 detik. Bounce rate halaman utama turun dari 58 ke 41 persen, dan waktu rata-rata di halaman naik dari 38 ke 62 detik.

Kapan Hint Justru Merugikan

LCP hint hanya efektif kalau elemen yang ditandai benar-benar LCP. Kalau salah tebak, browser memprioritaskan aset yang salah dan menghabiskan slot unduh untuk hal yang tidak penting. Cara cek elemen LCP yang sebenarnya: buka Chrome DevTools, panel Performance, mode Web Vitals, dan lihat marker LCP.

Untuk halaman dengan slider atau carousel di hero, hanya gambar pertama yang dapat priority. Sisanya dimuat normal. Lihat panduan web.dev tentang optimasi LCP untuk strategi lebih dalam.

Pertanyaan Umum

Apakah priority sama dengan fetchpriority?

Tidak persis. Atribut priority di next/image akan mengatur loading menjadi eager, menambah preload link, dan menambah fetchPriority high otomatis di Next.js 14 ke atas. Untuk versi lebih lama atau elemen non-Image, fetchPriority harus ditambah manual.

Berapa banyak elemen yang bisa ditandai priority?

Idealnya satu per halaman. Memberi priority ke banyak elemen menghilangkan efeknya karena browser kembali memperlakukan semua sama. Pilih elemen yang benar-benar LCP.

Apakah ini bekerja untuk gambar di carousel?

Hanya slide pertama yang terlihat saat halaman load. Slide kedua dan seterusnya tetap pakai lazy loading.

Penutup

LCP element hint adalah perubahan kecil dengan dampak besar. Tiga baris kode bisa memangkas waktu loading puluhan persen tanpa investasi server tambahan. Untuk marketer yang ingin website cepat tapi tidak punya tim performance, ini langkah pertama yang ROI-nya paling tinggi.