Digital Transformation
fetchpriority Attribute
TL;DR: fetchpriority adalah atribut HTML yang memungkinkan developer memberi tahu browser resource mana yang harus diambil duluan dan mana yang bisa ditunda. Tiga nilai yang valid adalah high, low, dan auto. Pemakaian paling umum adalah menandai LCP image dengan fetchpriority="high" agar Largest Contentful Paint turun signifikan tanpa preload tag tambahan.
Apa itu fetchpriority?
fetchpriority adalah atribut HTML yang dirilis Chromium pada 2022 dan kini didukung mayoritas browser modern. Atribut ini menggantikan kebutuhan akan trik manual seperti preload link untuk mengontrol urutan resource. Browser punya heuristik internal untuk menentukan prioritas, tapi heuristik itu tidak selalu cocok dengan layout halaman. Untuk halaman kompleks dengan banyak gambar above-the-fold, fetchpriority memberi sinyal eksplisit yang biasanya menurunkan LCP image di angka 200-800 ms.
Cara Kerja
| Nilai | Efek | Kapan dipakai |
|---|---|---|
| high | Resource diprioritaskan dalam antrian network | LCP image, hero font, critical CSS |
| low | Resource diturunkan prioritasnya | Gambar di footer, script analytics |
| auto | Browser memutuskan sendiri | Default, biarkan jika resource tidak kritis |
Atribut ini bisa dipasang pada tag img, link, script, dan iframe. Untuk Next.js, properti priority pada komponen Image otomatis menambahkan fetchpriority="high" ke output HTML.
Kenapa Penting untuk Website Bisnis?
Website Indonesia rata-rata punya banyak script tracking pihak ketiga yang ikut mengantre dalam network queue browser. Tanpa sinyal eksplisit, browser sering memprioritaskan script analytics di atas hero image, sehingga LCP tertunda. Memasang fetchpriority="high" pada gambar utama dan fetchpriority="low" pada widget chat di footer adalah dua tweak murah yang sering memperbaiki Core Web Vitals tanpa refactor besar.
Pertanyaan Umum
Apakah fetchpriority menggantikan preload?
Tidak sepenuhnya. Preload tetap berguna untuk resource yang ditemukan terlambat oleh parser, sementara fetchpriority cukup untuk resource yang sudah ada di HTML.
Apakah aman dipakai di production sekarang?
Aman. Per April 2026 dukungan browser sudah merata di Chrome, Edge, Safari, dan Firefox. Browser lama akan mengabaikan atribut ini tanpa error.
Istilah Terkait