Prefetching & Preloading

Introduction

Resource hints tell the browser about resources it will need soon, allowing it to start fetching them before they're discovered through normal parsing.

Preloading fetches critical resources for the current page earlier, while prefetching loads resources for likely future navigations. Used correctly, they eliminate network waterfalls.

This guide covers every resource hint type, when to use each one, and practical implementation.

Key Concepts

Resource Hint Types

html

<!-- DNS Prefetch -->
<link rel="dns-prefetch" href="https://api.example.com">

<!-- Preconnect: DNS + TCP + TLS -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload: CURRENT page (high priority) -->
<link rel="preload" href="/hero.webp" as="image">

<!-- Prefetch: FUTURE navigation (low priority) -->
<link rel="prefetch" href="/next-page.html">

<!-- Modulepreload -->
<link rel="modulepreload" href="/app.js">

Practical Examples

1. Preloading LCP Resources

html

<link rel="preload" as="image" href="/hero.avif" type="image/avif" fetchpriority="high">
<link rel="preload" as="font" href="/inter-var.woff2" type="font/woff2" crossorigin>

2. Prefetching on Hover

javascript

const prefetched = new Set();
document.addEventListener('mouseover', (e) => {
  const link = e.target.closest('a[href]');
  if (!link || prefetched.has(link.href) || link.origin !== location.origin) return;
  prefetched.add(link.href);
  const hint = document.createElement('link');
  hint.rel = 'prefetch';
  hint.href = link.href;
  document.head.appendChild(hint);
});

3. Quicklink Library

javascript

import { listen } from 'quicklink';
listen({ limit: 5, timeout: 2000, ignores: [/\/api\//] });

4. Next.js Automatic Prefetching

typescript

import Link from 'next/link';
<Link href="/about">About</Link>  // Prefetched when visible
<Link href="/admin" prefetch={false}>Admin</Link>

Best Practices

✅ Preload the LCP image and critical fonts
✅ Preconnect to third-party origins (CDN, API, fonts)
✅ Prefetch likely next pages for instant navigation
✅ Limit preloads to 3-5 resources
❌ Don't preload resources unused within 3 seconds
❌ Don't prefetch on mobile data connections

Common Pitfalls

🚫 Preloading too many resources — competes for bandwidth
🚫 Forgetting 'as' attribute — resource fetched twice
🚫 Missing crossorigin on font preloads
🚫 Prefetching on slow connections