Resource Prefetch: Definition, Hints, Performance Best Practices

Was ist Resource-Prefetching?

Resource-Prefetching ist ein Set von Browser-Hints, die dem Browser sagen, Resources früher zu fetchen (oder pre-resolven) als er normal würde, um subsequent Loads schneller zu machen. Der Browser entscheidet weiterhin Priority und Timing.

Die vier Haupt-Hints: preload, preconnect, dns-prefetch, prefetch.

Die vier Resource-Hint-Typen

preload: Critical-Path-Resources

<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

preconnect: Connections aufwärmen

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">

dns-prefetch: leichtere Alternative

<link rel="dns-prefetch" href="https://analytics.example.com">

prefetch: über nächste Page spekulieren

<link rel="prefetch" href="/products">
<link rel="modulepreload" href="/checkout.js">

fetchpriority

<img src="hero.webp" fetchpriority="high">
<img src="footer.webp" fetchpriority="low" loading="lazy">

Praktische Patterns

LCP-Image-Preload

<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">

Critical-Font

<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>

API-Call

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

Modern: Speculation-Rules-API

<script type="speculationrules">
{
  "prerender": [{ "urls": ["/products"] }]
}
</script>

Resource-Hint Best Practices

• Nur Critical-Path preloaden.
• Top 3-4 Third-Party-Origins preconnecten.
• dns-prefetch kann liberal sein.
• Likely next Pages prefetchen.
• crossorigin auf Font/Fetch-Preloads.
• Mit WebPageTest testen.
• Nicht alles preloaden.
• Below-the-Fold lazy-loaden.

Häufige Fallstricke

• Über-Preloading.
• Missing crossorigin.
• Wrong as-Value.
• Non-critical preloaden.
• Zu viele preconnect-Origins.
• Prefetch mit Bandwidth-light Usern.
• Stale Prefetch.

FAQ: Resource-Prefetching

preload vs prefetch: was ist der Unterschied?

preload = aktuelle Page. prefetch = nächste Navigation.

Sollte ich mein Hero-Image preloaden?

Ja, mit fetchpriority="high".

Wie viele preconnect-Hints sind zu viele?

3-4 ist Sweet-Spot.

Funktioniert prefetch auf Mobile?

Ja, aber konsumiert User-Data.

Was ist modulepreload?

Wie preload, aber für ES-Modules.

Kann ich ganze Pages prefetchen?

Ja via prefetch oder Speculation-Rules-API.

Wie messe ich Preload-Impact?

WebPageTest-Waterfall.

Prefetch-Performance-Impact mit LoadFocus testen

LoadFocus läuft Lighthouse-Audits aus 25+ Regionen. Registrieren bei loadfocus.com/signup.