Speculation Rules: Bikin Navigasi Website Terasa Instan

TL;DR: Speculation Rules adalah API browser yang memberi tahu Chrome halaman mana yang kemungkinan akan dibuka pengguna berikutnya, sehingga halaman itu di-prefetch atau di-prerender lebih dulu. Saat link diklik, halaman tampil hampir seketika karena sudah dimuat di latar belakang. Implementasinya hanya berupa satu blok script JSON, tanpa perlu ganti hosting atau framework.

Banyak pemilik website bisnis berinvestasi besar mempercepat halaman pertama, lalu berhenti di situ. Padahal pengalaman pengguna ditentukan oleh keseluruhan sesi: dari landing page ke halaman layanan, ke halaman harga, ke kontak. Setiap perpindahan yang lambat menambah alasan pengunjung untuk pergi.

Dalam beberapa proyek terakhir, saya melihat pola menarik di data analytics: pengunjung yang membuka 3+ halaman punya kecenderungan konversi jauh lebih tinggi daripada yang berhenti di satu halaman. Artinya, kecepatan navigasi antar halaman sama pentingnya dengan kecepatan halaman pertama.

Apa Itu Speculation Rules

Speculation Rules adalah API yang tersedia di Chrome dan browser berbasis Chromium. Cara kerjanya: Anda mendeklarasikan aturan dalam format JSON tentang link mana yang boleh dimuat lebih awal, lalu browser mengeksekusinya dengan dua tingkat agresivitas.

Berbeda dengan prefetching klasik via tag link, Speculation Rules mendukung prerendering penuh: browser membangun seluruh halaman, termasuk menjalankan script, sebelum pengguna mengklik. Dokumentasi lengkapnya tersedia di Chrome for Developers.

Implementasi Dasar

Satu blok script di halaman Anda sudah cukup:

<script type="speculationrules">
{
  "prerender": [{
    "where": {"href_matches": "/*"},
    "eagerness": "moderate"
  }]
}
</script>

Setting eagerness: moderate berarti browser mulai memuat saat pengguna hover di link sekitar 200 ms, kompromi yang baik antara kecepatan dan hemat resource. Untuk halaman yang hampir pasti dikunjungi (misal halaman harga dari halaman layanan), gunakan eagerness: eager.

Aturan praktisnya: prerender maksimal 2-3 halaman yang paling mungkin dikunjungi, bukan semua link. Prerender berlebihan memboroskan kuota data pengunjung dan beban server.

Studi Kasus dan Hal yang Perlu Diwaspadai

Saat membangun Nalesha, e-commerce parfum, alur kritisnya jelas: katalog ke detail produk ke checkout. Dengan memprioritaskan prerender di alur itu, perpindahan halaman yang tadinya terasa 0,5-1 detik menjadi nyaris tanpa jeda. Perubahan kecil, tapi efeknya terasa di kelancaran sesi belanja.

Yang perlu diwaspadai: halaman yang menjalankan analytics atau menampilkan konten dinamis (stok, harga) perlu penanganan khusus, karena script berjalan saat prerender, bukan saat halaman dilihat. Google Analytics 4 sudah menangani ini otomatis, tapi script custom perlu dicek manual. Pastikan juga Core Web Vitals dasar Anda sudah sehat lebih dulu, karena prerender tidak memperbaiki halaman yang memang berat. Untuk optimasi fundamental, mulai dari cara mempercepat loading tanpa ganti hosting.

Pertanyaan Umum

Apakah Speculation Rules bekerja di semua browser?

Belum. Per pertengahan 2026, dukungan penuh ada di Chrome dan Edge. Safari dan Firefox mengabaikan script ini tanpa error, jadi aman dipasang sebagai progressive enhancement.

Apakah ini membebani server?

Ada tambahan request untuk halaman yang di-prefetch atau di-prerender. Dengan eagerness moderate dan pembatasan pada alur utama, tambahannya umumnya kecil dan sepadan dengan perbaikan pengalaman.

Apakah memengaruhi data analytics?

Bisa, jika script analytics berjalan saat prerender. GA4 menunda pencatatan sampai halaman benar-benar dilihat. Script tracking custom perlu memakai API activation untuk perilaku serupa.

Kecepatan Sebagai Pengalaman, Bukan Skor

Skor Lighthouse yang bagus tidak otomatis berarti pengalaman yang mulus. Speculation Rules adalah salah satu cara termurah menaikkan perceived performance: satu blok script, tanpa migrasi, tanpa biaya hosting tambahan. Mulai dari alur navigasi yang paling sering dilalui pengunjung Anda, ukur, lalu perluas bertahap.