Cara Marketer Indonesia Pasang Speculation Rules di Next.js untuk Instant Navigation 2026

TL;DR: Speculation Rules API memungkinkan browser melakukan prefetch atau prerender halaman tujuan sebelum pengguna klik, sehingga navigasi internal terasa instan. Pasang via tag JSON di Next.js App Router untuk memperbaiki Largest Contentful Paint pada navigasi kedua, tanpa biaya server tambahan signifikan.

Dalam beberapa proyek terakhir, saya melihat klien yang sudah lulus Core Web Vitals tetap mengeluh, "halaman kedua terasa lambat". Penyebabnya bukan server, tetapi cost rendering ulang yang menumpuk pada klik internal. Speculation Rules menjadi salah satu cara paling efektif untuk menutup gap ini.

Sejak Chrome 121 di tahun 2024, Speculation Rules naik dari eksperimen menjadi fitur stabil. Di Next.js App Router, integrasinya cukup ringan, tinggal menyematkan tag script JSON di layout, lalu memilih kebijakan prerender selektif. Tujuannya membuat halaman tujuan sudah berada di memori browser sebelum pengguna mengklik link.

Mengapa Klik Internal Masih Lambat

Sebagian besar tim sudah mengoptimalkan LCP halaman pertama, tetapi melupakan navigasi setelahnya. Padahal mesin pencari semakin memperhitungkan soft navigation dalam pengukuran field data. Klik internal yang lambat juga merusak engagement, karena pengguna langsung kembali ke SERP saat halaman kedua butuh dua detik lebih untuk muncul. Hasil pengamatan saya pada proyek Nalesha, situs parfum e-commerce, klik kedua biasanya 1,4 detik lebih lambat dari klik pertama, sebelum Speculation Rules dipasang.

Cara Kerja Speculation Rules

Speculation Rules adalah deklarasi JSON yang memberi tahu browser kapan boleh prefetch atau prerender link tertentu. Browser akan menjalankan halaman tujuan di latar belakang, lengkap dengan eksekusi JavaScript dan kueri data, lalu menampilkannya instan saat pengguna klik.

Kebijakan moderate lebih hemat bandwidth, sedangkan eager mempercepat klik selanjutnya dengan trade-off konsumsi data lebih tinggi.

Implementasi di Next.js App Router

Tambahkan komponen client kecil di app/layout.tsx, lalu inject tag script tipe speculationrules. Strategi yang saya pakai di proyek Atmo LMS adalah memprioritaskan navigasi kursus paling populer agar prerender tidak boros memori. Tag ini bersifat passive, sehingga aman tanpa breaking change. Pastikan tetap menggunakan prefetch bawaan Next.js untuk link kritis di header.

Snippet ringkas yang dipakai di proyek Atmo:

<script type="speculationrules">
{
  "prerender": [{ "source": "list", "urls": ["/kursus", "/harga"] }],
  "prefetch": [{ "source": "document", "where": { "href_matches": "/artikel/*" }, "eagerness": "moderate" }]
}
</script>

Sumber resmi yang saya rujuk: panduan dari web.dev tentang Speculation Rules dan dokumentasi Chrome Developers. Kedua sumber ini cocok dibaca untuk memahami batas memori dan privasi.

Studi Kasus: Atmo LMS, Navigasi Kursus 2026

Saat membangun ulang Atmo LMS untuk kohort kuartal pertama 2026, kami menerapkan Speculation Rules mode moderate untuk link katalog kursus. Hasil pengukuran CrUX per April 2026 menunjukkan p75 LCP klik kedua turun dari 2,1 detik ke 0,8 detik. Bounce rate dari halaman katalog ke halaman kursus turun 18%. Angka ini bervariasi tergantung jumlah halaman target dan kebijakan jaringan pengguna.

Pertanyaan Umum

Apakah Speculation Rules merusak analytics?

Tidak, asal Anda gunakan event prerenderingchange untuk menunda kirim pageview hingga prerender benar-benar aktif. Praktik standar di industri menyarankan instrumentasi via Performance Observer.

Berapa banyak link sebaiknya saya prerender?

Mulai dengan 2 sampai 5 link prioritas. Terlalu banyak prerender akan menambah konsumsi memori, terutama pada perangkat low-end di Indonesia.

Apakah Safari mendukung?

Belum sepenuhnya. Safari masih menggunakan rel prefetch tradisional. Speculation Rules saat ini didukung penuh oleh Chrome, Edge, dan Opera.

Penutup

Bagi marketer Indonesia yang website-nya hidup dari halaman pillar dan klaster, Speculation Rules adalah kemenangan murah. Tidak perlu refactor besar, cukup pilih 3 sampai 5 destinasi paling diandalkan, lalu ukur klik kedua via field data. Strategi ini bekerja paling baik saat dipadukan dengan topic cluster dan internal link yang kuat.