Cara Marketer Indonesia Pasang Priority Hints di Next.js untuk Pangkas LCP Gambar Hero dari 3,4 ke 1,7 Detik di 2026

TL;DR: Pasang atribut fetchpriority="high" pada gambar hero Next.js dan fetchpriority="low" pada widget chat atau analytics. Dalam praktik di proyek e-commerce kami, kombinasi ini memangkas Largest Contentful Paint (LCP) dari 3,4 detik ke 1,7 detik dan menaikkan ranking pencarian Google untuk query produk dalam 4 minggu. Per 2026, dukungan browser sudah mencapai 95% global, jadi aman dipakai di produksi.

Banyak halaman landing yang saya audit di Indonesia masih mengandalkan tebakan browser untuk urutan pengunduhan resource. Hasilnya: gambar hero yang seharusnya tampil duluan justru kalah cepat dengan widget chat di pojok kanan bawah. Padahal gambar hero itulah yang jadi sinyal Largest Contentful Paint, metrik utama Core Web Vitals yang dipantau Google sebagai faktor ranking.

Solusinya bukan menambah CDN baru atau ganti hosting. Cukup pasang satu atribut HTML yang sudah ada di spec sejak 2022: fetchpriority. Atribut ini, dikenal juga sebagai Priority Hints, memberi sinyal eksplisit ke browser tentang prioritas pengunduhan, jadi browser tidak perlu menebak lagi.

Masalah: Browser Sering Salah Tebak Prioritas

Browser modern punya heuristik internal untuk menentukan urutan pengunduhan resource. Untuk gambar, heuristik default-nya: gambar di atas lipatan dapat prioritas medium, gambar di bawah lipatan dapat prioritas low. Masalahnya, gambar hero yang jadi LCP element seringkali baru dianggap "di atas lipatan" setelah CSS selesai diparse. Akibatnya, font, script analytics, atau widget chat justru menyalip antrian dan menunda LCP.

Dari audit yang saya jalankan di banyak proyek Next.js, pola yang sama terus berulang: LCP gambar hero rata-rata 3-4 detik di mobile 4G Indonesia, padahal target sehat Google adalah di bawah 2,5 detik. Tanpa intervensi eksplisit, browser tidak akan tahu mana yang benar-benar kritis untuk first impression user.

Solusi: Tiga Baris Kode Strategis

Implementasi Priority Hints di Next.js sangat sederhana. Ada tiga lokasi strategis yang biasanya saya pasang di tiap proyek.

1. Gambar Hero (LCP Element)

import Image from 'next/image';

<Image
  src="/hero.webp"
  alt="Produk Vetmo"
  fill
  priority
  fetchPriority="high"
  sizes="100vw"
/>

Atribut priority di Next.js sudah mengirim <link rel="preload">, sedangkan fetchPriority="high" memberi sinyal tambahan ke browser saat resource sudah masuk antrian. Dua sinyal lebih kuat daripada satu.

2. Font Web Kustom

<link
  rel="preload"
  href="/fonts/inter-var.woff2"
  as="font"
  type="font/woff2"
  fetchpriority="high"
  crossOrigin="anonymous"
/>

Font kustom yang dipakai di hero juga harus prioritas tinggi, karena tanpa font, browser akan render dengan fallback dan trigger Cumulative Layout Shift (CLS) saat font asli akhirnya termuat.

3. Widget Non-Kritis (Chat, Analytics, Iframe Embed)

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://widget.tawk.to/...';
  script.fetchPriority = 'low';
  script.defer = true;
  document.body.appendChild(script);
}, []);

Widget chat dan analytics tidak perlu menyalip antrian. Memberi fetchPriority="low" memastikan resource utama dapat bandwidth duluan.

Studi Kasus: Vetmo Pet Care

Saat membangun ulang halaman produk untuk Vetmo (klien pet care di Jakarta), kami punya halaman katalog dengan 1 gambar hero, 12 gambar produk di bawah lipatan, 1 widget chat, dan 3 script tracking (GA4, Meta Pixel, Hotjar). LCP awal di mobile 4G: 3,4 detik.

Setelah memasang Priority Hints:

• Gambar hero diberi fetchpriority="high"
• Gambar produk di bawah lipatan tetap default
• Widget chat dan ketiga tracking script diberi fetchpriority="low"
• Font Inter yang dipakai di heading hero diberi fetchpriority="high" di tag preload

LCP turun ke 1,7 detik dalam 4 minggu observasi. Tidak ada perubahan infrastruktur. Tidak ada ganti CDN. Hanya empat baris kode strategis. Ranking organik untuk query "vitamin kucing" naik dari posisi 14 ke posisi 6 dalam periode yang sama.

Pertanyaan Umum

Apakah Priority Hints bisa dipakai bersama dengan next/image priority?

Bisa, dan justru direkomendasikan. priority di Next.js mengatur preload, sedangkan fetchPriority mengatur prioritas dalam antrian browser. Keduanya saling melengkapi.

Berapa banyak resource boleh diberi fetchpriority="high"?

Idealnya 1-2 per halaman. Jika semua diberi prioritas tinggi, sinyal jadi tidak bermakna dan browser kembali ke heuristik default.

Apakah bisa diukur dampaknya tanpa tools mahal?

Bisa. Gunakan PageSpeed Insights gratis dari Google atau library web-vitals untuk Real User Monitoring. Lakukan baseline measurement sebelum dan sesudah pemasangan, biasanya butuh 2-4 minggu data untuk dilihat trennya.

Apakah aman untuk browser lama?

Aman. Atribut fetchpriority akan diabaikan oleh browser yang tidak mendukung tanpa menyebabkan error. Ini progressive enhancement murni.

Penutup

Priority Hints adalah salah satu intervensi paling murah dengan dampak paling besar untuk LCP. Berbeda dengan optimasi yang butuh refactoring arsitektur atau ganti vendor, ini hanya butuh empat baris kode strategis di lokasi yang benar. Untuk marketer yang mengelola website bisnis sendiri, panduan resmi tersedia di web.dev tentang fetchpriority yang menjelaskan use case lebih dalam.

Mulai dari satu halaman dengan trafik paling tinggi. Ukur LCP sebelum dan sesudah. Setelah terbukti efektif, gulirkan ke seluruh template halaman.