Preconnect and Prefetch: Using Resource Hints to Speed Up Navigation

Every time your browser needs a resource from a new domain, it must perform DNS lookup, TCP connection, and TLS negotiation — adding 100-300ms before the first byte arrives. Resource hints tell the browser to start this process early, eliminating the wait.

The Three Key Resource Hints

1. Preconnect

Establishes a connection to a domain before it's needed:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Saves: 100-300ms per domain (DNS + TCP + TLS)

Use when: You know you'll need resources from a third-party domain but the browser hasn't discovered them yet.

2. DNS-Prefetch

Like preconnect but only does the DNS lookup (lighter):

<link rel="dns-prefetch" href="https://analytics.example.com">

Saves: 20-120ms per domain (DNS only)

Use when: You might need resources from a domain, or for less critical third-party domains.

3. Prefetch

Downloads a resource in the background for future navigation:

<link rel="prefetch" href="/next-page.js" as="script">
<link rel="prefetch" href="/next-page.css" as="style">

Saves: The entire download time on navigation

Use when: You can predict what page/resource the user will need next.

Preload vs. Prefetch

These are often confused:

Hint	Priority	When Used
preload	High — current page	Resource needed NOW but discovered late
prefetch	Low — next navigation	Resource needed on a FUTURE page

<!-- PRELOAD: I need this font RIGHT NOW for this page -->
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>

<!-- PREFETCH: The user might navigate to /dashboard next -->
<link rel="prefetch" href="/dashboard/chunk.js" as="script">

Practical Implementation

Fonts (Most Common Win)

Google Fonts requires connections to two domains:

<!-- Preconnect to Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Self-hosted fonts:

<!-- Preload the font file directly -->
<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>

Third-Party Services

<!-- Analytics -->
<link rel="preconnect" href="https://www.google-analytics.com">

<!-- CDN for images -->
<link rel="preconnect" href="https://images.yourcdn.com" crossorigin>

<!-- API server -->
<link rel="preconnect" href="https://api.yourapp.com" crossorigin>

<!-- Less critical third parties -->
<link rel="dns-prefetch" href="https://www.facebook.com">
<link rel="dns-prefetch" href="https://platform.twitter.com">

Predictive Prefetching

Prefetch resources for likely next pages:

// Prefetch on link hover (user is likely to click)
document.querySelectorAll('a[data-prefetch]').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = link.href;
    document.head.appendChild(prefetchLink);
  }, { once: true });
});

Next.js

Next.js automatically prefetches linked pages:

// Automatically prefetched when visible in viewport
<Link href="/about">About</Link>

// Disable prefetch for rarely-visited pages
<Link href="/terms" prefetch={false}>Terms</Link>

Best Practices

1. Limit preconnects to 4-6 domains — each connection uses CPU and memory
2. Don't preconnect to your own origin — the connection already exists
3. Use crossorigin when needed — fonts and fetch API requests require it
4. Audit regularly — remove hints for domains you no longer use
5. Measure the impact — use WebPageTest to see connection timing waterfall

Measuring Impact

Use Chrome DevTools Network tab:

• Without preconnect: Look for DNS/connect/TLS time on third-party requests
• With preconnect: These should drop to 0ms

Monitor Connection Performance

Resource hints are a quick win for third-party-heavy pages. BadPageSpeed monitors your Core Web Vitals to ensure these optimizations stick.

Track your performance →