Speculation Rules API: Prerender dan Prefetch Instan di Chrome

Jeda antara klik dan halaman yang tampil adalah tempat pengguna merasakan situs sebagai lambat. Saya bisa memangkas milidetik di sisi server, tetapi kemenangan tunggal terbesar sering kali adalah mengerjakan pekerjaan itu sebelum klik terjadi sama sekali. Speculation Rules API adalah cara native browser untuk melakukan persis itu: Anda mendeklarasikan halaman mana yang kemungkinan dikunjungi pengunjung berikutnya, lalu Chromium mengambil atau bahkan merender penuh halaman tersebut di latar belakang.

API ini menggantikan resource hint lama yang lebih terbatas seperti link rel prefetch dengan tata bahasa JSON yang bisa mencocokkan tautan berdasarkan pola URL, memilih antara prefetch yang murah dan prerender penuh, serta menyetel seberapa agresif browser bertindak. Di tulisan ini saya membahas sintaksnya, trade-off antara prefetch dan prerender, level eagerness, perbandingannya dengan komponen Link Next.js, dan jebakan yang saya temui di produksi.

Apa itu Speculation Rules API

Anda mengaktifkannya dengan menyisipkan tag script bertipe speculationrules ke dalam halaman. Isinya adalah objek JSON dengan dua kunci yang mungkin, prefetch dan prerender, masing-masing memuat sebuah array aturan. Bentuk paling sederhana adalah list rule: Anda menyebutkan URL persis yang ingin dispekulasikan browser. Deteksi fitur cukup satu baris — HTMLScriptElement.supports dengan argumen speculationrules mengembalikan true di tempat API ini ada.

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "list",
      "urls": ["/pricing", "/docs/getting-started"]
    }
  ],
  "prerender": [
    {
      "source": "list",
      "urls": ["/checkout"]
    }
  ]
}
</script>

Prefetch versus prerender: dua biaya yang sangat berbeda

Prefetch hanya mengunduh body respons halaman target dan menyimpannya di cache dalam memori. Ia tidak mengambil subresource, dan tidak mengeksekusi JavaScript halaman. Biayanya rendah, dan hasilnya saat navigasi adalah HTML sudah tersedia — Anda melewati perjalanan jaringan tetapi tetap perlu mem-parse, merender, dan menjalankan skrip setelah klik.

Prerender melangkah jauh lebih dalam: browser memuat halaman ke tab tersembunyi, mengambil setiap subresource, dan menjalankan JavaScript-nya, sehingga aktivasi saat klik nyaris instan. Biayanya pun tinggi — kira-kira setara membuka halaman di iframe tak terlihat. Prerender bersifat same-origin secara default; prerender same-site lintas origin membutuhkan header opt-in eksplisit dari target.

Document rules dan pencocokan href

Menuliskan daftar URL secara manual tidak skalabel untuk situs yang kaya konten. Document rules menyelesaikannya: alih-alih urls, Anda memberikan klausa where yang mencocokkan tautan yang sudah ada di halaman. href_matches menerima URL Pattern, dan selector_matches menerima selektor CSS, lalu Anda menggabungkannya dengan and dan not. Aturan di bawah ini men-prerender setiap tautan same-origin kecuali rute logout dan apa pun yang ditandai sebuah kelas sebagai tidak aman.

<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "selector_matches": ".no-prerender" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Eagerness: dari conservative ke immediate

Field eagerness menentukan kapan browser bertindak atas sebuah aturan. Ada empat nilai, dan default-nya berbeda menurut jenis aturan — list rule default ke immediate, document rule default ke conservative:

• immediate — berspekulasi segera setelah aturan di-parse, hanya tunduk pada batas sumber daya browser. Ini adalah default untuk list rule di mana Anda sudah berkomitmen pada URL tertentu.
• eager — bertindak pada isyarat paling tipis sekalipun, seperti kursor bergerak menuju tautan atau hover sebentar. Cocok untuk mem-prefetch banyak tujuan yang mungkin sejak dini.
• moderate — titik keseimbangan: memicu saat ada sinyal yang wajar, kira-kira hover atau fokus 200 milidetik. Pilihan yang masuk akal untuk prerender berbasis document rule.
• conservative — menunggu hingga pengguna pada dasarnya berkomitmen, pada pointerdown atau mousedown. Ini adalah default untuk document rule dan opsi berbasis interaksi yang paling murah.

Bedanya dengan Next.js Link prefetch

Jika Anda membangun dengan Next.js, komponen Link sudah melakukan prefetch — tetapi itu mekanisme yang berbeda, bukan Speculation Rules API. Next.js mem-prefetch payload rute itu sendiri, data RSC dan JavaScript yang diperlukan untuk transisi sisi klien, saat sebuah Link masuk viewport di produksi. Speculation Rules adalah fitur browser yang bisa mem-prefetch atau merender penuh navigasi dokumen sungguhan. Keduanya saling melengkapi, bukan saling menggantikan:

Jebakan yang saya waspadai

Spekulasi itu ampuh, tetapi beberapa mode kegagalan menggigit di produksi jika Anda tidak hati-hati:

• Prerender sia-sia. Prerender yang tak pernah diaktifkan sudah menghabiskan biaya halaman penuh. Document rule agresif atas selektor yang terlalu luas bisa men-prerender puluhan halaman yang tak pernah dibuka pengguna — pilih eagerness conservative atau moderate dan pola href_matches yang sempit.
• Penghitungan ganda analitik. Karena halaman yang diprerender menjalankan JavaScript-nya sebelum terlihat, analitik yang naif memicu pageview saat prerender dan sekali lagi saat aktivasi. Lindungi inisialisasi di balik document.prerendering dan event prerenderingchange agar sebuah view dihitung hanya ketika pengguna benar-benar melihat halaman.
• Efek samping tak aman saat load. Setiap URL yang mengubah state pada GET — sign-out, add-to-cart, token sekali pakai, penghitung penggunaan, impresi iklan — harus dikecualikan dengan klausa not href_matches, atau prerender akan memicunya sebelum pengguna sempat mengklik.

Penjaga analitiknya kecil. Google Analytics dan Google Publisher Tag sudah memperhitungkan prerendering, tetapi untuk apa pun yang buatan sendiri Anda menunda inisialisasi hingga halaman benar-benar ditampilkan:

if (document.prerendering) {
  document.addEventListener(
    "prerenderingchange",
    initAnalytics,
    { once: true }
  );
} else {
  initAnalytics();
}

Dukungan browser adalah catatan jujurnya: Speculation Rules API hanya untuk Chromium. Chrome merilis prerendering via speculation rules di versi 109 dan field eagerness di versi 121, dan Edge mengikuti rilis tersebut. Firefox dan Safari tidak mendukungnya. Itu tidak masalah — ini adalah progressive enhancement, jadi browser yang tak mendukung cukup bernavigasi seperti biasa sementara pengguna Chromium mendapat pengalaman instan. Mulai dengan satu document rule conservative pada satu tautan berminat tinggi, pantau activation rate Anda, lalu perluas dari sana.