Digital Transformation
Prefetch (link rel="prefetch")
TL;DR: Prefetch (
<link rel="prefetch">) adalah resource hint yang menyuruh browser mengunduh halaman atau aset pada prioritas rendah saat browser sedang idle. Tujuannya: ketika pengguna mengklik link tersebut, halaman sudah ada di cache HTTP dan navigasi terasa instan. Berbeda dengan preload yang menarik aset kritis untuk halaman aktif, prefetch menarik aset untuk halaman berikutnya.
Apa itu Prefetch?
Prefetch adalah salah satu resource hint yang didefinisikan W3C dan didukung Chrome, Edge, serta Firefox. Sintaksnya cukup satu baris di <head> atau di-inject runtime: <link rel="prefetch" href="/harga">. Saat browser tidak sibuk merender halaman aktif, ia akan mengunduh /harga ke cache HTTP. Begitu pengguna mengklik link ke /harga, browser mengambilnya dari cache lokal, bukan jaringan.
Analogi sederhana: prefetch seperti barista yang menyiapkan kopi favorit pelanggan tetap sebelum mereka memesan. Saat pelanggan datang, kopi sudah jadi. Risiko kecil: kalau pelanggan tidak datang, kopi terbuang. Risiko prefetch serupa, bandwidth terpakai untuk halaman yang belum tentu dibuka.
Cara Kerja vs Preload vs Prerender
Tiga resource hint sering tertukar. Berikut perbandingan singkat untuk konteks marketer:
| Hint | Tujuan | Prioritas |
|---|---|---|
preload | Tarik aset kritis untuk halaman AKTIF (font, hero image) | Tinggi |
prefetch | Tarik aset untuk navigasi BERIKUTNYA | Rendah, saat idle |
prerender | Render penuh halaman berikutnya di background | Sangat tinggi, mahal |
Untuk strategi UX yang lebih agresif, gunakan Speculation Rules API yang menggantikan prerender lama. Next.js sudah otomatis melakukan prefetch pada komponen <Link> di viewport, tapi kontrol manual tetap berguna untuk halaman strategis.
Kenapa Penting?
Bagi marketer yang memantau Core Web Vitals dan engagement, prefetch memengaruhi dua sinyal langsung. Pertama, LCP halaman berikutnya bisa turun drastis karena HTML utama sudah di cache. Kedua, bounce rate berkurang karena pengguna tidak melihat loading spinner antar halaman. Praktik standar di proyek Indonesia: prefetch halaman /harga, /kontak, dan landing page promo dari halaman home. Jangan prefetch semua link, itu hanya membebani kuota pengguna seluler.
Pertanyaan Umum
Apakah prefetch dijalankan otomatis di Next.js?
Ya. Komponen <Link> di Next.js melakukan prefetch otomatis untuk link yang masuk viewport saat produksi. Untuk menonaktifkan, set prop prefetch={false}. Untuk manual prefetch di luar <Link>, gunakan router.prefetch('/path') dari next/navigation.
Apakah prefetch menghabiskan kuota pengguna seluler?
Bisa. Chrome menghormati Save-Data header dan koneksi 2G/3G dengan menunda atau membatalkan prefetch. Tetap saja, hindari prefetch link yang jarang diklik. Audit dengan DevTools Network panel, filter Initiator: prefetch.
Istilah Terkait