Resource Hints Explained: preconnect, dns-prefetch, preload & prefetch
Understand with AI
Discuss with your preferred AI assistant
A correctly placed preconnect + preload on a render-critical font or hero image can cut Largest Contentful Paint by hundreds of milliseconds to a full second.
A font preload missing crossorigin="anonymous" causes the browser to download the font twice — the most common resource-hint bug.
Beyond a handful of critical origins, extra preconnects consume CPU and bandwidth with diminishing returns.
Resource hints are tiny <link> tags you add to your HTML <head> that tell the browser to do network work before it would otherwise discover it needs to. Used well, they shave hundreds of milliseconds off your Largest Contentful Paint and make navigations feel instant. Used carelessly, they waste bandwidth and can actually slow you down.
This guide explains every resource hint, when to reach for each one, and the attribute details — as, type, crossorigin, and fetchpriority — that decide whether a hint helps or gets silently ignored.
What Are Resource Hints?
A resource hint is a declarative instruction to the browser's preload scanner. Instead of waiting to discover an asset deep in your HTML, CSS, or JavaScript, you surface it early so the connection or download can start sooner. There are five hints worth knowing, plus the now-deprecated prerender.
- preconnect — opens the full connection (DNS + TCP + TLS) to a critical third-party origin so the first request to it is faster.
- dns-prefetch — resolves DNS only. Cheaper than preconnect and a useful fallback for less-critical origins.
- preload — fetches a specific, render-critical resource now at high priority.
- prefetch — fetches a resource at low priority for the next navigation.
- modulepreload — preloads and parses an ES module (and optionally its dependency graph).
When to Use Each Hint
preconnect and dns-prefetch
Use preconnect for the two to four third-party origins you hit on every page — a font host, an analytics endpoint, or an image CDN. Each open connection costs CPU and memory, so resist the urge to preconnect to everything. For origins that are likely-but-not-certain, use dns-prefetch, which is far lighter. A common pattern is to pair both: a preconnect for modern browsers and a matching dns-prefetch as a fallback.
preload
Reach for preload when a render-critical resource is discovered late — a web font referenced inside CSS, a hero image set by JavaScript, or a critical stylesheet loaded by a script. The browser would normally find these only after parsing the file that references them; preloading moves the fetch to the very start. Preload sparingly: every preload competes for bandwidth with the HTML and CSS the browser actually needs first.
prefetch and modulepreload
Use prefetch to warm the cache for the next likely page — the checkout step after a cart, or the article a reader is about to click. It runs at low priority and never competes with the current page. Use modulepreload for the critical JavaScript modules an app needs immediately, since it both downloads and parses them ahead of execution.
Getting the Attributes Right
Most broken hints fail on a missing attribute, not a typo in the URL. Three attributes do the heavy lifting:
- as — required on preload. It tells the browser the resource type (script, style, font, image, fetch) so it can set the correct priority and Accept header. A preload with no as is ignored.
- type — the MIME type. On font preloads it lets browsers that do not support a format (for example, a browser without WOFF2) skip the download entirely.
- crossorigin — required when preloading fonts, and for any cross-origin request made in CORS mode. Fonts are always fetched anonymously, so a font preload without crossorigin="anonymous" downloads the font twice — once for the preload and once for the real request.
Two newer attributes give you finer control. fetchpriority="high" on a hero-image preload pushes it ahead of other images, and imagesrcset with imagesizes lets you preload the exact responsive image variant the browser will actually use.
A Quick Reference Table
| Hint | What it does | Best for |
|---|---|---|
| preconnect | DNS + TCP + TLS to an origin | 2–4 critical third-party origins |
| dns-prefetch | DNS resolution only | Less-critical origins, fallback |
| preload | High-priority fetch of one asset | Fonts, hero image, critical CSS/JS |
| prefetch | Low-priority fetch for next page | Likely next navigation |
| modulepreload | Fetch + parse an ES module | Critical app JavaScript |
Common Mistakes to Avoid
- Preloading too much. If everything is high priority, nothing is. Limit preloads to genuinely render-critical, late-discovered assets.
- Forgetting crossorigin on fonts. This is the single most common bug and it doubles your font download.
- Preloading without as. Browsers ignore it, so you pay the cost of a tag that does nothing.
- Over-preconnecting. Six or seven preconnects can hurt more than they help. Trim to the origins on your critical path.
Expert Tips
Preload the LCP element first
Identify your Largest Contentful Paint element — usually the hero image or a heading in a web font — and preload it with fetchpriority="high". This is the single highest-leverage hint for Core Web Vitals.
Pair preconnect with dns-prefetch
Add a preconnect for modern browsers and a matching dns-prefetch right after it as a fallback. The DNS resolution still helps browsers that ignore or rate-limit preconnect.
Frequently Asked Questions
What is the difference between preconnect and preload?
Preconnect warms up a connection to an origin (DNS, TCP, and TLS) so the first request to that server is faster, but it does not download anything. Preload fetches a specific resource at high priority. Use preconnect for third-party origins and preload for individual critical files.
Do I always need crossorigin on a font preload?
Yes. Fonts are fetched in anonymous CORS mode regardless of origin, so a font preload must include crossorigin="anonymous" . Without it, the preloaded font is not reused and the browser downloads it a second time, wasting bandwidth and delaying text rendering.
Is rel="prerender" still safe to use?
No — rel="prerender" is deprecated in Chromium and behaves inconsistently across browsers. For prerendering the next page, use the modern Speculation Rules API instead, which is far more controllable and privacy-aware.
How many preconnect hints should I add?
Keep preconnect to the two to four most critical third-party origins. Each open connection consumes CPU, memory, and bandwidth, so additional preconnects offer diminishing returns and can slow the connections that actually matter.