Resource Hints (preconnect, prefetch, preload)
debt(d3/e1/b2/t7)
Closest to 'default linter catches the common case' (d3), Lighthouse and PageSpeed Insights flag missing preconnect for Google Fonts and unused preload warnings appear directly in Chrome DevTools console — these are standard, widely-run audits.
Closest to 'one-line patch' (e1), the quick_fix is literally adding a <link rel='preconnect'> or <link rel='preload'> tag in the HTML head — a single-line addition per resource.
Closest to 'minimal commitment' (b1) leaning toward 'localised tax' (b3), resource hints live in document head and affect only frontend HTML; they don't shape architecture but do require ongoing curation (don't preconnect >6 origins, audit unused preloads).
Closest to 'serious trap' (t7), the misconception field is explicit: developers conflate preload and prefetch despite opposite semantics (mandatory current-page vs optional future-page). The name 'preload' suggests 'load early, harmless' but actually creates mandatory high-priority fetches that waste bandwidth if unused — contradicts intuition.
Also Known As
TL;DR
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
Why It Matters
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
<!-- 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"><!-- 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>