Speculation Rules API: Mempercepat Navigasi Website dengan Prefetch dan Prerender

Pengunjung sering membuka beberapa halaman secara berurutan: dari beranda ke artikel, dari daftar produk ke detail, atau dari halaman kategori ke panduan tertentu. Jika halaman berikutnya baru diminta setelah tautan diklik, pengguna tetap harus menunggu jaringan, server, dan browser menyelesaikan pekerjaannya. Speculation Rules API memungkinkan browser menyiapkan navigasi yang mungkin terjadi berikutnya, sehingga halaman dapat terbuka lebih cepat ketika pengguna benar-benar memilihnya.

Fitur ini menarik untuk website multi-halaman, tetapi bukan tombol ajaib yang otomatis mempercepat semua kunjungan. Aturan perlu dipilih dengan cermat agar penghematan waktu tidak berubah menjadi penggunaan bandwidth, memori, atau permintaan server yang sia-sia.

Apa Itu Speculation Rules API?

Speculation Rules API adalah mekanisme berbasis aturan JSON yang memberi petunjuk kepada browser tentang dokumen yang berpotensi dibuka selanjutnya. Aturan dapat ditulis di elemen <script type="speculationrules"> atau disediakan melalui header HTTP Speculation-Rules. Browser tetap memutuskan apakah dan kapan petunjuk tersebut dijalankan berdasarkan dukungan, pengaturan pengguna, serta kondisi perangkat.

API ini terutama ditujukan untuk navigasi antardokumen pada situs multi-page, bukan untuk memuat komponen kecil atau menggantikan arsitektur aplikasi satu halaman. Untuk mempersiapkan koneksi ke domain lain, preconnect masih memiliki fungsi berbeda; untuk memuat aset tertentu, teknik seperti preload atau prefetch resource tetap dapat diperlukan.

Prefetch dan Prerender: Apa Bedanya?

• Prefetch mengunduh respons dokumen yang kemungkinan akan dibuka. Browser belum merender seluruh halaman beserta aset turunannya, sehingga biaya awalnya relatif lebih ringan.
• Prerender menyiapkan halaman secara lebih lengkap dalam konteks tersembunyi, termasuk memuat aset dan menjalankan JavaScript yang relevan. Jika pengguna kemudian membuka halaman itu, perpindahan dapat terasa hampir seketika, tetapi penggunaan sumber daya juga lebih besar.

Mulailah dengan prefetch untuk tautan yang kemungkinan besar dipilih. Gunakan prerender hanya pada tujuan yang sangat mungkin dibuka dan aman dipersiapkan. Keduanya merupakan petunjuk bagi browser, bukan jaminan bahwa halaman pasti akan dimuat lebih awal.

Contoh Implementasi Sederhana

Contoh berikut meminta browser yang mendukung API untuk melakukan prefetch pada halaman artikel tertentu. Tempatkan aturan ini pada halaman yang relevan dan sesuaikan URL dengan struktur situs sendiri.

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": [
        "/panduan/optimasi-website/",
        "/tutorial/cache-browser/"
      ]
    }
  ]
}
</script>

Untuk penerapan yang lebih dinamis, aturan dapat memakai pencocokan tautan atau kondisi lain yang didukung browser. Hindari langsung menerapkan aturan ke semua URL tanpa pengecualian. Tautan keluar, URL dengan parameter yang memicu tindakan, halaman akun, dan alur transaksi harus dinilai secara khusus sebelum dimasukkan.

Jika situs memakai Content Security Policy (CSP), aturan inline mungkin perlu diizinkan melalui konfigurasi script-src yang sesuai, misalnya sumber 'inline-speculation-rules' atau nonce/hash yang tepat. Jangan melonggarkan kebijakan keamanan secara luas hanya agar fitur ini berjalan.

Menjaga Efek Samping Tetap Aman

Kesalahan paling penting adalah menganggap setiap permintaan GET selalu aman. Prefetch dapat mengirim permintaan ke server sebelum pengguna benar-benar membuka halaman. Jika endpoint keluar akun, mengganti bahasa, menambah barang ke keranjang, mengirim OTP, atau mengubah kuota melakukan tindakan hanya karena URL diminta, aktivitas tersebut bisa terjadi terlalu dini.

Rancang tindakan yang mengubah keadaan agar memakai metode dan alur yang tepat, serta jangan menempatkan efek samping penting pada permintaan navigasi biasa. Server juga dapat memeriksa header Sec-Purpose untuk mengenali permintaan spekulatif pada browser yang mengirimkannya. Gunakan deteksi itu sebagai lapisan tambahan, bukan satu-satunya pengaman, karena dukungan dan perilaku dapat berbeda.

Prerender memiliki perhatian tambahan: JavaScript pada halaman dapat mulai berjalan sebelum halaman terlihat oleh pengguna. Tunda analitik yang menghitung tampilan, pemutaran media, permintaan izin, atau tindakan lain yang seharusnya baru terjadi setelah aktivasi. Periksa status prerender dan peristiwa aktivasi yang disediakan browser bila diperlukan.

Baca juga: Interaction to Next Paint (INP): Mengukur Responsivitas Website.

Referensi resmi: Dokumentasi MDN tentang Speculation Rules API.

Kesimpulan

Speculation Rules API dapat mempercepat navigasi dengan menyiapkan halaman yang kemungkinan dibuka berikutnya, tetapi penggunaan berlebihan bisa menambah konsumsi data dan beban server. Mulai dari halaman publik berisiko rendah, ukur dampak nyata, dan pastikan situs tetap berfungsi tanpa dukungan API.