# Preload / Preconnect / Prefetch

Kategorie: [Performance & Core Web Vitals](https://seo-geo-glossary.com/de/glossar/kategorie/performance-core-web-vitals/) › [Optimierung](https://seo-geo-glossary.com/de/glossar/kategorie/performance-core-web-vitals/optimierung/)

**Preload, Preconnect und Prefetch** sind Resource Hints, also Hinweise im HTML, mit denen Browser Ressourcen oder Verbindungen früher laden. In der Suche nach „preload“ erscheinen oft Spiele und Programme, die vorab geladen werden. Hier geht es um die Webperformance. Die drei Werte des `rel`-Attributs im `<link>`-Element haben unterschiedliche Aufgaben.

## Preload

Mit `rel="preload"` wird eine Ressource, die die aktuelle Seite sehr bald braucht, früh abgerufen, ohne sie auszuführen. Das Attribut `as` nennt den Typ, etwa `font`, `image`, `script` oder `style`. Für Ressourcen mit CORS, zum Beispiel Schriften, braucht der Tag `crossorigin`. Laut web.dev werden Schriften ohne dieses Attribut doppelt geladen. Ungenutzte Preloads kosten trotzdem Bandbreite. web.dev empfiehlt Preload vor allem für Ressourcen, die der Browser spät entdeckt, etwa Schriften aus CSS oder Hintergrundbilder.

## Preconnect

`rel="preconnect"` baut vorab eine Verbindung zu einer anderen Domain auf, bei HTTPS mit DNS, TCP und TLS. MDN empfiehlt es nur für die wichtigsten Verbindungen und nur für Cross-Origin-Anfragen. Für weitere Domains kommt `dns-prefetch` infrage, das nur den DNS-Lookup erledigt.

## Prefetch

`rel="prefetch"` ruft Ressourcen ab, die vermutlich für eine spätere Navigation gebraucht werden, und zwar mit sehr niedriger Priorität, niedriger als Preload. Wegen der Cache-Partitionierung moderner Browser nützt Prefetch bei Cross-Origin-Ressourcen wenig. MDN verweist für Dokumente auf die Speculation Rules API.

## Beispiel

```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="/naechste-seite/">
```

Die Pfade und Domains im Beispiel sind Platzhalter.

## Häufige Fehler

- Preload ohne `crossorigin` bei Schriften, sodass die Datei zweimal geladen wird.
- Zu viele Preloads. Laut web.dev bekommt am Ende keine Ressource Vorrang, wenn alles priorisiert wird.
- Fehlendes oder falsches `as`.
- Preconnect für Same-Origin-Anfragen.

## Häufige Fragen

**Was ist der Unterschied zwischen Preload und Prefetch?** Preload betrifft die aktuelle Seite, Prefetch die nächste Navigation.

**Zählt der Preload aus der W3C-Spezifikation noch?** Das Dokument von 2022 ist als Discontinued Draft markiert. Die Beschreibung steht im HTML Living Standard.

## Verwandte Begriffe

- [Largest Contentful Paint (LCP)](https://seo-geo-glossary.com/de/glossar/largest-contentful-paint/index.md)
- [Render-blocking Ressourcen](https://seo-geo-glossary.com/de/glossar/render-blocking-ressourcen/index.md)
- [Web Fonts (font-display)](https://seo-geo-glossary.com/de/glossar/web-fonts/index.md)
- [Critical CSS](https://seo-geo-glossary.com/de/glossar/critical-css/index.md)
- [HTTP Link Header](https://seo-geo-glossary.com/de/glossar/http-link-header/index.md)
- [HTTP-Header](https://seo-geo-glossary.com/de/glossar/http-header/index.md)

## Quellen

- [rel=preload – MDN Web Docs](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Attributes/rel/preload)
- [rel=preconnect – MDN Web Docs](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Attributes/rel/preconnect)
- [rel=prefetch – MDN Web Docs](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Attributes/rel/prefetch)
- [Preload critical assets – web.dev](https://web.dev/articles/preload-critical-assets)
- [Preload (Discontinued Draft, 31.3.2022) – W3C](https://www.w3.org/TR/2022/DISC-preload-20220331/)

---

Stand: 7. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/preload-preconnect-prefetch/