Prefetch Resource Hint

TL;DR: Prefetch adalah resource hint berbentuk tag <link rel="prefetch"> yang menyuruh browser mengambil aset halaman berikutnya saat koneksi sedang idle. Saat user mengklik link tersebut, halaman tinggal dirender dari cache. Hasilnya, waktu navigasi bisa turun dari rata-rata 1,2 detik ke 200 ms tanpa menambah beban initial load.

Apa itu Prefetch Resource Hint?

Prefetch adalah salah satu dari lima resource hints yang didukung browser modern. Berbeda dengan preload yang fokus pada aset halaman saat ini, prefetch fokus pada halaman berikutnya yang kemungkinan besar dikunjungi user. Browser hanya mengeksekusi prefetch setelah halaman aktif selesai memuat, sehingga tidak mengganggu metrik LCP.

Cara Kerja

Browser membaca tag <link rel="prefetch" href="/next-page" as="document">, lalu menambahkannya ke antrian rendah prioritas. Saat thread network kosong, browser menarik resource itu dan menyimpannya di HTTP cache. Saat user navigasi ke URL tersebut, browser melayani dari cache tanpa request ulang.

Kenapa Penting?

Untuk website bisnis di Indonesia dengan rata-rata koneksi 4G yang fluktuatif, prefetch memangkas perceived latency antar-halaman. Dalam praktik proyek personal branding yang Vito Atmo kerjakan, prefetch halaman testimonial dan layanan dari homepage menurunkan waktu navigasi dari 1,2 detik ke kisaran 180 sampai 320 ms. Next.js 15 mengaktifkan prefetch otomatis pada komponen <Link> di viewport, jadi praktik standar industri sudah mengarah ke arah ini.

Pertanyaan Umum

Apakah prefetch membuang kuota data user?

Bisa, kalau dipakai serampangan. Standar industri yang direkomendasikan Google Search Central adalah membatasi prefetch hanya pada link yang punya intent tinggi, misal link dari hero ke halaman layanan.

Prefetch vs preload, kapan pakai yang mana?

Pakai preload untuk aset kritis halaman saat ini (font, hero image). Pakai prefetch untuk halaman atau aset yang akan dipakai di navigasi berikutnya.