Speculation Rules di Next.js: Cara Marketer Memangkas LCP Halaman Destinasi

TL;DR: Speculation Rules API adalah cara deklaratif menginstruksikan browser untuk prefetch atau prerender halaman berikutnya lewat blok JSON. Ketika dipasang dengan benar di Next.js, navigasi terasa instan dan LCP halaman destinasi turun signifikan tanpa menambah JavaScript yang dieksekusi pengguna.

Dalam beberapa proyek e-commerce klien selama Q1 2026, satu observasi menarik muncul: halaman produk top-5 yang paling sering dikunjungi rata-rata punya LCP mobile 2,5-3 detik meski sudah dioptimasi gambar dan font. Bottleneck-nya bukan di rendering halaman itu sendiri, melainkan di delay antara klik dan tampilnya halaman pertama. Speculation Rules memecahkan masalah ini dengan memindahkan pekerjaan loading ke fase pre-click.

Tulisan ini membahas cara kerja Speculation Rules dalam konteks Next.js, kapan layak dipakai, dan apa yang harus diukur sebelum dan sesudah implementasi.

Mengapa Prefetch Lama Tidak Cukup

Next.js sudah lama punya next/link dengan auto-prefetch saat link masuk viewport. Tapi mekanisme itu hanya men-download HTML dan asset, bukan merender halaman penuh. Untuk halaman dengan banyak komponen client (carousel, varian produk, review), waktu render setelah klik tetap menelan 300-700 ms.

Speculation Rules API memperluas ini dengan dua mode kunci: prefetch (download saja) dan prerender (render penuh di background tab tersembunyi). Saat pengguna meng-klik link yang sudah di-prerender, halaman muncul dalam <100 ms karena semua pekerjaan render sudah selesai.

Implementasi di Next.js 15

Berikut struktur minimal yang dipakai di salah satu proyek klien e-commerce parfum (Nalesha):

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

Blok ini disisipkan di app/layout.tsx lewat tag <Script strategy="afterInteractive">. Mode moderate artinya browser akan trigger prerender saat link terlihat di viewport, sementara conservative baru trigger saat hover atau pointerdown. Pilihan ini menghemat bandwidth pengunjung mobile.

Framework Keputusan: Kapan Pakai Mode Apa

Studi Kasus: Halaman Produk Nalesha

Sebelum implementasi, LCP mobile rata-rata di halaman produk top-3 berkisar 2,8 detik (75th percentile, data CrUX). Setelah dipasang prerender mode moderate untuk pola URL /produk/* dengan limit 3 prerender konkuren, observasi 14 hari menunjukkan:

• LCP mobile turun ke 0,9-1,2 detik di percentile yang sama
• Bandwidth pengguna mobile naik sekitar 8-12% (trade-off yang dapat diterima)
• Bounce rate halaman produk turun sekitar 6 poin persentase

Angka ini bervariasi tergantung pola navigasi pengunjung dan kualitas koneksi. Halaman dengan banyak script third-party (chat, analytics berat) mendapat improvement lebih besar karena prerender memuat ulang ke dalam memori sebelum aktivasi.

Risiko yang Wajib Diantisipasi

Prerender bukan tanpa konsekuensi. Halaman yang di-prerender berjalan di background dan eksekusi script tertentu (analytics pageview, iklan, video autoplay) bisa terpicu lebih awal. Mitigasi standar adalah memeriksa document.prerendering di kode penting:

if (document.prerendering) {
  document.addEventListener('prerenderingchange', initAnalytics, { once: true });
} else {
  initAnalytics();
}

Selain itu, prerender membatalkan halaman saat URL pengguna berbeda dari yang diprediksi, jadi salah pola URL berarti bandwidth terbuang. Lihat referensi web.dev tentang Speculation Rules untuk pola implementasi lebih lanjut.

Pertanyaan Umum

Apakah Speculation Rules berdampak pada Core Web Vitals di Search Console?

Ya. Karena LCP halaman destinasi diukur dari aktivasi (bukan request awal), prerender mendorong skor LCP CrUX masuk kategori "Good". Dampak ke ranking biasanya terasa setelah 28 hari data CrUX terkumpul.

Apakah semua browser mendukung?

Per April 2026, dukungan stabil di Chrome, Edge, dan Opera (semua basis Chromium). Safari dan Firefox belum mendukung penuh. Tetapi karena fallback-nya adalah perilaku navigasi normal, tidak ada dampak negatif untuk browser yang tidak mendukung.

Apakah perlu mengubah kode aplikasi Next.js?

Untuk implementasi dasar tidak. Cukup tambah blok JSON di layout. Yang perlu disesuaikan adalah skrip pihak ketiga yang sensitif terhadap prerender (analytics, iklan).

Bagaimana mengukur dampaknya?

Pakai Real User Monitoring (Vercel Analytics atau web-vitals JS). Bandingkan LCP p75 mobile sebelum dan sesudah selama minimal 7 hari. Cek juga rasio "wasted prerender" di Chrome DevTools tab Application > Speculation Rules.

Apakah cocok untuk SaaS dengan banyak halaman dynamic?

Cocok untuk halaman publik dengan pola URL terprediksi (landing, pricing, blog). Untuk dashboard authenticated, lebih aman pakai prefetch konservatif daripada prerender penuh karena risiko side-effect lebih tinggi.

Penutup

Speculation Rules adalah perubahan kecil di kode tetapi dampak besar di pengalaman pengguna. Untuk marketer yang mengukur konversi per halaman, ini salah satu lever paling efisien karena tidak butuh refactor besar. Mulai dari halaman top-5 yang paling sering jadi destinasi, ukur, lalu perluas. Jangan lupa pasang guard untuk script yang sensitif prerender supaya analytics tetap akurat.