Ressourcen-Prefetching: Hints, Preload, Preconnect

Was ist Ressourcen-Prefetching?

Ressourcen-Prefetching ist eine Gruppe von Browser-Hinweisen (Hints), geschrieben als <link rel="...">-Tags oder Link-Header. Sie weisen den Browser an, eine Ressource zu laden oder eine Verbindung aufzubauen, bevor er es von selbst täte. So lädt die aktuelle Seite schneller oder die nächste Navigation wirkt sofort. Ein Hint ist ein Vorschlag: Der Browser darf ihn ignorieren.

Die Hints im Überblick

So funktionieren die Hints

preload lässt den Browser eine Ressource früh entdecken, laden und für die Wiederverwendung vorhalten. Das Attribut as (image, font, script, style, fetch, track) sagt ihm, worum es sich handelt, damit er Priorität und Header richtig setzt. Preloads für Schriften und fetch brauchen crossorigin, auch bei Dateien vom gleichen Origin, sonst lädt der Browser die Datei doppelt.

preconnect zahlt die Verbindungskosten vor der ersten Anfrage. Für den eigenen Origin bringt es nichts, er ist schon verbunden. Browser schließen ungenutzte vorverbundene Verbindungen nach etwa 10 Sekunden, also nur Origins vorverbinden, die gleich gebraucht werden. Für Schriften und andere CORS-Anfragen braucht es crossorigin, sonst erledigt der Browser nur die DNS-Auflösung.

dns-prefetch ist die günstige Variante: Es löst den Hostnamen auf und hört dort auf. Eine DNS-Auflösung dauert typischerweise einige Dutzend Millisekunden und summiert sich nur, wenn die Seite viele Origins anspricht.

prefetch lädt eine Ressource mit niedriger Priorität in den HTTP-Cache, für eine Navigation, die noch nicht stattgefunden hat. Cache-Control: no-store und no-cache verhindern es, und die Anfrage trägt den Header Sec-Purpose: prefetch, den Ihr Server sehen kann. Für ganze Dokumente empfiehlt MDN die Speculation Rules API, wo sie unterstützt wird; siehe spekulatives Laden und Prerendering.

fetchpriority ist ein eigenes Attribut (high, low, auto) für img, script und link. Es erhöht oder senkt die Priorität, hilft dem Browser aber nicht, die Ressource früher zu finden. Deshalb wird es bei per CSS eingebundenen Bildern mit preload kombiniert.

Beispiel: Hero-Bild und Schrift

Eine Landingpage hat ein Hero-Bild als CSS-Hintergrund und eine Webfont. Der Browser entdeckt beides erst nach dem Parsen des CSS, was den Largest Contentful Paint verzögert. Zwei Hints im Head beheben die späte Entdeckung:

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

Schriften und andere Dateien von einem CDN profitieren von einer frühen Verbindung:

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

Für eine wahrscheinliche Folgeseite wärmt ein Prefetch mit niedriger Priorität oder eine Speculation Rule den Cache auf:

<link rel="prefetch" href="/pricing">

<script type="speculationrules">
{
  "prefetch": [{ "urls": ["/pricing", "/signup"] }]
}
</script>

Speculation Rules ist noch experimentell und nicht in jedem Browser verfügbar. Betrachten Sie es als Zusatz und prüfen Sie die Unterstützung, bevor Sie sich darauf verlassen.

Häufige Fehler

• Zu viel vorladen. Preloads konkurrieren miteinander und mit dem, was der Browser ohnehin geladen hätte. Beschränken Sie sich auf ein bis zwei Ressourcen, die den LCP bestimmen.
• crossorigin vergessen. Ohne das Attribut wird ein Schrift-Preload nicht wiederverwendet und die Datei doppelt geladen.
• Falscher as-Wert. Der Preload wird dann der späteren Anfrage nicht zugeordnet.
• Alle Drittanbieter vorverbinden. Jede Verbindung kostet Bandbreite und CPU für TLS, und ungenutzte werden nach etwa 10 Sekunden geschlossen. Für den Rest eignet sich dns-prefetch.
• Seiten prefetchen, die niemand besucht. Das verbraucht Datenvolumen ohne Nutzen, besonders mobil. Stützen Sie die Liste auf echte Navigationspfade.
• URLs mit Nebenwirkungen prefetchen. Eine vorab geladene Logout- oder In-den-Warenkorb-URL erreicht trotzdem Ihren Server.

Bezug zu Performance-Tests und Monitoring

Hints verändern, was der Browser tut. Messen Sie deshalb vorher und nachher, statt der Theorie zu vertrauen. Vergleichen Sie Wasserfalldiagramm und LCP mit und ohne jeden Hint. Der kostenlose Core-Web-Vitals-Checker zeigt, ob echte Nutzer LCP, INP und CLS schon bestehen, und das Page-Speed-Monitoring von LoadFocus führt geplante Lighthouse-Audits aus 25 Cloud-Regionen aus, damit Sie sehen, ob eine Änderung überall oder nur nahe Ihrem Server geholfen hat. Weitere Frontend-Maßnahmen finden Sie in der 10-Schritte-Anleitung für schnellere Websites. Verwandt: Netzwerkverbindungen und Seitengeschwindigkeit und Preloading von Assets.

Häufige Fragen: Ressourcen-Prefetching

Was ist der Unterschied zwischen preload und prefetch?

Preload ist für etwas, das die aktuelle Seite bald braucht, und wird mit hoher Priorität geladen. Prefetch ist für etwas, das eine spätere Navigation brauchen könnte, und wird mit niedriger Priorität geladen.

Sollte ich mein Hero-Bild vorladen?

Wenn es das LCP-Element ist und der Browser es sonst spät fände, zum Beispiel als CSS-Hintergrund, ja. Kombinieren Sie es mit fetchpriority="high" und prüfen Sie im Wasserfall, ob sich der LCP verbessert.

Wie viele preconnect-Hints sind zu viele?

Eine feste Zahl gibt es nicht. MDN und web.dev raten, nur die kritischsten Origins vorzuverbinden, weil jede Verbindung Kosten verursacht und ungenutzte nach etwa 10 Sekunden geschlossen werden. Nutzen Sie dns-prefetch für den Rest.

Was ist der Unterschied zwischen preconnect und dns-prefetch?

dns-prefetch löst nur den Hostnamen auf. Preconnect öffnet zusätzlich die TCP-Verbindung und schließt bei HTTPS den TLS-Handshake ab.

Ist prefetch dasselbe wie prerender?

Nein. Prefetch lädt eine Ressource, ohne sie auszuführen. Prerender lädt und rendert eine ganze Seite verborgen, was deutlich mehr kostet. Setzen Sie es nur für sehr wahrscheinliche Navigationen ein.

Verbraucht Prefetching mobiles Datenvolumen?

Es kann, wenn der Nutzer die vorgeladene Seite nie besucht. Laden Sie nur sehr wahrscheinliche nächste Schritte vorab und verzichten Sie auf spekulatives Laden bei Nutzern, die Datensparen aktiviert haben.