Resource hints prefetch and prerender optimized for likely next navigations

Untargeted prefetching wastes bandwidth — especially on mobile where users pay per megabyte. Unconditionally prefetching all <Link> hrefs in a Next.js app can download 2–3 MB of route bundles that the user never visits (ISO-25010 resource-utilisation). Conversely, missing prefetch on high-probability paths (a paginated list with a 90% chance the user clicks "next") adds 300ms of navigation delay on every click. The gap between what the user is likely to do and what the browser has prefetched is a measurable UX cost.

Implement targeted prefetch on high-probability navigation paths, not all links. For Next.js, use the prefetch prop selectively and the router for hover-based prefetching:

import { useRouter } from 'next/navigation'
const router = useRouter()

// Prefetch only on hover — not unconditionally
<button onMouseEnter={() => router.prefetch('/checkout')}>
  Proceed to Checkout
</button>

For broader speculation, use the Speculation Rules API (Chrome 109+):

<script type="speculationrules">
{
  "prefetch": [
    { "source": "document", "where": { "href_matches": "/products/*" } }
  ]
}
</script>

Only prefetch pages users have >50% probability of visiting next. Disable unconditional prefetch on <Link prefetch={false}> for low-probability destinations.

• ID: performance-core.loading-resource-priority.resource-hints

• Severity: low

• What to look for: Count all relevant instances and enumerate each. Check HTML and JavaScript for <link rel="prefetch">, <link rel="prerender">, or programmatic prefetching via the Speculation Rules API (<script type="speculationrules">). Identify which pages or resources are being prefetched. Evaluate whether the prefetched resources align with likely next-navigation paths (e.g., prefetching the product detail page from the product list page). Check whether any prefetching wastes bandwidth on low-probability pages. Look for framework-level prefetching (Next.js <Link> prefetch, Nuxt prefetch directives).

• Pass criteria: Resources or pages that users are highly likely to navigate to next are prefetched in advance. Prefetching is triggered on hover or when the link enters the viewport — not for all links unconditionally. Speculation Rules API is used for prerender where browser support allows. No prefetch calls target pages with low navigation probability.

• Fail criteria: No prefetching is implemented despite having clear high-probability navigation paths (e.g., a paginated list with no prefetch of the next page). Alternatively, all links are prefetched unconditionally, wasting significant bandwidth on mobile. Prefetch resources are larger than 500KB and downloaded on every page load regardless of user intent.

• Skip (N/A) when: The project is a single-page app with client-side routing that already loads all route components, or the project has no multi-page navigation patterns.

• Detail on fail: Describe the prefetch opportunity or waste. Example: "Product listing page has no prefetch for product detail pages; 300ms navigation delay on every click. High-probability next page identified but not prefetched" or "All 40 components use default Next.js prefetch=true unconditionally; mobile users download 2MB of unused route bundles".

• Remediation: Targeted prefetching makes navigations feel instant for predictable user flows:

  <!-- Prefetch the next likely page -->
  <link rel="prefetch" href="/checkout" as="document">
  
  <!-- Speculation Rules API for prerender (Chrome 109+) -->
  <script type="speculationrules">
  {
    "prerender": [
      { "source": "list", "urls": ["/product/1", "/product/2"] }
    ],
    "prefetch": [
      { "source": "document", "where": { "href_matches": "/blog/*" } }
    ]
  }
  </script>
  

  With Next.js <Link>, prefetch on hover is automatic. For manual control:

  import { useRouter } from 'next/navigation'
  const router = useRouter()
  
  // Prefetch on hover
  <Link href="/checkout" prefetch={true}>Checkout</Link>
  
  // Programmatic prefetch on hover
  <button onMouseEnter={() => router.prefetch('/checkout')}>Go to checkout</button>
  

  Be selective: only prefetch pages users are >50% likely to visit next. Avoid unconditional prefetch of all links — it wastes bandwidth and can overload the server.

• Cross-reference: For related patterns and deeper analysis, see the corresponding checks in other AuditBuffet audits covering this domain.