Studi Kasus Felicia Tan: Pakai Speculation Rules Prerender Pangkas Time-to-Product-Detail dari 1,8 Detik ke 80 ms di 2026

TL;DR: Felicia Tan, founder studio personal-brand di Jakarta, memasang Speculation Rules API untuk prerender 3 halaman layanan paling sering dikunjungi dari homepage. Waktu navigasi dari klik ke halaman tampil turun dari 1,8 detik ke 80 ms. Inquiry rate dari halaman layanan naik 22% dalam 4 minggu, dengan biaya bandwidth tambahan kurang dari Rp 35rb per bulan karena prerender hanya jalan saat hover atau viewport intersection.

Saat audit website personal-brand Felicia Tan per Maret 2026, masalahnya bukan loading awal. LCP di homepage sudah 1,1 detik, sangat baik. Tapi calon klien yang sudah tertarik dengan portfolio sering bounce di transisi homepage ke halaman layanan, terutama di koneksi 4G yang kurang stabil.

Solusinya bukan optimasi LCP lebih lanjut, melainkan menghilangkan persepsi loading sama sekali dengan Speculation Rules API.

Konteks Masalah

Funnel inquiry Felicia berbentuk linear: homepage → halaman layanan (top 3: personal branding, photoshoot, content audit) → form kontak. Analytics menunjukkan:

Drop terbesar di transisi pertama. Saat di-trace dengan Web Vitals Attribution, penyebabnya adalah waktu blank screen antara klik dan First Paint halaman tujuan, rata-rata 1,8 detik di koneksi 4G Indonesia (median dari Field Data CrUX).

Solusi: Speculation Rules dengan Trigger Cerdas

Speculation Rules API memungkinkan browser melakukan prerender halaman sebelum user mengkliknya. Risikonya: kalau di-trigger sembarangan, bandwidth membengkak. Solusi yang kami pilih: trigger berdasarkan signal intent yang kuat.

Strategi tier-3 yang kami pakai:

Konfigurasi via JSON inline di <script type="speculationrules">:

{
  "prerender": [{
    "where": {"href_matches": "/layanan/*"},
    "eagerness": "moderate"
  }]
}

eagerness: moderate adalah sweet spot. Browser hanya prerender saat ada sinyal kuat (hover, scroll lambat). Tidak agresif seperti eager yang prerender semua link visible.

Hasil 4 Minggu

Inquiry rate naik 22% relatif. Karena Felicia menjual paket personal-branding mulai Rp 8 juta, satu inquiry tambahan per bulan sudah jauh menutupi biaya bandwidth dan engineering.

Yang Kami Pelajari

Pertama, jangan prerender semua link. eagerness: eager di homepage Felicia akan menghasilkan 12 prerender per pageview, bandwidth membengkak 3,2 GB per bulan tanpa peningkatan konversi proporsional. Targetkan hanya halaman dengan intent tertinggi.

Kedua, monitor prerender rejection rate. Browser kadang menolak prerender karena memory pressure di low-end Android. Berdasarkan dokumentasi Chrome, rate rejection 5-15% normal di pasar mobile Indonesia.

Ketiga, hati-hati dengan analytics. Halaman yang di-prerender belum tentu di-visit. Pakai event prerenderingchange untuk fire pageview hanya saat halaman aktif diaktivasi user, bukan saat prerender selesai.

Pertanyaan Umum

Apakah Speculation Rules support semua browser?

Per April 2026 dukungan kuat di Chromium 121+ (Chrome, Edge, Opera, Brave). Safari dan Firefox belum implementasi penuh. Browser tanpa support akan ignore script tag dengan aman, tidak ada efek negatif.

Apakah prerender mempengaruhi billing analytics?

Ya jika tidak di-handle. Google Analytics 4 secara default fire event saat dokumen dibuat, termasuk saat masih prerender. Gunakan listener prerenderingchange untuk delay pageview event.

Bagaimana cara debug prerender di Chrome DevTools?

Buka DevTools > Application > Speculative loads > Speculations. Panel ini menampilkan setiap prerender attempt, status (Ready/Failed), dan alasan failure.

Apakah cocok untuk e-commerce dengan ribuan produk?

Tidak. Untuk e-commerce sebaiknya pakai prefetch (lebih ringan) atau Speculation Rules dengan filter berbasis rekomendasi/cart, bukan match semua produk.

Penutup

Speculation Rules API mengubah cara berpikir tentang performance: bukan lagi soal mempercepat halaman tujuan, tapi soal menghilangkan perceived loading. Untuk personal-brand dan jasa profesional dengan funnel pendek dan high-intent traffic, fitur ini memberi UX premium tanpa biaya engineering besar. Mulai dari 2-3 halaman top, ukur dengan CrUX field data, lalu evaluasi setiap bulan.