Digital Transformation
Speculation Rules API
Speculation Rules adalah API browser yang memberi instruksi kepada browser untuk melakukan prefetch atau prerender halaman secara deklaratif via JSON, sehingga navigasi terasa instan.
TL;DR: Speculation Rules API adalah cara modern memberitahu browser untuk memuat halaman berikutnya sebelum pengguna mengkliknya, lewat blok JSON di HTML. Sejak 2024, API ini menggantikan trik prefetch lama dan jadi salah satu cara paling efektif memperbaiki Core Web Vitals halaman destinasi.
Apa itu Speculation Rules?
Speculation Rules adalah spesifikasi web yang dirilis stabil di Chrome 121 dan disusul Edge serta browser Chromium lain. Aturannya ditulis sebagai blok <script type="speculationrules"> berisi JSON yang mendeklarasikan URL mana yang harus di-prefetch (download saja) atau di-prerender (render penuh di background). Saat pengguna meng-klik link tersebut, halaman muncul nyaris instan karena sudah siap di memori.
Berbeda dengan <link rel="prefetch"> lama, Speculation Rules mendukung pencocokan URL berbasis pola, kontrol bandwidth (eagerness: moderate|conservative|eager), dan kondisi seperti viewport visibility. Lihat referensi resmi MDN tentang Speculation Rules API untuk skema lengkap.
Cara Kerja Singkat
| Mode | Yang Dilakukan Browser | Cocok untuk |
|---|---|---|
prefetch | Download HTML + resource utama | Halaman dengan asset besar |
prerender | Render penuh di background tab | Halaman destinasi paling sering dikunjungi |
eagerness: conservative | Trigger saat hover atau pointerdown | Hemat bandwidth |
eagerness: moderate | Trigger saat URL terlihat di viewport | Default seimbang |
eagerness: eager | Trigger segera | Hanya untuk halaman yang hampir pasti dikunjungi |
Kenapa Penting?
Bagi marketer dan pemilik website bisnis di Indonesia, Speculation Rules berdampak langsung ke metrik Core Web Vitals terutama LCP halaman tujuan. Saat halaman produk atau landing page sudah ter-prerender, navigasi terasa di bawah 100 ms dan bounce dari "klik tapi nunggu" turun. Dalam beberapa eksperimen di proyek e-commerce klien, kombinasi prerender konservatif untuk top 5 produk menurunkan LCP rata-rata di mobile dari 2,8 detik ke sekitar 0,9 detik.
Pertanyaan Umum
Apakah Speculation Rules sama dengan prefetch lama?
Tidak. Prefetch lama (<link rel="prefetch">) hanya men-download HTML tanpa kontrol kondisi. Speculation Rules deklaratif, mendukung pola URL, dan punya level "eagerness" yang menghormati bandwidth pengguna.
Apakah aman untuk halaman dengan analytics atau iklan?
Halaman yang di-prerender baru menghitung pageview saat aktivasi, jadi aman untuk Google Analytics 4. Untuk iklan, periksa kebijakan vendor: beberapa SSP membatasi tampilan iklan di konteks prerender.
Istilah Terkait