When should you NOT use Resource Hints (preconnect, prefetch, preload)?

Do not preconnect to more than 4-6 origins — idle connections waste client and server resources. Do not preload resources that may not be used on the current page — mandatory fetches waste bandwidth. Do not use preload as a substitute for defer on scripts — defer achieves parallel download with proper execution order.

When is Resource Hints (preconnect, prefetch, preload) the right choice?

Use preconnect for external origins whose resources appear in the first 3 seconds of page load. Use preload for render-critical resources discovered late in parsing (fonts referenced in CSS, hero images in CSS backgrounds). Use prefetch for resources needed for the next likely user navigation (next article, checkout page).

← Back to glossary

Resource Hints (preconnect, prefetch, preload)

performance Intermediate

Also Known As

preconnect prefetch preload dns-prefetch link preload link prefetch link preconnect browser hints

TL;DR

HTML link attributes that instruct the browser to take early action on resources — opening connections, fetching future pages, or loading critical assets before they are discovered in HTML parsing.

Explanation

Resource hints let developers communicate future resource needs to the browser before normal HTML parsing would discover them: preconnect opens a TCP + TLS connection to an origin early (saving 100-500ms on first use); dns-prefetch resolves DNS only (cheaper, use as fallback for preconnect); preload is a mandatory fetch of a critical resource the current page will need (fonts, hero images in CSS, late-discovered scripts); prefetch is a low-priority fetch of a resource likely needed for the next navigation. Priorities matter: preconnect should only be used for at most 4-6 origins because idle connections consume resources; preload creates a mandatory network request regardless of whether the resource is used — unused preloads waste bandwidth and trigger console warnings; prefetch respects idle network time and is safe to use more liberally.

Common Misconception

✗ preload and prefetch are the same thing — preload is a mandatory high-priority fetch for the current page (unused preloads waste bandwidth); prefetch is an optional low-priority fetch for future pages (safe to ignore if bandwidth is constrained).

Why It Matters

Google Fonts without preconnect requires the browser to first discover the stylesheet, then open a new connection to fonts.googleapis.com, then open another to fonts.gstatic.com — adding 200-500ms of latency that preconnect eliminates by starting those connections before the parser reaches the stylesheet link.

Common Mistakes

Preconnecting to more than 6 origins — idle connections consume memory and CPU on both client and server; only preconnect to origins with resources needed in the first 3 seconds.
Using preload for resources that may not be needed — preload creates a mandatory fetch; unused preloads waste bandwidth and trigger a browser warning.
Forgetting crossorigin='anonymous' on preconnect for CORS resources — fonts from Google Fonts require crossorigin on the preconnect to gstatic.com.
Using preload for late-loaded scripts that could just use defer — defer is simpler and achieves the same parallel download.
dns-prefetch when preconnect is supported — preconnect is strictly better on modern browsers; use dns-prefetch only as a fallback for IE11.

Avoid When

Do not preconnect to more than 4-6 origins — idle connections waste client and server resources.
Do not preload resources that may not be used on the current page — mandatory fetches waste bandwidth.
Do not use preload as a substitute for defer on scripts — defer achieves parallel download with proper execution order.

When To Use

Use preconnect for external origins whose resources appear in the first 3 seconds of page load.
Use preload for render-critical resources discovered late in parsing (fonts referenced in CSS, hero images in CSS backgrounds).
Use prefetch for resources needed for the next likely user navigation (next article, checkout page).

Code Examples

✗ Vulnerable

<!-- Google Fonts without preconnect: 3 sequential round trips -->
<head>
  <link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">
</head>

<!-- Preload for a font that may not be used on this page -->
<link rel="preload" href="/fonts/bold.woff2" as="font" type="font/woff2">

✓ Fixed

<!-- Google Fonts with preconnect: parallel connection setup -->
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">

  <!-- Preload only the critical hero image (above-fold, in CSS background) -->
  <link rel="preload" href="/images/hero.jpg" as="image">

  <!-- Prefetch the next page the user is likely to visit -->
  <link rel="prefetch" href="/checkout">
</head>

Resource Hints (preconnect, prefetch, preload)

Also Known As

TL;DR

Explanation

Common Misconception

Why It Matters

Common Mistakes

Avoid When

When To Use

Code Examples

References

Tags

Resource Hints (preconnect, prefetch, preload)

Also Known As

TL;DR

Explanation

Common Misconception

Why It Matters

Common Mistakes

Avoid When

When To Use

Code Examples

References

Tags

Related Terms