Preload / Prefetch / Preconnect

Resource hints that tell the browser to fetch or connect earlier than it would otherwise. Preload fetches critical resources early. Prefetch fetches resources for future navigation. Preconnect sets up early connections to origins.

Category: Performance (also: Front End)

Author: Atomic Glue Performance Team

## Definition

Preload, prefetch, and preconnect are HTML resource hints declared via <link rel="..."> tags. Preload tells the browser to fetch a resource with high priority for the current page. Prefetch fetches a resource with low priority for a likely future navigation. Preconnect tells the browser to perform DNS lookup, TCP handshake, and TLS negotiation with a cross-origin server early, before it encounters a resource from that origin in the HTML.

## When to Use Each

Preload: critical resources that the browser discovers late (fonts in external CSS, hero images, LCP candidates). Prefetch: resources for the likely next page (JS bundles for the next view, next page HTML). Preconnect: cross-origin origins known to be needed (CDN, analytics, font CDN). dns-prefetch is a lighter version of preconnect that only does DNS lookup.

## Common Misunderstandings

Preload does NOT guarantee faster loading. Misuse (preloading resources already discovered early) wastes bandwidth and can slow other resources. Preloading everything is harmful. Prefetch should never be used for critical resources because it has lowest priority and the browser may ignore it under memory pressure. Preconnect without actual need wastes connections: only preconnect to origins you KNOW the browser will connect to within the first few seconds.

## Best Practices

Preload only 1-3 critical resources (LCP image, primary font, critical CSS). Use fetchpriority attribute instead of preload for images when possible. Prefetch sparingly; only for high-confidence next-page predictions. Preconnect to the most critical 2-3 third-party origins. Always add crossorigin attribute to preload for fonts and other CORS resources. Test with DevTools to verify hints are honored.

## Note

Overusing resource hints causes contention and can degrade performance. Each hint consumes network and CPU. Use sparingly and test impact. Monitor with DevTools network panel to confirm hints are honored.

## In code

<!-- Preload: critical LCP candidate -->
<link rel="preload" href="/hero.avif" as="image" fetchpriority="high">

<!-- Preload: font discovered late in CSS -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preconnect: known third-party origin -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- Prefetch: likely next page -->
<link rel="prefetch" href="/checkout.js" as="script">

## Common questions

Q: Should I preload everything important?

A: No. Preload only resources the browser discovers late. Over-use wastes bandwidth and can degrade performance.

## Key takeaways

• Preload: high-priority early fetch for current page.
• Prefetch: low-priority for future navigation.
• Preconnect: early connection setup to origins.
• Use sparingly; each hint consumes resources.
• Test with DevTools to verify correct behavior.

## Related entries

• [Render-Blocking Resource](atomicglue.co/glossary/render-blocking-resource)
• [LCP (Largest Contentful Paint)](atomicglue.co/glossary/lcp-largest-contentful-paint)
• [Critical Rendering Path](atomicglue.co/glossary/critical-rendering-path)

Last updated July 2026. Permalink: atomicglue.co/glossary/preload-prefetch-preconnect