Prefetch ist ein Browser-Mechanismus (Resource Hint), der Ressourcen fuer wahrscheinliche zukuenftige Navigationen im Hintergrund vorablaedt. Der Browser nutzt Leerlaufzeiten, um Seiten, Scripts oder andere Ressourcen herunterzuladen, bevor der Nutzer sie anfordert — so dass die naechste Seite quasi sofort verfuegbar ist.
Prefetch ist Teil der Resource-Hints-Familie und arbeitet zusammen mit Preload, Preconnect und DNS-Prefetch. Diese Techniken sind zentrale Werkzeuge der Page-Speed-Optimierung und verbessern die wahrgenommene Geschwindigkeit beim Navigieren zwischen Seiten.
Arten von Prefetch
Link Prefetch
Laedt eine HTML-Seite oder Ressource fuer eine zukuenftige Navigation vor:
<link rel="prefetch" href="/leistungen/webdesign">
DNS Prefetch
Loest die DNS-Abfrage fuer eine externe Domain vorab auf — ohne die eigentliche Ressource zu laden:
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
Preconnect
Geht einen Schritt weiter als DNS Prefetch und stellt die vollstaendige Verbindung her (DNS + TCP + TLS):
<link rel="preconnect" href="https://fonts.googleapis.com">
| Resource Hint | DNS | TCP | TLS | Download | Prioritaet |
|---|---|---|---|---|---|
| DNS Prefetch | Ja | Nein | Nein | Nein | Sehr niedrig |
| Preconnect | Ja | Ja | Ja | Nein | Niedrig |
| Prefetch | Ja | Ja | Ja | Ja | Niedrig |
| Preload | Ja | Ja | Ja | Ja | Hoch |
Prefetch in der Praxis
Wann Prefetch sinnvoll ist
- Wahrscheinliche naechste Seite: Wenn Nutzer haeufig von Seite A zu Seite B navigieren
- Hover-basiertes Prefetch: Seite vorladen, wenn der Nutzer ueber einen Link hovert
- Paginated Content: Naechste Seite einer Auflistung vorladen
- Multi-Step-Formulare: Naechsten Schritt vorladen
- Code Splitting: Chunks fuer wahrscheinliche Routen vorladen
Wann Prefetch vermieden werden sollten
- Auf Seiten mit sehr vielen Links (zu viele Prefetches konkurrieren)
- Fuer grosse Ressourcen auf mobilen Geraeten
- Wenn die Wahrscheinlichkeit der Navigation gering ist
- Fuer authentifizierungspflichtige Seiten (Prefetch ignoriert oft Auth-Status)
Prefetch in Next.js
Next.js implementiert Prefetching automatisch fuer alle <Link>-Komponenten, die im Viewport sichtbar sind. Das Verhalten:
- Links im Viewport werden automatisch prefetched (Production-Build)
- Prefetching startet, sobald der Link sichtbar wird (Intersection Observer)
- Nur der JavaScript-Chunk der Zielseite wird vorab geladen
- Bei statischen Seiten werden auch die Daten prefetched
Steuerung in Next.js
| Prop | Verhalten |
|---|---|
prefetch={true} (Standard) | Vorladen wenn sichtbar |
prefetch={false} | Kein automatisches Prefetch |
| Hover | Prefetch bei Hover (immer aktiv) |
Prefetch und Performance-Metriken
Prefetch beeinflusst die Performance-Metriken der Zielseite positiv:
- TTFB: Kann nahe null sein, wenn die Seite bereits im Cache liegt
- FCP: Schnellerer erster Paint durch gecachte Ressourcen
- LCP: Verbesserung wenn LCP-Ressource ebenfalls prefetched wird
Kein Einfluss auf die aktuelle Seite
Prefetch verwendet nur Leerlaufbandbreite und hat niedrigste Netzwerkprioritaet. Es sollte die Performance der aktuellen Seite nicht beeintraechtigen. Bei knapper Bandbreite ignoriert der Browser Prefetch-Anfragen.
Intelligentes Prefetching
Hover-basiert
Eine effiziente Strategie: Prefetch erst ausloesen, wenn der Nutzer mit der Maus ueber einen Link faehrt. Die typische Hover-to-Click-Zeit (200-300ms) reicht oft aus, um kleine Ressourcen vorab zu laden.
Vorhersagebasiert
Fortgeschrittene Implementierungen analysieren das Navigationsverhalten und prefetchen die wahrscheinlichsten naechsten Seiten. Libraries wie quicklink oder Guess.js implementieren solche Strategien.
Netzwerkabhaengig
Die Network Information API (navigator.connection) erlaubt es, Prefetching an die Netzwerkqualitaet anzupassen:
- Schnelles WLAN: Aggressives Prefetching
- Mobiles Netz (3G): Nur kritische Ressourcen
- Datensparmodus: Kein Prefetching
Best Practices
- Prefetch fuer die 2-3 wahrscheinlichsten naechsten Navigationen nutzen
- Nicht mehr als 5-10 Prefetches pro Seite setzen
- Grosse Ressourcen (Bilder, Videos) nicht prefetchen — nur HTML und JS-Chunks
- Auf mobilen Geraeten konservativ prefetchen
- Prefetch und Preload nicht verwechseln — falsche Priorisierung schadet der Performance
- Browser-Caching aktivieren, damit prefetchte Ressourcen im CDN-Cache bleiben