Digital Transformation
Prefetch (Resource Hint)
Prefetch adalah resource hint yang memerintahkan browser mengunduh aset atau halaman yang kemungkinan besar dibutuhkan berikutnya, agar navigasi terasa instan saat pengguna mengkliknya.
TL;DR: Prefetch adalah instruksi ringan ke browser, biasanya lewat
<link rel="prefetch">atau API kerangka kerja modern, untuk mengunduh aset atau halaman saat browser sedang idle. Tujuannya bukan menampilkan halaman tersebut sekarang, tapi menyiapkan respons di cache sehingga klik berikutnya terasa instan.
Apa itu Prefetch?
Prefetch adalah salah satu resource hint web yang memberi tahu browser, "ambil resource ini saat kamu sempat, saya kemungkinan butuh nanti". Berbeda dengan preload yang mengindikasikan resource kritis untuk halaman saat ini, prefetch fokus pada navigasi atau interaksi berikutnya. Implementasi paling sederhana adalah tag HTML <link rel="prefetch" href="/halaman-berikutnya">. Framework seperti Next.js melakukannya otomatis untuk komponen <Link> yang masuk ke viewport.
Analoginya seperti pelayan kafe yang menyiapkan kopi pelanggan reguler sebelum mereka menyebut pesanan. Kalau tebakannya benar, pelanggan dapat kopi lebih cepat. Kalau salah, hanya ada sedikit usaha terbuang.
Cara Kerja dan Jenis
| Jenis | Tujuan | Kapan Dipakai |
|---|---|---|
prefetch | Ambil resource untuk navigasi berikutnya | Halaman yang kemungkinan dikunjungi pengguna |
preload | Ambil resource kritis untuk halaman saat ini | Font, hero image, script kritis |
preconnect | Buka koneksi DNS+TCP+TLS lebih awal | Domain pihak ketiga yang pasti dipakai |
dns-prefetch | Resolusi DNS saja | Domain non-kritis |
Browser memprioritaskan prefetch dengan prioritas rendah, jadi tidak mengganggu permintaan kritis halaman aktif. Sejak 2024, [Speculation Rules API](/glosarium/speculation-rules) menjadi penerus modern yang mendukung prerender penuh, bukan hanya prefetch resource.
Kenapa Penting?
Bagi pebisnis Indonesia dengan pengguna di jaringan 4G yang variatif, prefetch adalah cara murah menutupi latensi jaringan. Klik dari halaman daftar produk ke halaman detail bisa terasa di bawah 100 ms padahal jaringan butuh 400 ms untuk fetch fresh. Trade-off-nya bandwidth: prefetch berlebih bisa membebani kuota pengguna mobile. Praktik standar di industri merekomendasikan prefetch hanya pada link yang terlihat (in-viewport) atau saat hover di desktop.
Pertanyaan Umum
Apakah prefetch sama dengan preload?
Tidak. Preload untuk resource kritis halaman saat ini dan harus diunduh segera. Prefetch untuk resource halaman berikutnya, dijalankan saat browser idle dengan prioritas rendah.
Apakah prefetch boros kuota pengguna?
Bisa, jika dipakai sembarangan. Praktik baik adalah membatasi prefetch ke link yang in-viewport, mempertimbangkan flag Save-Data, dan tidak prefetch halaman besar tanpa sinyal niat dari pengguna.
Istilah Terkait