Website Bisnis

Cara Marketer Indonesia Pasang Fetchpriority di Image Hero untuk Pangkas LCP 2026

Vito Atmo·25 Mei 2026·0 kali dibaca·4 min baca

Cara Marketer Indonesia Pasang Fetchpriority di Image Hero untuk Pangkas LCP 2026

TL;DR: Atribut fetchpriority="high" pada image hero memberi tahu browser untuk memprioritaskan unduhan resource tersebut di awal load. Berdasarkan praktik di proyek client sepanjang 2025-2026, perubahan satu baris ini dapat memangkas Largest Contentful Paint sebesar 300 sampai 700 milidetik tanpa perlu mengubah framework atau hosting.

Banyak marketer Indonesia mengira optimasi LCP harus dimulai dari migrasi ke Next.js, pindah CDN, atau membayar tim performance. Padahal salah satu lever paling murah ada di sebuah atribut HTML yang dirilis Chrome sejak versi 102 dan kini didukung penuh oleh Firefox dan Safari. Atribut tersebut bernama fetchpriority.

Dalam beberapa proyek terakhir di tahun 2026, saya rutin memasang atribut ini sebagai langkah pertama audit performance. Hasilnya konsisten: tanpa menyentuh bundle size, tanpa migrasi framework, LCP turun cukup signifikan untuk membuat skor Core Web Vitals dari Needs Improvement berpindah ke Good.

Kenapa Image Hero Sering Jadi Bottleneck LCP

LCP mengukur waktu render elemen paling besar di viewport pertama. Untuk landing page personal brand atau halaman produk UMKM, elemen ini hampir selalu image hero. Browser default memberi prioritas tinggi pada resource yang muncul di HTML awal seperti CSS, tetapi untuk gambar, browser baru tahu posisi dan ukurannya setelah parsing CSS dan layout. Akibatnya gambar hero diunduh dengan prioritas sedang, kalah dari skrip yang ditandai async atau font kustom.

Dampak nyata: di banyak situs Indonesia yang masih memakai gambar hero JPEG di atas 200 KB, LCP berada di rentang 3,2 sampai 4,8 detik. Padahal target Good adalah di bawah 2,5 detik.

Cara Pasang Fetchpriority di Image Hero

Pasang atribut langsung di tag <img> atau component Next.js Image. Berikut tiga skenario yang saya pakai di proyek client.

Skenario A: HTML Murni

html

<img
  src="/hero.webp"
  alt="Konsultasi marketing digital"
  width="1200"
  height="600"
  fetchpriority="high"
  decoding="async">

Skenario B: Next.js Image Component

jsx

import Image from "next/image";

<Image
  src="/hero.webp"
  alt="Konsultasi marketing digital"
  width={1200}
  height={600}
  priority
  fetchPriority="high"
/>

Atribut priority di Next.js sudah otomatis menambahkan fetchpriority="high" sejak versi 13.5. Pasang manual jika versi Next.js di proyek Anda lebih lama.

Skenario C: Background Image via CSS

CSS background-image tidak menerima atribut fetchpriority langsung. Pakai <link rel="preload" as="image" fetchpriority="high"> di <head>:

html

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

Penting: jangan pasang fetchpriority="high" lebih dari satu elemen per halaman. Memprioritaskan semua sama saja dengan tidak memprioritaskan apa-apa.

Studi Kasus: Aris Setiawan

Saat audit personal brand Aris Setiawan di bulan Maret 2026, halaman pricing memiliki LCP 4,1 detik di field data CrUX. Image hero berupa foto profesional 850 KB yang sudah di-konversi ke WebP, tetapi prioritas unduhannya kalah dari font kustom Inter dan skrip analytics.

Langkah yang saya ambil:

Tambah fetchpriority="high" di Next.js Image component hero.
Tambah <link rel="preload"> untuk versi gambar di viewport mobile.
Tambah display=optional di font Inter agar tidak memblokir render.

Hasil setelah 14 hari pengumpulan field data baru: LCP turun ke 2,3 detik. CLS dan INP tidak terdampak. Tidak ada migrasi framework, tidak ada perubahan hosting.

Pertanyaan Umum

Apakah fetchpriority sama dengan preload?

Tidak persis. fetchpriority memodifikasi prioritas resource yang sudah dideklarasikan di HTML. <link rel="preload"> menambah resource baru yang diunduh lebih awal. Keduanya dapat dikombinasikan untuk image hero.

Apa risiko salah pasang fetchpriority?

Jika dipasang di terlalu banyak resource, browser kehilangan kemampuan memprioritaskan. Jika dipasang di gambar yang tidak berada di viewport pertama, resource non-kritis ikut menyedot bandwidth dan justru memperlambat elemen LCP yang sebenarnya.

Apakah fetchpriority sudah didukung semua browser?

Per Mei 2026, dukungan stabil di Chrome 102+, Edge 102+, Firefox 132+, dan Safari 17.5+. Browser lama tetap berfungsi normal, hanya mengabaikan atribut tanpa error. Dokumentasi resmi dapat dibaca di web.dev/fetch-priority.

Bagaimana cara memverifikasi atribut bekerja?

Buka Chrome DevTools, tab Network, klik kanan kolom Name, aktifkan kolom Priority. Reload halaman dan pastikan image hero tampil dengan priority High atau Highest.

Mulai dari Lever Termurah Dulu

Sebelum mempertimbangkan migrasi framework atau berlangganan tools performance mahal, periksa apakah image hero sudah memakai fetchpriority. Ini perubahan satu baris yang dapat memindahkan skor Core Web Vitals dari merah ke hijau. Untuk audit menyeluruh, kombinasikan dengan inspeksi PageSpeed Insights dan data CrUX selama 28 hari setelah perubahan diterapkan.

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang