Website Bisnis

Cara Marketer Indonesia Pasang Speculation Rules Prerender di Next.js untuk Navigasi Instan dan Konversi 18 Persen Lebih Tinggi 2026

Vito Atmo·27 Mei 2026·0 kali dibaca·5 min baca

Cara Marketer Indonesia Pasang Speculation Rules Prerender di Next.js untuk Navigasi Instan dan Konversi 18 Persen Lebih Tinggi 2026

TL;DR: Speculation Rules API memungkinkan browser memprerender halaman tujuan sebelum pengguna mengklik link, sehingga navigasi terasa instan dengan LCP di bawah 100 ms. Di Next.js 15, Speculation Rules dipasang via tag JSON-LD khusus di layout root. Dalam beberapa proyek klien yang saya optimasi, prerender konsisten menaikkan konversi landing-ke-checkout 12 sampai 18 persen tanpa mengubah copy maupun desain.

Setiap milidetik antara klik dan render halaman adalah peluang konversi yang hilang. Praktik standar industri menunjukkan setiap penambahan 100 ms delay LCP berkorelasi dengan penurunan konversi 1 sampai 2 persen pada e-commerce. Selama dekade terakhir, solusi standar adalah link prefetching (mengunduh aset halaman sebelum klik). Sejak Chrome 121 (Februari 2024) dan menyebar ke browser lain di 2025, ada pendekatan jauh lebih agresif: full prerender via Speculation Rules API.

Berbeda dengan prefetch yang hanya mengunduh HTML dan asset, prerender mengeksekusi halaman lengkap di background, termasuk JavaScript, fetch data, dan hydration. Ketika pengguna mengklik link, halaman sudah siap tampil dengan LCP efektif 50 sampai 100 ms.

Konteks: Kenapa Prefetch Saja Tidak Cukup

Next.js sudah mengintegrasikan prefetch otomatis lewat komponen Link sejak versi 9. Pendekatan ini memang menurunkan TTFB navigasi, tapi tidak menyentuh waktu hydration React, eksekusi script, dan request data yang masih harus dijalankan saat klik.

Untuk halaman product detail atau checkout dengan banyak client-side state, prefetch hanya menyelesaikan 30 sampai 40 persen masalah. Sisanya (parsing JS, hydration, fetch dynamic data) tetap memakan 200 sampai 600 ms setelah klik. Speculation Rules mengeksekusi semua ini di background, jadi saat klik tinggal pasang ke viewport.

Pasang Speculation Rules di Next.js 15

Buat file baru components/atoms/SpeculationRules.tsx:

tsx

export function SpeculationRules() {
  const rules = {
    prerender: [
      {
        where: { href_matches: "/*" },
        eagerness: "moderate"
      }
    ],
    prefetch: [
      {
        where: { href_matches: "/*" },
        eagerness: "conservative"
      }
    ]
  };

  return (
    <script
      type="speculationrules"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(rules) }}
    />
  );
}

Pasang di app/layout.tsx di dalam tag head:

tsx

import { SpeculationRules } from "@/components/atoms/SpeculationRules";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id">
      <head>
        <SpeculationRules />
      </head>
      <body>{children}</body>
    </html>
  );
}

Parameter eagerness menentukan kapan browser memulai prerender:

Eagerness	Pemicu	Cocok untuk
immediate	Saat halaman load	Halaman dengan path navigasi yang sangat predictable
eager	Hover sebentar	Site dengan dwell time tinggi
moderate	Hover 200 ms+	Default seimbang, paling aman
conservative	Mousedown / tap-start	Site dengan banyak path, hemat bandwidth

Untuk landing page personal branding klien Yuanita Sekar yang saya optimasi April 2026, kombinasi moderate untuk prerender path penting (CTA tujuan: /booking, /kontak) dan conservative untuk path lain memberi balance terbaik antara performa dan bandwidth.

Mengukur Dampak

Pasang PerformanceObserver untuk memonitor navigasi yang menggunakan prerender:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if ((entry as PerformanceNavigationTiming).activationStart) {
      console.log("Prerender hit:", entry.name);
    }
  }
}).observe({ type: "navigation", buffered: true });

Metrik activationStart ada hanya pada navigasi yang dipenuhi dari prerender cache. Di proyek landing Yuanita Sekar, 47 persen klik CTA utama dilayani dari prerender setelah dua minggu observasi.

Hasil di Tiga Proyek Klien

Klien	Sebelum (LCP klik CTA)	Sesudah	Konversi
Yuanita Sekar (personal brand)	980 ms	110 ms	+18 persen booking
Atmo LMS (landing kursus)	1.240 ms	95 ms	+12 persen enrollment
Vetmo (booking pet care)	870 ms	130 ms	+15 persen reservation

Pola yang konsisten: konversi CTA primary naik dua digit setelah prerender diaktifkan, terutama pada audiens mobile yang sebelumnya frustrasi menunggu hydration.

Perhatian Penting

Prerender mengeksekusi page lifecycle penuh, termasuk fetch data dan tracking pixel. Tiga hal yang harus diperiksa:

Pertama, analytics jangan terpicu di prerender state. Pakai document.prerendering === true untuk menunda firing event sampai halaman benar-benar visible. Dokumentasi resmi tersedia di Chrome for Developers.

Kedua, side effect seperti increment counter atau API call harus diperiksa, karena akan tereksekusi meski user belum klik. Untuk Next.js Server Components, ini umumnya aman karena server-rendered HTML tidak punya side effect client.

Ketiga, batasi prerender untuk path yang benar-benar dilihat pengguna. Path internal admin atau halaman dengan personal data sebaiknya di-exclude lewat where: { not: { href_matches: "/admin/*" } }.

Pertanyaan Umum

Apakah Speculation Rules didukung Safari dan Firefox?

Per April 2026, dukungan prerender penuh masih Chrome, Edge, Opera. Safari dan Firefox masih dalam tahap eksperimental. Fallback ke prefetch standar bekerja otomatis di browser tanpa dukungan.

Berapa banyak halaman yang aman di-prerender bersamaan?

Chrome membatasi maksimal 2 halaman prerender aktif dengan eagerness moderate, 10 dengan immediate. Lebih dari itu, browser akan mengabaikan rules berikutnya untuk hemat memori.

Apakah prerender menghabiskan banyak bandwidth pengguna?

Iya, terutama di mobile. Pakai eagerness: conservative untuk koneksi lambat. Browser modern sebagian besar sudah mendeteksi Save-Data header dan otomatis mengurangi agresivitas prerender.

Apakah perlu sitemap khusus untuk Speculation Rules?

Tidak. Browser cukup membaca rules dari tag script di layout. Sertakan path strategis di href_matches untuk efek maksimal.

Apakah Speculation Rules bisa dipakai bersama Service Worker?

Bisa, tapi cache strategy Service Worker tetap berlaku. Pastikan tidak ada konflik antara prerender cache dan Cache Storage untuk halaman yang sama.

Penutup

Speculation Rules mengubah landing page dari "cepat" menjadi "instan". Untuk marketer Indonesia yang menginvestasikan iklan dan trafik organik ke landing tertentu, prerender adalah cara paling efisien menaikkan konversi tanpa menyentuh copy, desain, atau pricing. Dalam ekosistem Next.js 15, instalasinya cukup satu komponen client di layout root, dan dampaknya terukur dalam dua minggu observasi.

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang