# Preload / preconnect

Category: [Performance & Core Web Vitals](https://seo-geo-glossary.com/en/glossary/category/performance-core-web-vitals/) › [Optimization](https://seo-geo-glossary.com/en/glossary/category/performance-core-web-vitals/optimization/) · Also known as: resource hints, rel=preload, rel=preconnect, rel=prefetch, dns-prefetch

**Preload, preconnect and prefetch** are resource hints. A resource hint is a `<link>` element (or HTTP header) that tells the browser to fetch a file or open a connection earlier than it would on its own. Search results for the bare word "preload" include games and apps. This entry covers the web performance meaning.

## What does each hint do?

**Preload** (`rel="preload"`) declares a file the current page needs soon. MDN says the browser downloads it with higher priority and only stores it. The file is not applied until the page actually uses it. `as` is required and names the resource type. Fonts also need `crossorigin`.

**Preconnect** (`rel="preconnect"`) opens a connection to another origin in advance. For HTTPS that means DNS lookup, TCP and TLS. It only helps cross-origin requests, since the connection to the page's own origin already exists. MDN recommends it only for the most critical connections. For less important third parties, `dns-prefetch` resolves only the DNS name.

**Prefetch** (`rel="prefetch"`) fetches a resource that a later navigation will probably need. It has a lower priority than preload. MDN points out that cache partitioning in many browsers makes prefetching cross-site resources useless and refers to the Speculation Rules API for documents.

## Example

```html
<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>
<link rel="prefetch" href="/next-page/">
```

The paths and domains in the example are placeholders.

## Common mistakes

- Preloading a font without `crossorigin`, so the file is fetched twice (web.dev).
- Preconnecting to many origins. web.dev warns that too many connections delay other resources, and that unused connections close after about 10 seconds.
- Adding `crossorigin` to a preconnect when the later request is not a CORS request, or leaving it out when it is. CSS Wizardry describes checking the request in DevTools (`Sec-Fetch-Mode: cors`) and notes that one origin can need two preconnect tags.
- Preloading several formats of the same file. MDN advises preloading only the one most users need.

## FAQ

**What does preconnect do?** It sets up the connection to an origin before the first request to it.

**What is the difference between preload and prefetch?** Preload serves the current page, prefetch a likely next one.

## Related terms

- [Largest Contentful Paint (LCP)](https://seo-geo-glossary.com/en/glossary/largest-contentful-paint/index.md)
- [Render-blocking resources](https://seo-geo-glossary.com/en/glossary/render-blocking-resources/index.md)
- [Web font loading](https://seo-geo-glossary.com/en/glossary/web-font-loading/index.md)
- [Critical CSS](https://seo-geo-glossary.com/en/glossary/critical-css/index.md)
- [HTTP Link header](https://seo-geo-glossary.com/en/glossary/http-link-header/index.md)
- [HTTP header](https://seo-geo-glossary.com/en/glossary/http-header/index.md)

## Sources

- [rel=preload – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preload)
- [rel=preconnect – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preconnect)
- [rel=prefetch – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/prefetch)
- [Establish network connections early – web.dev](https://web.dev/articles/preconnect-and-dns-prefetch)
- [Correctly configure (pre)connections – CSS Wizardry (supplementary)](https://csswizardry.com/2023/12/correctly-configure-preconnections/)

---

Last updated: October 7, 2026
URL: https://seo-geo-glossary.com/en/glossary/preload-preconnect/