Skip to main content

Prefetch, Preload & Preconnect Guide

Resource hints tell the browser what to fetch, compile, or connect to before it's needed. Used correctly, they eliminate critical resource delays. Used incorrectly, they waste bandwidth and compete with important assets.

✓ preload vs prefetch ✓ preconnect setup ✓ modulepreload ✓ Webpack magic comments

Resource Hints Quick Reference

Hint What It Does Priority Use For
preloadDownload resource for current pageHighLCP image, critical font, key script
prefetchDownload resource for next page (idle)LowestNext route JS chunk, future images
preconnectDNS + TCP + TLS handshake to originMediumCDN, fonts.gstatic.com, API origins
dns-prefetchDNS lookup only (cheap)LowOrigins you might need
modulepreloadFetch + parse + compile ES moduleHighCritical ES module entry points

HTML Usage Examples

<head>
  <!-- Preload LCP hero image (critical — always include) -->
  <link rel="preload" as="image" href="/hero.avif" fetchpriority="high">

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

  <!-- Preconnect to critical third-party origins -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://cdn.example.com">

  <!-- DNS-prefetch for analytics (may use, not certain) -->
  <link rel="dns-prefetch" href="https://analytics.example.com">

  <!-- Prefetch next page bundle (user likely to navigate) -->
  <link rel="prefetch" href="/js/dashboard.chunk.js" as="script">

  <!-- modulepreload for ES module entry point -->
  <link rel="modulepreload" href="/js/app.mjs">
</head>

Webpack Magic Comments

// Prefetch: low-priority load during idle time
// → generates <link rel="prefetch"> for the chunk
const NextPage = React.lazy(
  () => import(/* webpackPrefetch: true */ './pages/NextPage')
);

// Preload: high-priority, loaded with parent chunk
// → generates <link rel="preload"> for the chunk
const CriticalModule = React.lazy(
  () => import(/* webpackPreload: true */ './CriticalModule')
);

// Named chunk + prefetch
const AdminPage = React.lazy(
  () => import(
    /* webpackChunkName: "admin" */
    /* webpackPrefetch: true */
    './pages/Admin'
  )
);

Programmatic Prefetch

// Prefetch on hover (user likely to click)
function PrefetchLink({ href, children }) {
  const prefetch = () => {
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = href;
    document.head.appendChild(link);
  };

  return (
    <a href={href} onMouseEnter={prefetch} onFocus={prefetch}>
      {children}
    </a>
  );
}

// Prefetch when link enters viewport (Intersection Observer)
const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const url = entry.target.getAttribute('data-prefetch');
      if (url) fetch(url, { priority: 'low' });
    }
  });
});

document.querySelectorAll('[data-prefetch]').forEach(el => io.observe(el));

Common Mistakes to Avoid

Frequently Asked Questions

What is the difference between prefetch, preload, and preconnect?▼

Preload (`rel='preload'`) fetches a resource needed for the current page at high priority — use for LCP images, critical fonts, and key scripts. Prefetch (`rel='prefetch'`) downloads a resource for a future navigation at low priority during idle time — use for next-page assets. Preconnect (`rel='preconnect'`) establishes a TCP+TLS connection to an origin without downloading anything — use for third-party origins you'll definitely need (CDN, fonts, APIs). DNS-prefetch is cheaper than preconnect (only DNS, no TLS) — use for origins you might need.

When should I use preload vs prefetch?▼

Use preload for resources the current page needs urgently (within the first few seconds): the LCP hero image, the main font, critical above-fold scripts. Over-preloading wastes bandwidth and competes with critical resources. Use prefetch for resources the user will likely need next: the next page's main JS chunk, the next blog post's images, a modal component that's likely to be opened. Never preload everything — it defeats the purpose.

Can I preload dynamic imports in webpack/Vite?▼

Yes. Webpack supports magic comments: `import(/* webpackPrefetch: true */ './NextPage')` adds a prefetch hint automatically. For preload: `import(/* webpackPreload: true */ './CriticalModule')`. In Vite/Rollup, use `/* @vite-ignore */` or configure `build.rollupOptions.output.experimentalMinChunkSize`. React Router, Next.js, and Astro all auto-generate prefetch hints for in-viewport links by default.

What is the modulepreload link type?▼

The `rel='modulepreload'` link type preloads ES module scripts (and their dependencies) ahead of time, including parsing and compilation. It's more efficient than `rel='preload' as='script'` for ES modules because the browser can parse and compile the module immediately, not just download it. Use it for critical ES module entry points. Modern bundlers like Vite automatically generate modulepreload links for split chunks in the build output.

