fetchpriority: Cara Website Bisnis Indonesia Menurunkan LCP dengan Satu Atribut HTML

TL;DR: fetchpriority adalah atribut HTML yang membiarkan developer memberi tahu browser resource mana yang harus diambil duluan. Memasang fetchpriority="high" pada LCP image biasanya menurunkan LCP 200-800 ms tanpa preload tag tambahan, dan fetchpriority="low" pada widget chat atau iframe footer menurunkan kontensi network queue. Per April 2026, dukungan browser sudah merata sehingga atribut ini aman dipakai di production.

Sebagian besar website bisnis Indonesia yang saya audit punya masalah yang sama, LCP di angka 3-5 detik di koneksi 4G median. Penyebabnya jarang resource raksasa, melainkan urutan pengambilan resource yang berantakan. Browser punya heuristik internal untuk memprioritaskan resource, tapi heuristik itu sering kalah dengan realitas halaman bisnis modern yang menumpuk script analytics, widget chat, pixel iklan, dan A/B testing tools.

fetchpriority adalah cara membungkam debat itu. Anda memberi sinyal eksplisit, browser ikuti.

Apa Masalah yang Diselesaikan fetchpriority?

Sebelum atribut ini ada, satu-satunya cara mengontrol prioritas resource adalah preload tag. Preload bekerja, tapi punya tiga kelemahan. Pertama, mudah disalahgunakan sehingga semua resource dianggap critical dan tidak ada yang prioritas. Kedua, tidak bisa menurunkan prioritas resource, hanya menaikkan. Ketiga, sering konflik dengan caching pihak ketiga.

Saat membantu Vetmo (pet care booking) memperbaiki Core Web Vitals, kami menemukan bahwa hero image utama selalu dimuat setelah 4 script analytics karena browser memprioritaskan script di bagian head. Memasang fetchpriority="high" pada img hero dan fetchpriority="low" pada widget chat di bawah lipatan menurunkan LCP image dari 3.8 detik ke 2.4 detik di koneksi 4G median, sebuah perbaikan 36% hanya dengan dua atribut.

Sintaks dan Pemakaian

Untuk Next.js, properti priority pada komponen Image otomatis menambahkan fetchpriority="high" ke output HTML, jadi developer tidak perlu menulis manual. Contoh:

import Image from 'next/image'

<Image
  src="/hero.webp"
  alt="Hero"
  width={1200}
  height={630}
  priority
/>

Untuk iframe widget chat seperti Tawk.to atau Crisp yang biasanya di footer, bungkus dengan dynamic import dan tambahkan fetchpriority="low" ke wrapper iframe-nya. Pendekatan ini melengkapi strategi memindahkan tracking dengan web worker untuk script pihak ketiga.

Apa yang Tidak Dilakukan fetchpriority?

Atribut ini bukan magic bullet. Tiga hal penting untuk diingat. Pertama, fetchpriority tidak mengubah ukuran file atau jumlah request, jadi gambar 5 MB tetap akan lambat walau prioritasnya tinggi. Kedua, browser tetap punya keterbatasan paralel HTTP/2 yang membatasi berapa request bisa jalan bersamaan. Ketiga, fetchpriority pada terlalu banyak resource sama saja dengan tidak ada prioritas, gunakan secara selektif.

Best practice yang saya pakai di proyek client adalah satu fetchpriority="high" per halaman, biasanya pada LCP image, dan beberapa fetchpriority="low" untuk resource bawah lipatan. Untuk strategi caching pendukung, lihat cache control CDN.

Kompatibilitas Browser

Per April 2026, fetchpriority didukung penuh di Chrome (sejak v101), Edge, Safari (sejak v17.2), dan Firefox (sejak v132). Browser lama mengabaikan atribut ini tanpa error, sehingga aman ditambahkan ke website production tanpa fallback. Data terbaru bisa dicek di MDN compat table.

Pertanyaan Umum

Apakah fetchpriority menggantikan preload?

Tidak sepenuhnya. Preload tetap berguna untuk resource yang ditemukan terlambat oleh parser, misalnya font yang dirujuk dari CSS yang baru di-parse setelah download CSS-nya. fetchpriority cukup untuk resource yang sudah ada di HTML.

Bisakah fetchpriority="high" dipakai di banyak gambar sekaligus?

Bisa secara teknis, tapi tidak disarankan. Browser akan memprioritaskan semua secara setara, yang efeknya sama dengan tidak ada prioritas. Pilih satu LCP image saja per halaman.

Apakah ada efek samping ke server?

Tidak ada. Atribut ini dievaluasi di sisi browser, server tidak tahu prioritas yang diminta klien.

Bagaimana mengukur efek setelah pemasangan?

Pakai Real User Monitoring untuk mengukur LCP sebelum dan sesudah. Lab test seperti PageSpeed Insights bisa memberi hint awal, tapi data lapangan dari RUM sampling lebih representatif untuk pengguna Indonesia.

Atribut Kecil, Dampak Nyata

fetchpriority adalah contoh klasik web platform feature yang sederhana di permukaan tapi membutuhkan pemahaman mendalam tentang network queue browser untuk dipakai dengan benar. Untuk website bisnis Indonesia yang umumnya melayani audiens dengan koneksi mixed, atribut ini adalah salah satu tweak performa termurah. Tidak butuh refactor kode, tidak butuh CDN baru, hanya satu baris pada elemen yang tepat.