Priority Hint (Atribut fetchpriority)

TL;DR: Priority Hint adalah atribut HTML fetchpriority (high, low, auto) yang memberitahu browser urutan prioritas pengunduhan sumber daya. Untuk website bisnis Indonesia, atribut ini bisa memangkas LCP gambar hero hingga ratusan milidetik tanpa mengganti infrastruktur.

Apa itu Priority Hint?

Priority Hint, dikenal juga dengan nama atribut fetchpriority, adalah cara mendeklarasikan kepada browser bahwa satu sumber daya lebih penting dari yang lain. Browser punya algoritma prioritas internal sendiri, tapi algoritma itu tidak selalu paham mana gambar hero, mana ikon dekoratif. Dengan Priority Hint, developer bisa memberi sinyal eksplisit. Atribut ini berkaitan erat dengan LCP sebagai salah satu metrik Core Web Vitals.

Analogi sederhananya seperti label "Prioritas" di paket pengiriman. Kurir tahu paket biasa dan paket urgent, tapi kalau Anda tidak menempel label prioritas, semua dianggap sama.

Nilai dan Pemakaian

Contoh penerapan untuk gambar hero:

<img src="/hero.webp" fetchpriority="high" alt="...">

Untuk panduan lengkap, web.dev menyediakan dokumentasi resmi tentang fetchpriority.

Kenapa Penting?

Untuk pengguna 4G di Indonesia dengan latensi 80 sampai 150 ms, browser sering salah memprioritaskan resource. Akibatnya gambar hero dimuat setelah skrip pihak ketiga. Priority Hint mengoreksi urutan ini secara eksplisit. Dampaknya terasa pada metrik LCP dan secara tidak langsung pada bounce rate. Pasangkan dengan responsive design untuk efek maksimal.

Pertanyaan Umum

Apakah Priority Hint didukung semua browser?

Chromium-based (Chrome, Edge, Opera) sudah mendukung sejak 2022. Safari dan Firefox menyusul. Browser yang belum mendukung akan mengabaikan atribut tanpa error.

Apakah saya bisa pakai high di banyak elemen?

Sebaiknya tidak. Kalau semua sumber daya berprioritas tinggi, tidak ada yang prioritas. Pakai high hanya untuk satu hingga tiga elemen kritis.