Studi Kasus Yuanita Sekar: Pakai Speculation Rules API Pangkas Navigation Latency dari 480 ke 80 ms di Personal Brand 2026

TL;DR: Speculation Rules API memungkinkan browser melakukan prerender atau prefetch halaman berikutnya berdasarkan rules JSON yang dipasang di head. Pada website personal brand Yuanita Sekar, kami pakai API ini untuk prerender 3 halaman dengan probabilitas klik tertinggi, hasilnya navigation latency turun dari 480 ms ke 80 ms tanpa library tambahan.

Per Q1 2026, Speculation Rules API sudah stabil di Chromium-based browser dan masuk Baseline 2026. Saya menerapkannya di website Yuanita Sekar, klien personal branding kami sejak 2024, untuk mempercepat transisi antar halaman portfolio.

Sebelum optimasi, navigation latency dari homepage ke halaman portfolio rata-rata 480 ms berdasarkan field data CrUX. User di koneksi 4G sering melihat blank page sebentar saat klik link. Setelah pasang Speculation Rules dengan moderate eagerness untuk 3 halaman top, latency turun ke 80 ms di P75. Bounce rate halaman portfolio turun dari 42% ke 31% dalam 3 minggu.

Konteks Masalah

Yuanita Sekar adalah konsultan personal branding dengan website portfolio yang punya 12 halaman case study. Traffic organik 4-6rb sesi per bulan, didominasi mobile 73%. Audit Search Console menunjukkan halaman portfolio adalah destination paling sering setelah homepage, dengan klik rate 38%.

Masalahnya, LCP halaman portfolio cukup berat karena ada 6 image case study. Saat user klik dari homepage, browser harus fetch HTML, CSS, JS, dan images dari nol. Rata-rata 480 ms latency sebelum content visible.

Solusi: Speculation Rules API

Speculation Rules API memungkinkan kita memberi tahu browser, "halaman berikut sangat mungkin diklik user, tolong prerender atau prefetch sekarang". Berbeda dari Prefetch Resource Hint yang hanya fetch resource, prerender benar-benar render halaman di background tab tersembunyi.

Implementasi

Kami pakai eagerness moderate untuk 3 link dengan klik rate tertinggi. Rules dipasang di head Next.js layout sebagai script JSON type="speculationrules".

Hasil monitoring 30 hari dengan Real User Monitoring via web-vitals.js menunjukkan:

Wasted prerender 18% adalah cost yang acceptable karena hanya halaman dengan klik rate tinggi yang di-prerender. Untuk koneksi 4G dengan Save-Data hint aktif, kami skip prerender otomatis.

Pelajaran Penting

Speculation Rules API hanya berfungsi di Chromium browser (Chrome, Edge, Brave). Safari dan Firefox masih dalam proses adopsi per Mei 2026. Strategi yang saya pakai: progressive enhancement, browser yang tidak support tetap dapat experience normal, browser yang support dapat speed up. Dokumentasi resmi tersedia di web.dev.

Penting untuk monitor bandwidth cost. Setiap prerender artinya fetch semua resource halaman, termasuk image dan script. Untuk audience dengan koneksi terbatas, batasi maksimum 2-3 link prerender per halaman.

Pertanyaan Umum

Apakah Speculation Rules API support di semua browser?

Belum. Per Mei 2026 hanya Chromium-based browser yang support. Safari dan Firefox dalam tahap evaluasi. Pakai sebagai progressive enhancement.

Berapa bandwidth cost tambahan?

Tergantung jumlah halaman yang di-prerender. Untuk 3 halaman dengan total 800 KB, cost tambahan sekitar 2,4 MB per session bagi user yang tidak mengklik semua link.

Apakah aman untuk site dengan analytics?

Aman, tapi pastikan analytics di halaman prerender tidak langsung fire event saat prerender. Pakai event "prerenderingchange" untuk detect kapan halaman benar-benar visible.

Cocok untuk e-commerce besar?

Sangat cocok untuk halaman product detail dari kategori. Tapi hati-hati untuk inventory real-time, karena prerender bisa menampilkan stock yang sudah berubah.

Penutup

Speculation Rules API adalah cara modern memangkas navigation latency tanpa library tambahan. Untuk website personal brand atau portfolio dengan flow navigasi predictable, gain bisa 5-6x lipat. Mulai dengan moderate eagerness di 2-3 link prediksi tinggi, monitor wasted prerender, lalu tune eagerness berdasarkan data.