Share this tool: X / Twitter LinkedIn
✓ 60,000+ developers use DevPlaybook ★★★★★ 4.8 / 5 on Gumroad ✓ MIT licensed · Instant download ✓ No login required

Related Products

on Gumroad
⚡ $29

Developer Productivity Bundle

Stop rebuilding the same setup every project. 51 VSCode snippets, 40 Git aliases, 5 Docker Compose stacks, 5 GitHub Actions workflows, 5 README templates, and a dotfiles kit. Set up a professional dev environment in under an hour.

Buy on Gumroad →
🤖 $19

AI Prompt Engineering Toolkit

58 structured prompt templates for Claude, ChatGPT, and Gemini — organized by use case. Code Review, Debugging, Documentation, Architecture, and 10 model-specific tips. Stop writing prompts from scratch.

Buy on Gumroad →
📋 $14

Developer Cheat Sheet Bundle

10 print-ready cheat sheets for the tools developers use every day: Git, Docker, Linux CLI, SQL, Regex, HTTP Status codes, VS Code shortcuts, Bash scripting, jq/JSON, and Markdown.

Buy on Gumroad →

You Might Also Need

Web Performance Checklist

Interactive web performance checklist covering images, fonts, JavaScript, CSS, caching, and server. Check off items to track your score out of 100 and export as Markdown.

Open free tool →

HTTP/2 Server Push Headers Builder

Build HTTP/2 Link preload headers for server push. Generate nginx, Apache, and Caddy config snippets for CSS, JS, fonts, and images.

Open free tool →

Lighthouse Score Simulator

Estimate Lighthouse performance scores based on JS bundle size, CSS, images, TTFB, and render-blocking resources. Get LCP, FID, CLS, FCP estimates.

Open free tool →

More Free Tools

Web Performance Checklist HTTP/2 Server Push Headers Builder Lighthouse Score Simulator Web Vitals Budget Planner Web Vitals Scorer Web Vitals Analyzer Resource Hints Generator Core Web Vitals Guide SQL Index Advisor HAR Diff Analyzer MySQL Query Explainer PostgreSQL EXPLAIN Analyzer k6 Load Test Script Generator Database Index Analyzer Core Web Vitals Calculator Database Index Advisor LLM Benchmark Calculator k6 Script Generator Core Web Vitals Budget Calculator Bundle Size Budget Calculator Image Optimization Calculator TTFB Analyzer Database Query Cost Analyzer

Related Articles

Apr 2, 2026 · 23 min read

Web Performance and Core Web Vitals 2026: Complete Optimization Guide

Complete guide to Core Web Vitals optimization in 2026. Covers LCP, INP, CLS, TTFB optimization with real code examples. Includes Next.js, React, Vite, Cloudflare Workers, and backend optimization strategies for achieving 90+ Lighthouse scores.
Mar 28, 2026 · 14 min read

Web Performance 2026: INP, Core Web Vitals & Lighthouse CI

Master web performance in 2026: INP replacing FID, LCP and CLS optimization, Lighthouse CI in GitHub Actions, RUM with web-vitals.js, and setting performance budgets to keep your site fast.
Apr 2, 2026 · 25 min read

Performance Optimization 2026: Complete Guide to Frontend, Backend, and Infrastructure

Comprehensive performance optimization guide for 2026 covering Core Web Vitals, JavaScript bundle optimization, server-side rendering, caching strategies, database query optimization, CDN configuration, and real-world benchmarks.
Apr 2, 2026 · 13 min read

Performance Testing in 2026: Beyond Page Load Times

A practical guide to performance testing in 2026 — Core Web Vitals, load testing, stress testing, soak testing, and building a performance culture that treats speed as a feature. Includes tooling recommendations and actionable measurement strategies.
Mar 24, 2026 · 11 min read

Web Vitals Optimization: Achieve Core Web Vitals Score 90+ in 2026

Step-by-step guide to achieving Core Web Vitals score of 90+ in 2026. Covers LCP, INP, CLS optimization techniques with code examples, measurement tools, and before/after benchmarks.

Enjoying this tool? Get more like it.

Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.

DevPlaybook Pro 7 days free

Unlock AI-Powered Dev Tools

  • ⚡ AI Code Review, Doc Generator & SQL Builder
  • ⚡ All premium templates & early access
  • ⚡ Member discounts on Gumroad products
Start Free Trial →

$9/mo after trial · Cancel anytime

Want the full toolkit?

Get DevPlaybook Pro

Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.

$79
$241 separately Save $162 (67% off)
Get DevPlaybook Pro — $79 →

MIT licensed · Instant download · No subscription

See what's included → Browse all deals →