Resource Hints — Performance

Resource Hints Resource hints memberi tahu browser tentang resource yang akan dibutuhkan, sehingga browser bisa mulai loading lebih awal. preload Untuk…

Resource hints adalah tag <link> di <head> yang memberi tahu browser lebih awal soal sesuatu yang bakal dibutuhkan, supaya dia bisa mulai menyambung atau mengunduh sebelum menemukannya sendiri. Mirip makan di restoran: dns-prefetch itu mencari alamat restorannya dulu, preconnect itu sudah jalan ke sana dan duduk di meja, preload itu memesan hidangan utama sekarang juga karena pasti kamu makan, dan prefetch itu minta dibungkuskan makanan untuk nanti malam, dibuat kalau dapur sedang senggang.

🧪 Tebakan cepat: tanpa hint, teks halaman di Lab tampil dengan font-nya di 863 ms. Kalau font itu kamu preload tapi lupa atribut crossorigin, teksnya tampil lebih cepat, sama, atau lebih lambat? Tebak dulu, jawabannya ada di bagian "preload: unduh sekarang, pasti dipakai".

Kenapa browser telat tahu

Browser baru tahu sebuah file dibutuhkan saat dia menemukannya. Masalahnya, sebagian file baru ketahuan belakangan. Ini halaman toko di Lab (jaringan dengan jeda bolak-balik 100 ms dan kecepatan 400 KB per detik):

File	Ditemukan saat	Selesai
`index.html`	awal	450 ms
`style.css`, `app.js`	`<head>` HTML terbaca, 400 ms	650 ms, 976 ms
font `inter.woff2`	CSS selesai dibaca, 650 ms	863 ms
data `api.tokoku.id/produk`	`app.js` selesai jalan, 1.026 ms	1.451 ms

Font baru diminta setelah CSS selesai, karena @font-face ada di dalam CSS. Data produk baru diminta setelah app.js jalan, dan karena alamatnya di origin lain, browser masih harus menyambung ke sana dulu. Resource hints memindahkan pekerjaan itu ke depan.

preconnect dan dns-prefetch: siapkan jalannya

