What is resource hinting: preconnect, prefetch, and preload
rel=preconnect, rel=dns-prefetch, rel=preload, rel=prefetch, rel=modulepreload, as attribute, crossorigin attribute, when to use each hint, over-hinting risk
Resource Hints
Resource hints tell the browser about resources it will need, letting it act earlier than it otherwise would. Used correctly, they eliminate hidden latency.
<!-- Preconnect: open TCP+TLS to a critical third-party origin NOW -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- DNS-prefetch: DNS only (cheaper, use for less-critical origins) -->
<link rel="dns-prefetch" href="https://cdn.analytics.com">
<!-- Preload: fetch a critical current-page resource immediately -->
<link rel="preload" href="/fonts/geist.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero.avif" as="image">
<!-- Prefetch: download a next-page resource during idle time -->
<link rel="prefetch" href="/pages/checkout.js">
<!-- Modulepreload: preload + parse an ES module -->
<link rel="modulepreload" href="/src/app.js">Key distinctions:
preconnect— use for critical cross-origin resources; browsers open connection speculativelypreload— current page, high priority; must include correctasattribute or the hint is ignoredprefetch— future navigation; low priority, uses idle network
Over-hinting is a real problem: too many preload hints compete with each other and can hurt LCP. Limit preload to 2–3 resources per page. Measure with Lighthouse's "Avoid chaining critical requests" audit.