Resource Hints

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

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

preload

Untuk resource yang pasti dibutuhkan di halaman ini. Browser langsung mulai download.

<!-- Preload font yang digunakan di halaman ini -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload hero image -->
<link rel="preload" href="/hero.webp" as="image">

<!-- Preload critical CSS -->
<link rel="preload" href="/critical.css" as="style">

prefetch

Untuk resource yang mungkin dibutuhkan nanti (halaman berikutnya). Browser download di idle time.

<!-- Prefetch halaman yang kemungkinan dikunjungi -->
<link rel="prefetch" href="/dashboard.js">

dns-prefetch & preconnect

<!-- Resolve DNS untuk third-party domain -->
<link rel="dns-prefetch" href="https://api.example.com">

<!-- DNS + TCP + TLS handshake -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Panduan Penggunaan

preload — LCP image, critical font, above-the-fold CSS
prefetch — Next page resources, lazy-loaded chunks
preconnect — Third-party APIs, CDN, analytics
dns-prefetch — Domain yang mungkin diakses

Kapan Tidak Menggunakan Resource Hints

Resource hints adalah "biaya yang dibayar di muka" — browser spend bandwidth, CPU, dan battery berdasarkan tebakan Anda. Tebakan yang salah justru memperlambat halaman.

Prefetch untuk navigasi yang tidak terjadi — kalau hanya 10% user ke halaman X, 90% prefetch terbuang. Ukur analytics dulu sebelum prefetch.
Preconnect ke origin non-kritis — setiap preconnect membuka socket + TLS handshake. Limit maksimal 4-6 preconnect; lebih dari itu CPU-hungry di mobile.
Preload untuk konten below-the-fold atau lazy-loaded — preload menaikkan prioritas ke "Highest", bersaing dengan LCP image. Jangan preload gambar yang dilazy-load.
Preload seluruh font family — hanya preload weight yang dipakai di above-the-fold (biasanya Regular 400 + Bold 700). Italic/Light bisa dimuat on-demand.
rel="prerender" sudah deprecated — diganti dengan Speculation Rules API (<script type="speculationrules">) yang lebih predictable dan terkontrol.

Budget Resource Hints

Aturan praktis: maksimal 2-3 preload per halaman, dan hanya untuk resource yang benar-benar kritis (LCP image, 1-2 font kritis). Lebih dari itu, browser mulai mengabaikan priority hint dan Anda kehilangan kontrol.

<!-- BURUK — preload semua gambar gallery -->
<link rel="preload" href="/gallery/1.jpg" as="image">
<link rel="preload" href="/gallery/2.jpg" as="image">
<link rel="preload" href="/gallery/3.jpg" as="image">

<!-- BAIK — preload hanya hero/LCP image -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<!-- Gallery lazy-load dengan loading="lazy" -->

Speculation Rules API

Pengganti modern rel="prerender". Browser bisa prefetch atau prerender halaman berdasarkan aturan:

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/product/*" },
    "eagerness": "moderate"
  }]
}
</script>

Didukung Chrome 121+. Fallback aman: browser lama abaikan tag ini.

Resource Hints — Performance