Cara Marketer Indonesia Kalibrasi Speculation Rules Eagerness Moderate di Next.js untuk Pangkas LCP Navigasi 78 Persen Tanpa Bakar Data Pengguna di 2026
TL;DR: Speculation Rules API dengan eagerness moderate adalah jalan tengah antara conservative (terlalu lambat) dan eager (boros data). Setting ini memicu prefetch saat user hover atau pointer dekat link, memangkas LCP navigasi rata-rata 78 persen tanpa membakar kuota data user mobile. Cocok untuk katalog e-commerce, listing artikel, dan dashboard internal Next.js.
Saat membangun ulang katalog parfum untuk Nalesha, kami sempat pakai eagerness "eager" di Speculation Rules dan langsung dimarahi tim ops karena bandwidth Vercel naik 3 kali lipat. Sebulan kemudian, setelah turun ke moderate, navigation LCP tetap di bawah 300 ms dan biaya bandwidth balik normal.
Banyak marketer Indonesia menganggap Speculation Rules cuma satu setting on-off. Padahal property eagerness punya 4 level (immediate, eager, moderate, conservative) dan pilihan yang salah bisa bikin halaman feel lambat atau bikin biaya hosting meledak.
Apa Itu Speculation Rules Eagerness Moderate
Eagerness adalah seberapa agresif browser melakukan prefetch atau prerender link sebelum user klik. Level moderate berarti browser menunggu sinyal intent kuat: hover lebih dari 200 ms, atau pointer bergerak menuju link. Berbeda dengan eager yang prefetch begitu link masuk viewport.
Pelajari dulu dasar Speculation Rules API sebelum lanjut. Kalau belum familiar dengan trade-off prerender, baca Prerender Trigger Rate yang membahas kapan prerender efektif.
Setup di Next.js App Router
Pasang Speculation Rules sebagai inline script di layout.tsx:
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<head>
<script
type="speculationrules"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
prerender: [{
where: { href_matches: "/produk/*" },
eagerness: "moderate"
}],
prefetch: [{
where: { href_matches: "/artikel/*" },
eagerness: "moderate"
}]
})
}}
/>
</head>
<body>{children}</body>
</html>
)
}
Pola di atas membedakan: produk pakai prerender (full render di background), artikel cukup prefetch (cuma fetch HTML). Ini menyeimbangkan biaya CPU klien dan bandwidth.
Benchmark Hasil Nyata
| Metric | Tanpa Speculation Rules | Eagerness Eager | Eagerness Moderate |
|---|---|---|---|
| LCP navigasi median | 1.420 ms | 180 ms | 310 ms |
| Bandwidth /session (mobile 4G) | 1,2 MB | 4,8 MB | 1,6 MB |
| CPU klien (Lighthouse score) | 92 | 71 | 89 |
| Vercel bandwidth cost /bulan | $12 | $38 | $14 |
Data di atas dari proyek Nalesha (katalog 80 SKU parfum) selama 30 hari di April 2026. Eager memang menang di LCP, tapi cost dan CPU tidak sustainable untuk traffic skala produksi.
Studi Kasus: Vetmo Pet Care Booking
Vetmo punya 80 profil dokter pet care. User biasanya hover-hover dulu untuk baca expertise sebelum klik booking. Pola hover ini cocok dengan eagerness moderate.
Sebelum implementasi, booking rate dari halaman listing dokter cuma 4,2 persen, dengan LCP navigasi 1.800 ms. Setelah pasang Speculation Rules dengan eagerness moderate untuk semua link /dokter/*, booking rate naik ke 6,8 persen dan LCP turun ke 290 ms. Lebih penting, bandwidth Cloudflare tidak naik signifikan karena moderate hanya trigger saat ada sinyal intent.
Kombinasikan dengan Cross-Document View Transitions untuk efek perpindahan yang halus, dan Anda mendapat experience seperti SPA tanpa overhead React Router.
Kapan Pakai Eager vs Moderate vs Conservative
- Eager: dashboard internal dengan koneksi WiFi stabil, jumlah link terbatas (kurang dari 10 per halaman)
- Moderate: katalog publik, listing artikel, halaman blog (mayoritas use case)
- Conservative: aplikasi dengan user base mobile-only di area koneksi lemah
Hindari "immediate" untuk produksi kecuali Anda yakin tiap link akan diklik (misal: wizard step-by-step).
Pertanyaan Umum
Apakah Speculation Rules sudah didukung semua browser?
Per Mei 2026, Chrome dan Edge support penuh. Safari support prefetch tapi belum prerender. Firefox baseline support. Gracefully degrade, tidak perlu polyfill.
Bagaimana cara debug Speculation Rules?
Chrome DevTools, panel Application, tab Preloading. Lihat status tiap rule: success, ineligible, atau failed.
Apakah ini menggantikan next/link prefetching?
Tidak menggantikan, melengkapi. next/link prefetch terbatas pada viewport, Speculation Rules bisa target by URL pattern dan punya kontrol eagerness lebih granular.
Berapa lama sampai melihat dampak ke conversion?
Umumnya 7 sampai 14 hari setelah deploy, terlihat di GA4 Engagement Rate dan Conversion Rate per halaman destination.
Mulai dari Satu URL Pattern
Tidak perlu pasang Speculation Rules untuk seluruh site sekaligus. Mulai dari satu URL pattern dengan traffic tertinggi (biasanya listing utama). Ukur LCP dan bandwidth selama 7 hari. Kalau metrics naik tanpa cost balloon, baru rollout ke pattern lain. Pendekatan ini lebih aman daripada big-bang deploy.
Artikel Terkait
Website Bisnis
Cara Marketer Indonesia Pasang CSS @scope di Next.js untuk Isolasi Komponen Pihak Ketiga Tanpa CSS-in-JS Pangkas Bundle 41 KB di 2026
CSS @scope kini default di Chrome, Safari, dan Firefox. Pelajari cara memakainya di Next.js untuk mengisolasi widget chat, embed video, atau snippet iklan tanpa menambah bundle JavaScript.
Website Bisnis
Cara Marketer Indonesia Pasang Strict Content Security Policy di Next.js untuk Lindungi Form Lead dari XSS dan Naikkan Trust Signal AI Search di 2026
CSP strict bukan urusan developer saja. Konten di-inject lewat XSS bisa memalsukan klaim, menurunkan trust score AI Search. Panduan pasang nonce-based CSP di Next.js untuk marketer.
Website Bisnis
Cara Marketer Indonesia Pasang Web Locks API di Next.js untuk Cegah Duplicate Submit Form Lead dan Pangkas Error 429 dari 8 ke 0 Persen di 2026
Pengguna sering buka beberapa tab. Tanpa lock, refresh token dan submit lead bisa ganda. Web Locks API mengantri akses tanpa custom mutex, lebih sederhana dan stabil.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang