Digital Transformation
Fetch Priority
Fetch Priority adalah atribut HTML yang memberi tahu browser resource mana yang harus diunduh lebih dulu, biasanya dipakai untuk mempercepat tampilnya gambar utama (LCP) di sebuah halaman.
TL;DR: Fetch Priority adalah atribut HTML (
fetchpriority) yang memberi sinyal eksplisit ke browser tentang prioritas unduhan sebuah resource. Untuk website bisnis, atribut ini paling sering dipakai pada gambar hero atau LCP element agar tampil lebih cepat tanpa mengorbankan resource lain.
Apa itu Fetch Priority?
Fetch Priority adalah hint resmi yang ditambahkan ke elemen seperti <img>, <link>, dan <script> melalui atribut fetchpriority="high" atau fetchpriority="low". Browser modern punya algoritma internal untuk menentukan urutan unduhan, namun pada halaman yang berat dan kompleks, prediksi default kadang meleset. Atribut ini menutup celah itu dengan memberi instruksi yang lebih kuat dari sekadar urutan elemen.
Bedanya dengan preload: preload berkata "ambil resource ini lebih awal", sedangkan fetch priority berkata "saat kamu mengambilnya, naikkan atau turunkan prioritasnya dibanding resource lain di antrian yang sama". Keduanya saling melengkapi.
Cara Pakai Fetch Priority
Skenario paling umum, mempercepat LCP di halaman landing page:
| Elemen | Aturan praktis |
|---|---|
| Gambar hero / LCP | fetchpriority="high" |
| Gambar di carousel slide ke-2 dst | fetchpriority="low" atau pakai lazy loading |
| Script analitik non-kritikal | fetchpriority="low" |
| Font kustom utama | preload + fetchpriority="high" |
Berdasarkan praktik pengukuran Core Web Vitals yang saya pakai di proyek client, kombinasi fetch priority dan lazy loading sering memangkas LCP 200-500 ms pada halaman dengan banyak gambar.
Kenapa Penting?
LCP adalah salah satu metrik penentu peringkat di Google. Halaman e-commerce dan landing page dengan gambar produk besar paling rentan, terutama di koneksi 4G yang fluktuatif. Tanpa hint, browser mungkin memprioritaskan banner placeholder atau gambar di luar viewport awal. Fetch priority membantu memperbaiki ini tanpa perlu rombak struktur halaman.
Dokumentasi resmi tersedia di Priority Hints di web.dev. Adopsi atribut ini sudah luas, namun sebagian browser lama mungkin mengabaikannya, jadi anggap sebagai optimisasi tambahan, bukan satu-satunya solusi.
Pertanyaan Umum
Apakah fetchpriority="high" akan membuat semua resource lain lambat?
Tidak otomatis. Browser tetap mengeksekusi paralel sebanyak mungkin, hanya saja resource yang ditandai high masuk ke antrian lebih dulu. Hindari menandai banyak elemen sebagai high karena efeknya jadi netral.
Apakah Next.js sudah otomatis menambahkan fetch priority?
Komponen next/image dengan prop priority secara default menyetel fetchpriority="high". Untuk gambar non-kritikal, biarkan default agar Next.js memutuskan.