Speculative prefetch is configured for likely next pages

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.

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

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+):

<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.

• 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:

  // 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>