Digital Transformation
Priority Hints (fetchpriority)
Priority Hints adalah atribut HTML (fetchpriority="high|low") yang memberi tahu browser resource mana yang harus diunduh lebih dulu, sehingga LCP dan rendering halaman lebih cepat.
TL;DR: Priority Hints adalah atribut HTML
fetchpriorityyang menetapkan prioritas pengunduhan resource seperti gambar, script, atau CSS. Dengan menandai gambar hero sebagaifetchpriority="high", browser memuatnya lebih dulu sehingga LCP turun. Atribut ini didukung Chrome sejak 2023 dan kini dipakai di Edge serta Safari versi terbaru.
Apa itu Priority Hints?
Priority Hints adalah atribut standar HTML yang memberi tahu browser tingkat kepentingan sebuah resource. Sebelumnya, browser menentukan prioritas secara otomatis dari posisi resource dan tipe file. Dengan fetchpriority, developer bisa menimpa keputusan default itu. Atribut ini melengkapi pendekatan optimasi Core Web Vitals dan sering dipakai bersama LCP sebagai target metrik utama.
Nilai yang valid hanya tiga: high, low, dan auto (default). Atribut ini bisa disematkan di tag img, link, script, dan iframe.
Cara Kerja dan Contoh
| Tag | Use Case | Contoh |
|---|---|---|
<img> | Tandai gambar hero LCP | <img src="hero.webp" fetchpriority="high"> |
<link> | Preload font kritis | <link rel="preload" as="font" fetchpriority="high"> |
<script> | Turunkan prioritas script analitik | <script src="analytics.js" fetchpriority="low"> |
Saat membangun halaman utama Vetmo (klien pet care), kami menemukan gambar hero memuat lebih lambat dari banner kategori. Setelah menambahkan fetchpriority="high" ke tag img hero, LCP turun dari 3,1 detik menjadi 2,2 detik di koneksi 4G simulasi.
Kenapa Penting?
Untuk pasar Indonesia yang dominan mobile dengan koneksi tidak konsisten, urutan unduh resource sangat menentukan kecepatan tampilan. Browser tidak selalu menebak prioritas dengan benar, terutama saat ada banyak gambar above the fold. Priority Hints memberi developer kontrol presisi tanpa perlu trik kompleks seperti inline base64 atau preload manual yang mudah salah konfigurasi.
Pertanyaan Umum
Apakah Priority Hints menggantikan preload?
Tidak. Preload (<link rel="preload">) dipakai untuk resource yang belum ditemukan parser. Priority Hints mengatur urutan resource yang sudah dikenal browser. Keduanya saling melengkapi.
Browser mana saja yang sudah mendukung?
Chrome dan Edge sejak versi 101 (2022), Safari 17 (2023), dan Firefox sejak versi 132 (2024). Untuk browser lama, atribut diabaikan tanpa error.