Digital Transformation
Priority Hints (fetchpriority)
TL;DR: Priority Hints adalah atribut HTML
fetchpriorityyang memberi sinyal eksplisit ke browser tentang prioritas pengunduhan resource. Nilaihigh,low, atauautomembantu browser menempatkan gambar hero, font, atau script kritis di antrian yang benar. Per 2026, atribut ini didukung penuh Chrome, Edge, dan Safari, jadi sudah aman dipakai di produksi.
Apa itu Priority Hints?
Priority Hints adalah mekanisme browser hint berbasis atribut HTML fetchpriority yang memungkinkan developer memberi tahu browser resource mana yang prioritas tinggi atau rendah. Atribut ini bekerja pada <img>, <link>, <script>, dan Fetch API. Sebelum ada Priority Hints, browser menebak prioritas berdasarkan heuristik internal yang sering meleset pada gambar hero atau LCP element. Atribut ini melengkapi praktik Core Web Vitals yang menuntut LCP di bawah 2,5 detik.
Cara Kerja & Nilai yang Tersedia
| Nilai | Kapan Dipakai |
|---|---|
high | Gambar hero/LCP, font kritis, script di atas lipatan |
low | Gambar di bawah lipatan, banner promo, widget chat |
auto | Default, biarkan browser memutuskan |
Contoh implementasi pada gambar hero Next.js:
<Image src="/hero.webp" fetchPriority="high" priority alt="..." />
Kombinasi priority (Next.js) dan fetchPriority="high" (browser hint) mengirim dua sinyal sekaligus. Untuk script analytics yang tidak kritis, gunakan fetchpriority="low" supaya tidak rebutan bandwidth dengan resource utama.
Kenapa Penting?
Berdasarkan praktik optimasi LCP di banyak proyek e-commerce Indonesia, pemasangan Priority Hints pada gambar hero rata-rata memangkas LCP 15-30%. Dampaknya langsung terasa di Core Web Vitals dan ranking pencarian Google. Untuk pemilik website bisnis, perbaikan LCP juga menurunkan bounce rate mobile yang sensitif terhadap kecepatan loading.
Pertanyaan Umum
Apakah Priority Hints sama dengan preload?
Tidak. Preload (<link rel="preload">) memerintahkan browser mengunduh resource lebih awal, sedangkan Priority Hints hanya mengubah urutan prioritas dalam antrian yang sudah ada. Keduanya bisa dipakai bersamaan.
Apakah aman dipakai di produksi 2026?
Ya. Per 2026 sudah didukung Chrome 101+, Edge 101+, Safari 17.2+. Browser lama akan mengabaikan atribut ini tanpa error, jadi aman sebagai progressive enhancement.
Berapa banyak resource boleh diberi fetchpriority="high"?
Idealnya hanya 1-2 resource per halaman. Jika semua diberi prioritas tinggi, sinyal jadi tidak bermakna dan browser kembali ke heuristik default.
Istilah Terkait