Preload Prefetch in HTML

link rel=preload, prefetch, preconnect, and modulepreload — speed critical assets without wrecking bandwidth priorities.

intermediate3 min readUpdated Aug 4, 2026

html
preload
prefetch
performance

Resource hints tell the browser what to fetch early or which origins to warm. Used well, they improve LCP and interaction readiness. Used poorly, they fight the browser’s scheduler and congest mobile networks.

Docs: MDN rel=preload, prefetch, preconnect, web.dev preload.

preload — this page, critical, now

<link
  rel="preload"
  href="/fonts/Inter.var.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

<link rel="preload" href="/hero.avif" as="image" fetchpriority="high" />

<link rel="preload" href="/styles/critical-theme.css" as="style" />

Rules:

as is required for correct prioritization (font, image, script, style, fetch, …).
Fonts need crossorigin even for same-origin in most setups.
Only preload what the page will use soon — unused preload wastes bandwidth and warns in DevTools.
Match the exact URL the page will request (query strings matter).

modulepreload

<link rel="modulepreload" href="/assets/app-core.js" />

Warms ES modules and their dependency graph more intelligently than classic script preload in many cases.

<link rel="prefetch" href="/pricing" as="document" />
<link rel="prefetch" href="/assets/pricing-page.js" as="script" />

Lower priority; for future pages. Don’t prefetch the world on a marketing homepage.

preconnect / dns-prefetch

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

preconnect — DNS + TCP + TLS warm
dns-prefetch — DNS only (cheaper, weaker)

Limit to a few critical third-party origins (fonts CDN, API).

Priority mental model

Hint	Intent
`preload`	Critical for current navigation
`modulepreload`	Critical modules for current page
`prefetch`	Speculative next page
`preconnect`	Warm origin for imminent requests

Anti-patterns

<!-- Too many preloads -->
<link rel="preload" href="/a.js" as="script" />
<link rel="preload" href="/b.js" as="script" />
<link rel="preload" href="/c.js" as="script" />
<!-- … -->

Preloading every asset recreates HTTP/1 chaos. Prefer critical path only; let the rest discover naturally.

Preloading a responsive image without care can download the wrong candidate — use imagesrcset / imagesizes on preload when preloading responsive images:

<link
  rel="preload"
  as="image"
  href="/hero-800.jpg"
  imagesrcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1200.jpg 1200w"
  imagesizes="100vw"
/>

Interview out-loud

“preload fetches critical current-page assets with an as type. modulepreload is for JS modules. prefetch is speculative for next navigations. preconnect warms third-party origins. I only hint what profiling shows is on the critical path and I always crossorigin font preloads.”

Footguns

Preload unused fonts/images.
Forgetting crossorigin on fonts → double download.
Prefetch storms on slow networks.
Preconnect to 15 analytics hosts.
Fighting fetchpriority and preload without measuring LCP.

Measured workflow

Record a load with no hints.
Identify LCP resource and critical font.
Add one preload for each if not already discovered early.
Re-measure on throttled mobile.
Remove any preload that shows “preloaded but not used.”

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="preload"
  as="font"
  type="font/woff2"
  href="/fonts/inter.woff2"
  crossorigin
/>

Self-hosting fonts often beats third-party chains even with preconnect — fewer parties, better caching control.

SPA route prefetch

Client routers often prefetch JS for likely next routes on hover or viewport. Coordinate with HTTP rel=prefetch so you do not double-fetch. Prefer framework-native prefetch that understands your graph. On data-saver connections (Save-Data / network information), reduce speculative work.