Speculation Rules API

TL;DR: Speculation Rules API adalah API browser yang memungkinkan website mendeklarasikan halaman mana yang ingin di-prefetch atau di-prerender lewat blok JSON. Hasilnya, klik berikutnya bisa terasa instan karena halaman tujuan sudah siap di memori browser, tanpa harus mengganti arsitektur menjadi SPA.

Apa itu Speculation Rules API?

Speculation Rules API adalah cara baru bagi developer untuk memberi tahu Chromium-based browser, "Halaman ini kemungkinan besar akan dikunjungi pengguna setelah halaman saat ini, tolong siapkan lebih awal." Browser kemudian melakukan prefetch (mengunduh HTML lebih awal) atau prerender (mengeksekusi halaman penuh di latar belakang) sehingga ketika pengguna mengklik link, halaman muncul nyaris instan. Dibanding <link rel="prefetch"> lama, API ini lebih ekspresif: bisa pakai pola URL, eagerness level, dan referrer policy. Konsep ini erat dengan bfcache dan View Transitions API sebagai trio "navigasi modern".

Cara Kerja

Developer menambahkan tag <script type="speculationrules"> berisi JSON. Contoh paling sederhana:

{ "prerender": [{ "where": { "href_matches": "/artikel/*" }, "eagerness": "moderate" }] }

Browser akan memprerender halaman yang cocok ketika sinyal interaksi pengguna (hover, focus, scroll-near) memenuhi level eagerness. Tersedia empat level: immediate, eager, moderate, conservative. Semakin agresif, semakin cepat halaman siap, tetapi semakin boros bandwidth dan memori.

Kenapa Penting?

Untuk website bisnis Indonesia di mana koneksi pengguna bervariasi, API ini bisa menurunkan persepsi LCP halaman lanjutan ke nyaris 0 ms tanpa harus rewrite ke Next.js Pages Router atau React Router. Cocok dipakai berdampingan dengan Islands Architecture untuk situs konten berat seperti blog, e-commerce katalog, atau dokumentasi.

Pertanyaan Umum

Apakah Speculation Rules API didukung Safari dan Firefox?

Per April 2026, dukungan penuh ada di Chrome dan Edge. Safari dan Firefox masih dalam tahap evaluasi, jadi gunakan sebagai progressive enhancement.

Apakah prerender mengirim analytics palsu?

Tidak, jika dilakukan dengan benar. Browser menahan eksekusi script analytics sampai pengguna benar-benar mengaktifkan halaman. Konsultasikan dokumentasi web.dev untuk pola implementasi yang aman.