---
title: "preload · Link relation · zhead"
canonical_url: "https://zhead.dev/link/preload"
last_updated: "2026-08-19T02:35:55.805Z"
meta:
  description: "Fetches a resource early for the current navigation, using the destination and priority implied by the as attribute. Preload fetches the resource but does not apply or execute it."
  "og:description": "Fetches a resource early for the current navigation, using the destination and priority implied by the as attribute. Preload fetches the resource but does not apply or execute it."
  "og:title": "preload · Link relation · zhead"
---

Link

# preload

Fetches a resource early for the current navigation, using the destination and priority implied by the as attribute. Preload fetches the resource but does not apply or execute it.

## Code examples

Good example

```
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>
```

Preloads a font with the destination, type, and anonymous CORS mode used by the later font request.

Good example

```
<link rel="preload" href="/critical.css" as="style">
```

Fetches CSS early. A separate stylesheet link is still needed to apply it.

Avoid this example

```
<link rel="preload" href="/critical.css">
```

Omits as, so the preload has no valid fetch destination and is ignored.

## Recommendations

- 01 Set the fetch destination The as value must match how the resource will be used, such as style, script, font, or image. A mismatch can cause another fetch.
- 02 Match CORS settings The preload and the later resource request must use compatible CORS and credentials modes. Fonts generally need crossorigin, including same-origin font preloads.
- 03 Preload only near-term resources Browsers warn when a preloaded resource is not used soon after load. Too many preloads can delay resources that matter more.

## Related documentation

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