Studi Kasus Nalesha: Pasang Speculation Rules API di Next.js Katalog Parfum Pangkas LCP Navigasi dari 2.100 ke 280 ms dan Naikkan Add-to-Cart 34 Persen di 2026

TL;DR: Nalesha, brand parfum yang kami bangun storefront-nya di Next.js, sempat punya masalah klasik katalog: 240 SKU, navigasi antar produk lambat di mobile, LCP halaman detail 2.100 ms p75. Setelah pasang Speculation Rules API dengan setting moderate eagerness untuk link katalog, LCP navigasi turun ke 280 ms, bounce rate halaman detail turun dari 47 ke 28 persen, dan add-to-cart rate naik 34 persen dalam 6 minggu.

Speculation Rules API per 2026 sudah didukung Chrome dan Edge stabil. Untuk e-commerce dengan banyak SKU, fitur ini adalah game changer karena memungkinkan browser preload atau prerender halaman next-click sebelum user klik, tanpa mahal-mahal manual route prefetch.

Masalah: Navigasi Katalog Mobile Lambat

Di awal 2026, audit Vercel Analytics Nalesha menunjukkan dua pola: pertama, p75 LCP halaman detail 2.100 ms di mobile (target Google "good" adalah 2.500 ms tapi target internal Nalesha 1.500 ms). Kedua, sesi mobile rata-rata 1,7 halaman per kunjungan, jauh dari benchmark e-commerce parfum 3,2 halaman.

User behavior recording menunjukkan: shopper sering scroll cepat di halaman katalog, klik produk, lihat foto, kembali, klik produk lain. Setiap navigasi terasa lambat karena Next.js client-side router butuh waktu fetch data SKU + render gambar hero. Loading state kelihatan, user tidak sabar, bounce.

Solusi: Speculation Rules API Moderate Eagerness

Speculation Rules API memungkinkan kita kasih instruksi ke browser kapan dan bagaimana melakukan prerender atau prefetch URL kandidat. Ada tiga level eagerness: immediate, eager, moderate, dan conservative. Untuk katalog parfum dengan banyak link tapi tidak semua akan diklik, moderate adalah sweet spot: browser akan prefetch ketika user hover atau touchstart cukup lama.

Konfigurasinya cukup tag <script type="speculationrules"> di template katalog Next.js, isi JSON instruksi prerender untuk semua link dengan selector a[href^="/produk/"] dengan eagerness moderate. Tidak perlu refactor router, tidak perlu library tambahan.

Framework Pemilihan Eagerness

Untuk Nalesha kami pilih moderate karena risiko prerender produk yang tidak diklik masih rendah dampaknya (data SKU dan gambar hero tidak besar) tapi keuntungan kecepatan navigasi besar.

Eksekusi: 3 Tahap Rollout

Tahap 1 (minggu 1) kami pasang Speculation Rules di staging dengan setting moderate, prerender semua URL pola /produk/*. Test pakai DevTools "Speculative loads" panel. Verifikasi tidak ada side effect (analytics ganda, server load spike).

Tahap 2 (minggu 2-3) rollout ke production untuk 50 persen traffic via Vercel Edge Config flag. Bandingkan p75 LCP, bounce, add-to-cart, dan server load. Hasil 7 hari: LCP navigasi turun dari 2.100 ke 320 ms di kelompok eksperimen, server load naik hanya 12 persen (jauh di bawah ambang concern).

Tahap 3 (minggu 4-6) rollout 100 persen + tuning: kami exclude beberapa SKU yang punya integrasi pihak ketiga (Stripe checkout intent) dari prerender supaya tidak ada double request. LCP akhir 280 ms p75, add-to-cart rate naik dari 3,4 ke 4,6 persen (kenaikan relatif 34 persen).

Dampak yang tidak diduga: bounce rate halaman detail produk turun dari 47 ke 28 persen. Hipotesis kami: kecepatan navigasi membuat user lebih nyaman browsing, dan "browsing" memang fase awal funnel parfum. Ini selaras dengan praktik agent cache hit rate yang menunjukkan kecepatan = kepercayaan untuk konteks discovery.

Pertanyaan Umum

Apakah Speculation Rules menghabiskan kuota data user?

Bisa kalau setting terlalu agresif. Moderate eagerness umumnya aman karena prefetch baru terjadi setelah sinyal intent (hover/touch). Untuk mobile-first market Indonesia, hindari immediate atau eager untuk halaman dengan banyak link.

Apakah bisa dipakai bareng Next.js prefetch default?

Iya. Speculation Rules adalah API browser-level yang lebih kuat (prerender, bukan cuma prefetch chunk). Next.js prefetch tetap berjalan untuk Link di-viewport, Speculation Rules menangani prerender penuh.

Browser apa yang sudah mendukung?

Per 2026, Chrome dan Edge sudah stabil. Safari masih dalam proposal. Untuk browser yang tidak support, tag akan diabaikan tanpa side effect.

Penutup: Browser Sudah Pintar, Manfaatkan

Untuk marketer e-commerce di Indonesia yang bertanggung jawab atas conversion rate, Speculation Rules API adalah salah satu wins paling murah di 2026: konfigurasi satu tag, dampak terukur ke LCP dan funnel metrics. Tidak butuh refactor besar, tidak butuh library, tidak butuh budget engineering bulanan.

Kalau Anda kelola katalog dengan 100+ SKU di Next.js, mulai dari staging dengan setting moderate. Ukur 7 hari. Angka LCP navigasi yang turun signifikan biasanya bikin diskusi rollout production jadi lancar.