Digital Transformation
Speculation Rules API
TL;DR: Speculation Rules API adalah API browser dari tim Chrome yang memberi instruksi deklaratif untuk prerender atau prefetch halaman tujuan sebelum diklik. Hasilnya, navigasi antar halaman bisa terasa hampir nol detik. Per April 2026, API ini sudah stabil di Chrome dan Edge, dan menjadi alternatif yang lebih kuat dibanding tag
<link rel="prefetch">lama.
Apa itu Speculation Rules API?
Speculation Rules API memungkinkan developer mendeklarasikan aturan dalam blok <script type="speculationrules"> untuk memberi tahu browser halaman mana yang kemungkinan besar akan dikunjungi berikutnya. Browser lalu memuat dan merender halaman itu di background. Saat user benar-benar mengklik link, halaman sudah siap di memory dan transisi langsung tampil. Bedanya dengan prefetch klasik, Speculation Rules bisa melakukan full prerender, termasuk eksekusi JavaScript halaman tujuan.
Cara Kerja Singkat
| Mode | Aksi Browser | Kapan Pakai |
|---|---|---|
prefetch | Download HTML + asset, belum render | Halaman dengan kemungkinan kunjungan sedang |
prerender | Full render + eksekusi JS, hidden tab | Halaman tujuan paling mungkin (top-1 navigasi) |
Aturan ditulis dalam JSON di dalam script tag. Browser otomatis menghormati Core Web Vitals dan tidak akan prerender jika koneksi user lemah atau memory rendah.
Kenapa Penting?
Untuk website bisnis Indonesia yang mengandalkan navigasi multi-step (landing > produk > checkout), Speculation Rules API bisa memangkas LCP navigasi berikutnya hampir habis. Bagi marketer, ini berarti bounce rate turun di funnel dan conversion rate naik tanpa rewrite frontend. Praktik dari proyek client menunjukkan reduksi waktu navigasi 60-80% pada halaman top-3 traffic.
Pertanyaan Umum
Apakah Speculation Rules API sama dengan Next.js prefetch?
Tidak persis. Next.js <Link> prefetch hanya download chunk JS dan data, sementara Speculation Rules bisa full prerender halaman lengkap dengan eksekusi JS. Keduanya bisa dipakai bersamaan untuk hasil maksimal.
Apakah ada risiko bandwidth untuk user mobile?
Ada. Karena itu API ini dirancang konservatif: browser otomatis disable prerender di koneksi Save-Data, baterai rendah, atau RAM terbatas. Tetap pertimbangkan budget prerender untuk situs traffic tinggi.