---
title: "preconnect · Link relation · zhead"
canonical_url: "https://zhead.dev/link/preconnect"
last_updated: "2026-08-19T02:35:55.789Z"
meta:
  description: "Asks the browser to prepare a connection to an origin before the page requests a resource from it. This can cover DNS, transport, and TLS setup."
  "og:description": "Asks the browser to prepare a connection to an origin before the page requests a resource from it. This can cover DNS, transport, and TLS setup."
  "og:title": "preconnect · Link relation · zhead"
---

Link

# preconnect

Asks the browser to prepare a connection to an origin before the page requests a resource from it. This can cover DNS, transport, and TLS setup.

## Code examples

Good example

```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Prepares an anonymous cross-origin connection to a CDN used early by the page.

Avoid this example

```
<link rel="preconnect">
```

Has no href, so it gives the browser no origin to connect to.

## Recommendations

- 01 Use only for critical origins An unused connection costs sockets, CPU time, and network traffic. Reserve preconnect for origins the page will use soon.
- 02 Match the credentials mode For resources fetched with anonymous CORS, such as cross-origin fonts, add crossorigin so the prepared connection can be reused.

## Related documentation

- [HTML Living Standard: Links](https://html.spec.whatwg.org/multipage/links.html#link-type-preconnect)