Was sind Resource Hints?

Was sind Resource Hints?

Resource Hints sind kurze Anweisungen, geschrieben als <link rel="...">-Tags oder Link-Header, die dem Browser sagen, welche Origins oder Dateien er voraussichtlich braucht, damit er früh mit der Arbeit beginnen kann. Üblich sind dns-prefetch, preconnect, preload, prefetch und prerender; MDN nennt zusätzlich modulepreload für JavaScript-Module. Ein Hint ist eine Empfehlung, der Browser darf ihn ignorieren.

Welcher Hint beantwortet welche Frage

• Nutzt die Seite bald einen anderen Origin? preconnect erledigt DNS-Abfrage, TCP-Verbindung und TLS-Handshake im Voraus. Für den eigenen Origin bringt das nichts, und MDN rät, es nur für die wichtigsten Cross-Origin-Verbindungen einzusetzen. dns-prefetch erledigt nur den DNS-Schritt und passt zu weniger wichtigen Origins.
• Braucht die aktuelle Seite eine Datei, die der Browser spät findet? preload lädt sie früh mit hoher Priorität, zum Beispiel ein LCP-Bild aus dem CSS oder eine Webschrift. Es braucht einen as-Wert, bei Schriften zusätzlich crossorigin. modulepreload ist die Variante für JavaScript-Module. Details stehen unter Preloading von Assets.
• Braucht vielleicht eine spätere Seite eine Datei? prefetch lädt sie mit niedriger Priorität in den HTTP-Cache, für eine wahrscheinliche nächste Navigation. Cache-Control: no-store und no-cache blockieren es, und über Websites hinweg hilft es nicht. Siehe Ressourcen-Prefetching.
• Ist eine ganze Folgeseite sehr wahrscheinlich? prerender sollte sie vorab rendern, MDN nennt es aber inzwischen veraltet (deprecated) und nur in Chrome verfügbar: Es lädt nur das Dokument und die auffindbaren Ressourcen in den HTTP-Cache. Für echtes Prerendering nutzen Sie die Speculation Rules API, siehe Prerendering.

Verwandt, aber etwas anderes: Das Attribut fetchpriority hebt oder senkt die Priorität einer Anfrage. Der Browser findet die Datei dadurch nicht früher, deshalb wird es oft mit preload für ein Bild aus dem CSS kombiniert. Welche Verbindungskosten preconnect und dns-prefetch sparen, steht unter Netzwerkverbindungen und Seitengeschwindigkeit.

Beispiel

Eine Landingpage lädt Schriften und ein Skript von einem CDN, zeigt ein Hero-Bild aus dem CSS und verlinkt eine Preisseite, die die meisten Besucher als Nächstes öffnen. Vier Zeilen im Head decken das ab:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/pricing">

Die ersten drei helfen dieser Seite beim Laden. Die letzte wärmt mit niedriger Priorität den Cache für die nächste Seite vor.

Häufige Fehler

• Zu viele Hints. MDN warnt: Wer alles vorlädt, verliert den Nutzen, und Preconnect zu vielen Origins kann nach hinten losgehen.
• Etwas vorab anfordern, das die Seite nie nutzt. Ein Preload oder Prefetch für eine ungenutzte Datei verbraucht Bandbreite ohne Gegenwert.
• Falscher as-Wert oder fehlendes crossorigin. Der Browser kann den Hint dann nicht der echten Anfrage zuordnen und lädt die Datei womöglich doppelt.
• Sich auf prerender verlassen. Es ist veraltet und rendert die Seite nicht mehr; nutzen Sie Speculation Rules, wo unterstützt, und behandeln Sie sie als Zusatz.
• URLs mit Nebenwirkungen vorabrufen. Ein vorab abgerufener Logout- oder In-den-Warenkorb-Link erreicht trotzdem Ihren Server.
• Nie messen. Ein Hint verändert das Verhalten des Browsers. Vergleichen Sie Wasserfall und Largest Contentful Paint mit und ohne Hint.

Bezug zu Tests und Monitoring

Prüfen Sie jeden Hint im Wasserfall: Die Datei sollte früher starten, und die gewünschte Kennzahl sollte sich bewegen. Testen Sie mit gedrosselter Verbindung und von mehreren Orten, denn ein Hint, der nahe am Server hilft, kann in der Ferne wenig bringen. LoadFocus Page Speed Monitoring führt Google-Lighthouse-Audits nach Zeitplan aus 25 Cloud-Regionen aus, mit Benachrichtigungen, wenn ein Wert abrutscht. Der kostenlose Core Web Vitals Checker zeigt LCP, INP und CLS echter Nutzer aus den CrUX-Daten von Google. Weitere Frontend-Maßnahmen stehen in der 10-Schritte-Anleitung für schnellere Websites, die genaue Syntax im MDN-Leitfaden zu Speculative Loading.

Häufige Fragen: Resource Hints

Welche Resource Hints gibt es?

dns-prefetch, preconnect, preload, prefetch und prerender, dazu modulepreload für JavaScript-Module. Prerender ist zugunsten der Speculation Rules veraltet.

Was ist der Unterschied zwischen preload und prefetch?

Preload lädt eine Datei, die die aktuelle Seite bald braucht, mit hoher Priorität. Prefetch lädt eine Datei, die eine spätere Seite brauchen könnte, mit niedriger Priorität.

Wann nehme ich preconnect statt dns-prefetch?

Preconnect für die wenigen Cross-Origin-Server, die Sie sofort sicher brauchen, denn es baut auch die Verbindung auf. dns-prefetch für weniger wichtige Origins, denn es löst nur den Hostnamen auf.

Ersetzt fetchpriority preload?

Nein. Fetchpriority verändert, wie dringend der Browser eine ihm schon bekannte Datei lädt. Preload sorgt dafür, dass er eine Datei früher entdeckt. Beide lassen sich kombinieren.

Können Resource Hints meine Website verlangsamen?

Ja. Zu viele Hints konkurrieren mit wichtigeren Dateien um Bandbreite und Verbindungen. Beschränken Sie sich auf die wenigen, die das erste Rendern bestimmen, und messen Sie das Ergebnis.