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
| Hint | Was es macht | Wann nutzen |
|---|---|---|
preload | Resource für aktuelle Page fetchen, hohe Priority | Critical Fonts, Hero-Images |
preconnect | TCP + TLS-Connection zu Domain öffnen | Domains, von denen Sie bald fetchen |
dns-prefetch | DNS für Domain resolven | Viele Third-Party-Domains |
prefetch | Resource für likely next Navigation fetchen | Vorhergesagte Next-Page-Resources |
prerender | Komplette nächste Page im Background rendern | Highly likely Navigation |
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.
Verwandte LoadFocus-Tools
Setze dieses Konzept mit LoadFocus in die Praxis um — derselben Plattform, die alles antreibt, was du gerade gelesen hast.