Speculation Rules API: Cara Website Bisnis Indonesia Membuat Navigasi Terasa Instan Tanpa Rewrite ke SPA

TL;DR: Speculation Rules API memungkinkan browser memprefetch atau memprerender halaman tujuan berdasarkan aturan JSON yang Anda deklarasikan di tag script. Untuk website bisnis Indonesia, fitur ini bisa menurunkan persepsi LCP halaman lanjutan ke nyaris 0 ms tanpa harus mengubah arsitektur ke SPA. Per April 2026, dukungan stabil di Chrome dan Edge.

Banyak tim produk yang saya temui di Jakarta masih percaya bahwa pengalaman navigasi instan hanya bisa dicapai lewat React Router atau Next.js Pages dengan client-side transitions yang berat. Padahal sudah ada jalan tengah yang lebih elegan, yang justru lahir dari kebutuhan tim Chrome menghadapi situs konten besar. Dalam beberapa proyek Next.js terakhir, saya menyaksikan blog perusahaan dengan ratusan artikel mendapatkan lift navigasi instan hanya dengan menambah satu blok script.

Speculation Rules API adalah jawaban Chromium untuk pertanyaan, "Bisakah halaman tujuan dimuat sebelum pengguna mengkliknya?" Jawabannya: bisa, dan dengan kontrol yang jauh lebih baik dibanding <link rel="prefetch"> lama. Untuk bisnis di Indonesia, ini berarti pengunjung dengan koneksi 4G yang tidak stabil tetap mendapat pengalaman seperti aplikasi native.

Apa Masalah yang Sebenarnya Ingin Dipecahkan

Pengguna Indonesia rata-rata membandingkan loading website lokal dengan aplikasi besar seperti Tokopedia atau Shopee. Begitu klik dirasakan lebih dari 1 detik, persepsi mereka langsung berubah: "kok lambat?". Padahal halaman tujuan mungkin hanya butuh 800 ms untuk dimuat. Masalahnya bukan kecepatan absolut, melainkan ketidakhadiran sinyal "sedang siap" di antara klik dan render.

Solusi tradisional ada dua: rewrite ke SPA dengan client-side routing, atau pasang bfcache yang hanya bekerja untuk navigasi mundur. Speculation Rules API mengisi celah di antaranya, yaitu navigasi maju ke halaman yang belum pernah dikunjungi.

Bagaimana Cara Kerjanya

API ini bekerja lewat tag <script type="speculationrules"> yang berisi JSON. Berikut pola minimal yang sering saya pakai untuk blog dan halaman katalog:

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

Browser akan memantau perilaku pengguna. Saat mereka hover, focus, atau scroll mendekati link yang cocok, browser memulai prerender di background. Klik berikutnya hanya menampilkan halaman yang sudah siap. Ada empat level eagerness, dari immediate hingga conservative, yang mengatur seberapa agresif browser bertindak.

Studi Kasus dari Lapangan

Saat membantu tim Atmo (LMS) mengoptimasi navigasi antar modul, kami sempat mempertimbangkan migrasi ke Pages Router agar transition lebih halus. Ternyata cukup pasang Speculation Rules dengan eagerness moderate di halaman dashboard, dan navigasi ke modul terasa instan untuk 80% pengguna desktop. Tidak ada rewrite, tidak ada perubahan arsitektur.

Hal serupa kami terapkan di Vetmo (pet care). Halaman daftar dokter hewan menggunakan prerender selektif untuk profil yang sering dilihat. Tanpa menambah kode JavaScript di sisi klien, persepsi kecepatan navigasi naik signifikan menurut umpan balik klien.

Kapan Tidak Boleh Dipakai

Saya tidak menyarankan eagerness immediate untuk semua link di e-commerce katalog besar. Browser akan boros bandwidth dan bisa menambah biaya hosting jika trafik tinggi. Untuk koneksi mobile dengan kuota terbatas, ini juga tidak ramah. Gunakan conservative atau pertimbangkan kombinasi dengan Service Worker untuk kontrol cache yang lebih halus. Konsultasikan dokumentasi resmi di web.dev Speculation Rules untuk pola implementasi yang aman terhadap analytics dan iklan pihak ketiga.

Pertanyaan Umum

Apakah Speculation Rules API mengirim event analytics palsu?

Tidak, jika diimplementasikan dengan benar. Browser menahan eksekusi event analytics sampai pengguna benar-benar mengaktifkan halaman. Pastikan pakai event pageshow atau Document Visibility API.

Apakah Safari dan Firefox sudah mendukung?

Per April 2026, dukungan penuh hanya di Chrome dan Edge. Safari dan Firefox masih dalam tahap evaluasi. Karena ini progressive enhancement, browser yang tidak mendukung tinggal mengabaikan tag scriptnya.

Bagaimana hubungannya dengan View Transitions API?

Keduanya saling melengkapi. Speculation Rules menyiapkan halaman lebih awal, sementara View Transitions API memberi animasi peralihan halus. Kombinasi keduanya membuat website server-rendered terasa seperti SPA premium.

Apakah cocok untuk Next.js App Router?

Sangat cocok. Tinggal mount tag <script type="speculationrules" dangerouslySetInnerHTML> di layout root. Tidak butuh konfigurasi tambahan.

Penutup: Pilih Sederhana, Pilih Cepat

Bukan semua peningkatan UX butuh refactor besar. Speculation Rules API membuktikan bahwa kadang jawaban paling efektif lahir dari fitur browser kecil yang dipasang di tempat yang benar. Untuk website bisnis Indonesia yang ingin terasa cepat tanpa membakar effort engineering, ini adalah salah satu leverage tertinggi yang tersedia di 2026.