Digital Transformation
fetchpriority (Resource Priority Hint)
TL;DR: fetchpriority adalah atribut HTML (
fetchpriority="high"atau"low") yang memberi sinyal prioritas pemuatan resource ke browser. Dipakai dengan benar, atribut ini mempercepat gambar hero sehingga skor LCP membaik tanpa menambah ukuran halaman.
Apa itu fetchpriority?
fetchpriority adalah atribut yang bisa dipasang pada elemen seperti img, link, dan script untuk menaikkan atau menurunkan urutan unduh resource. Browser secara default menebak prioritas berdasarkan posisi dan tipe elemen, tetapi tebakan itu tidak selalu tepat. Analoginya seperti memberi tahu kurir paket mana yang harus diantar pertama, alih-alih membiarkan kurir menebak sendiri. Atribut ini erat kaitannya dengan metrik Largest Contentful Paint yang mengukur kecepatan render konten utama.
Cara Kerja
| Nilai | Efek | Kapan dipakai |
|---|---|---|
high | Resource diunduh lebih awal | Gambar hero di atas lipatan, font kritis |
low | Resource ditunda | Gambar di bawah lipatan, ikon dekoratif |
auto | Browser memutuskan sendiri | Default |
Contoh paling umum: gambar hero yang menjadi elemen LCP biasanya diturunkan prioritasnya oleh browser karena loading="lazy" salah pasang. Menambahkan fetchpriority="high" pada gambar utama mengembalikan urutan yang benar. Praktik ini melengkapi pemahaman soal Core Web Vitals secara keseluruhan.
Kenapa Penting?
Dalam beberapa audit performa yang saya lakukan untuk halaman portofolio dan landing page klien, salah satu penyebab LCP lambat yang paling sering muncul bukan ukuran gambar, melainkan urutan unduh yang keliru. Memasang fetchpriority="high" pada satu gambar hero dapat memperbaiki LCP dalam hitungan ratusan milidetik, dan untuk pasar Indonesia yang banyak mengakses lewat jaringan seluler, selisih itu terasa nyata. Dokumentasi resmi tersedia di web.dev tentang fetchpriority.
Pertanyaan Umum
Apakah fetchpriority menggantikan optimasi ukuran gambar?
Tidak. fetchpriority mengatur urutan, bukan ukuran. Kompresi gambar dan format modern seperti WebP tetap diperlukan, lalu fetchpriority menyempurnakan urutannya.
Apakah semua browser mendukungnya?
Mayoritas browser modern berbasis Chromium dan Safari versi baru sudah mendukung. Browser lama mengabaikannya tanpa error, jadi aman dipakai sebagai progressive enhancement.
Istilah Terkait