Menyambung ke origin baru (gabungan protokol, domain dan port, misalnya https://api.tokoku.id) butuh tiga langkah, masing-masing sekitar satu kali bolak-balik ke server:

DNS: mencari alamat IP dari nama domain.
TCP: membuka sambungan.
TLS: menyepakati enkripsi untuk HTTPS.

Di Lab itu 3 × 100 ms = 300 ms sebelum request pertama bisa dikirim.

<!-- Pasti dipakai sebentar lagi: siapkan DNS + TCP + TLS sekarang -->
<link rel="preconnect" href="https://api.tokoku.id" crossorigin>

<!-- Dipakai belakangan: cukup cari alamatnya dulu -->
<link rel="dns-prefetch" href="https://stats.analitik.com">

preconnect mengerjakan ketiga langkah sejak <head> terbaca. Di Lab, data produk tampil di 1.151 ms, bukan 1.451 ms: hemat 300 ms.
crossorigin di preconnect dipakai kalau origin itu diakses lewat fetch() atau untuk font. Browser memakai sambungan terpisah untuk request seperti itu, jadi tanpa crossorigin sambungan yang disiapkan gak terpakai dan cuma DNS-nya yang membantu.
dns-prefetch cuma mengerjakan DNS. Lebih murah, cocok untuk origin yang baru dipakai belakangan. Di Lab, script analitik selesai di 1.326 ms, bukan 1.426 ms.

preload: unduh sekarang, pasti dipakai

preload menyuruh browser mengunduh satu file sekarang, dengan prioritas tinggi, karena halaman ini pasti memakainya sebentar lagi.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

as="font" wajib: memberi tahu jenis isinya, supaya prioritasnya benar dan hasilnya bisa dipakai ulang. Nilai lain yang sering dipakai: style, script, image, fetch. Tanpa as, preload-nya gak berguna.
type="font/woff2" membuat browser yang gak mendukung format itu melewatkannya.
crossorigin wajib untuk font, walaupun file-nya di domain sendiri. Font selalu diminta dengan mode CORS. Preload tanpa crossorigin gak cocok dengan request itu, jadi font-nya diunduh dua kali.

Di Lab, font yang di-preload dengan benar membuat teks tampil di 726 ms, bukan 863 ms. Tanpa crossorigin, teksnya malah tampil di 939 ms: lebih lambat daripada tanpa hint sama sekali, karena 30 KB terbuang ikut berebut bandwidth. Itu jawaban tebakannya. Chrome juga menulis peringatan di Console: "A preload for '...' is found, but is not used because the request credentials mode does not match."

prefetch: untuk halaman berikutnya

prefetch untuk file yang mungkin dibutuhkan halaman berikutnya. Browser mengunduhnya dengan prioritas paling rendah, setelah halaman ini selesai, lalu menyimpannya di cache.

<link rel="prefetch" href="/assets/produk.js">

Di Lab, produk.js (chunk halaman Produk dari pelajaran code splitting) diunduh diam-diam setelah halaman selesai. Waktu user mengklik Produk, dia langsung ada di cache: menunggu 0 ms, bukan 225 ms.

Bedanya dengan preload: preload untuk halaman ini dan pasti dipakai; prefetch untuk halaman berikutnya dan mungkin dipakai.

Hint itu gak gratis

Tiap hint membuat browser bekerja berdasarkan tebakanmu. Tebakan yang salah membuang tenaga:

Terlalu banyak preload. Di Lab, kalau enam gambar galeri (6 × 60 KB) ikut di-preload, semuanya berebut bandwidth dengan CSS dan font. Teks yang tadinya tampil di 726 ms mundur ke 1.026 ms. Preload cuma untuk 1 sampai 3 file yang benar-benar kritis, misalnya font utama dan gambar paling atas.
Prefetch yang jarang dipakai. Kalau kamu prefetch 20 halaman tapi cuma 2 dari 10 user pindah ke sana, bandwidth (kuota data), CPU, dan baterai mereka terbuang untuk file yang gak dipakai, dan unduhannya bisa berebut dengan halaman yang sedang dibuka. Prefetch berdasarkan data analytics, bukan tebakan.
Terlalu banyak preconnect. Sambungan yang dibuka tapi gak dipakai ditutup lagi setelah beberapa detik. Batasi ke 2 sampai 4 origin yang pasti dipakai. Sisanya cukup dns-prefetch.

💡 fetchpriority, modulepreload, dan Speculation Rules

fetchpriority="high" di <img> atau <link rel="preload"> menaikkan prioritas satu file, misalnya gambar LCP. fetchpriority="low" menurunkannya.
<link rel="modulepreload" href="/assets/app.js"> adalah preload khusus ES module: file-nya diunduh dan langsung disiapkan sebagai module. Vite memakainya untuk chunk yang pasti dibutuhkan.
rel="prerender" yang lama sudah ditinggalkan. Penggantinya Speculation Rules API (<script type="speculationrules">), yang bisa prefetch atau bahkan prerender halaman berikutnya. Saat ini terutama didukung Chrome dan Edge; browser yang belum mendukung mengabaikannya, jadi aman dipasang.

⚠️ Jebakan yang sering ketemu

Preload font tanpa crossorigin. Font-nya diunduh dua kali dan teks malah tampil lebih lambat. Tulis crossorigin walaupun font-nya di domain sendiri.
Preload tanpa as. Browser gak tahu jenis isinya, dan file-nya gak dipakai ulang. Untuk font tulis as="font".
Salah tulis rel. Nilainya harus persis preload, preconnect, prefetch, atau dns-prefetch. Typo diam-diam diabaikan, tanpa error.
Preload yang gak dipakai. Kalau file yang di-preload gak dipakai dalam beberapa detik, Chrome memberi peringatan "was preloaded using link preload but not used within a few seconds". Itu tanda bandwidth terbuang.

TL;DR: Resource hints adalah <link> di <head> yang memindahkan pekerjaan ke depan. preconnect menyiapkan DNS, TCP dan TLS ke origin yang pasti dipakai (di Lab data produk 1.451 ms jadi 1.151 ms); dns-prefetch cuma DNS, untuk origin yang dipakai belakangan. preload mengunduh file kritis halaman ini sekarang, wajib dengan as (as="font"), dan font juga butuh crossorigin (teks 863 ms jadi 726 ms; tanpa crossorigin malah 939 ms). prefetch mengunduh file halaman berikutnya dengan prioritas rendah. Hint gak gratis: terlalu banyak preload memperlambat yang kritis, dan prefetch yang jarang dipakai membuang kuota, CPU dan baterai user.