# Speculative prefetch is configured for likely next pages

- **Pattern:** `ab-001798` (`marketing-page-speed.loading-strategy.speculative-prefetch`)
- **Severity:** info
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001798
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001798)

## Why it matters

Speculative prefetch turns navigation between marketing pages — homepage to pricing, pricing to signup — from a network-dependent operation into an instant cache hit. Without prefetch, clicking a CTA initiates a full page load cycle: DNS, TCP, TLS, request, response, parse, render. With prefetch, the browser fetches the next page during idle time after the current page loads, so the navigation appears instant. ISO-25010 time-behaviour quality applies to navigation response time as well as initial page load. In Next.js, this capability is built into `<Link>` with zero configuration — the only failure mode is using plain `<a href>` tags on conversion CTAs, which disables the automatic prefetch without any explicit opt-out.

## Severity rationale

Info because speculative prefetch is an enhancement that improves perceived navigation speed, but its absence doesn't harm initial page load metrics or search rankings directly.

## Remediation

Replace plain `<a href>` tags on internal CTAs with Next.js `<Link>` — Next.js prefetches linked pages on hover in production automatically.

```tsx
import Link from 'next/link'

// Before — plain anchor, no prefetch
<a href="/pricing" className="btn-primary">See pricing</a>

// After — automatic prefetch in Next.js production builds
<Link href="/pricing" className="btn-primary">See pricing</Link>
```

For aggressive prefetch of the highest-probability conversion paths, add the Speculation Rules API (Chrome 109+):

```html
<script type="speculationrules">
  {"prefetch": [{"source": "list", "urls": ["/pricing", "/signup"]}]}
</script>
```

Verify prefetch is working with Chrome DevTools → Network tab → filter for `document` requests while hovering over a `<Link>` — you should see the next page prefetched before the click.

## Detection

- **ID:** `speculative-prefetch`
- **Severity:** `info`
- **What to look for:** Speculative prefetch loads the next likely page before the user clicks, making navigation feel instant. For marketing sites, the most common pattern is: homepage → pricing page, pricing page → signup page. Check for: (1) `<Link prefetch>` on key CTAs in Next.js (Next.js prefetches on hover by default in production), (2) explicit `<link rel="prefetch">` tags, (3) the Speculation Rules API (`<script type="speculationrules">`), (4) any prefetch configuration in the framework. Count all instances found and enumerate each.
- **Pass criteria:** Key conversion-path links (CTA buttons, pricing page links, signup links) benefit from prefetch. In Next.js, this is automatic for `<Link>` components — confirm they are used rather than plain `<a>` tags. At least 1 implementation must be confirmed.
- **Fail criteria:** Key CTAs use plain `<a href>` instead of framework Link components, missing automatic prefetch. No explicit prefetch for high-probability next pages.
- **Skip (N/A) when:** Single-page marketing site with no internal navigation beyond the CTA (which goes to an external signup).
- **Detail on fail:** `"Primary CTA button uses <a href='/pricing'> instead of Next.js <Link href='/pricing'> — misses automatic prefetch on hover in production."`
- **Remediation:** Use framework Link components for internal navigation:

  ```tsx
  // Before — misses prefetch
  <a href="/pricing" className="btn-primary">See pricing</a>

  // After — automatic prefetch in Next.js production
  import Link from 'next/link'
  <Link href="/pricing" className="btn-primary">See pricing</Link>

  // For aggressive prefetch with Speculation Rules API (Chrome 109+)
  <script type="speculationrules">
    {`{"prefetch": [{"source": "list", "urls": ["/pricing", "/signup"]}]}`}
  </script>
  ```

---

## External references

- iso-25010 performance-efficiency.time-behaviour

Taxons: performance

HTML version: https://auditbuffet.com/patterns/ab-001798