Resource Hints
Was sind Resource Hints?
Resource Hints sind HTML-Anweisungen, mit denen eine Website dem Browser frühzeitig benötigte Verbindungen oder Dateien ankündigt. Angaben wie preconnect, dns-prefetch, preload und prefetch können Wartezeiten verkürzen, kritische Ressourcen priorisieren und dadurch den PageSpeed sowie einzelne Core Web Vitals verbessern.
Wie Resource Hints funktionieren
Resource Hints, auf Deutsch Ressourcenhinweise, geben dem Browser zusätzliche Informationen über voraussichtlich benötigte Dateien und externe Server. Der Browser kann dadurch bestimmte Arbeitsschritte beginnen, bevor er die betreffende Ressource im regulären HTML-Ablauf entdeckt. Resource Hints werden meist als <link>-Element im <head> einer Seite eingebunden.
Beim Laden einer externen Datei fallen mehrere Schritte an. Der Browser muss unter anderem den Domainnamen auflösen, eine Netzwerkverbindung herstellen, gegebenenfalls eine TLS-Verbindung für HTTPS aufbauen und die Datei übertragen. Resource Hints setzen an unterschiedlichen Stellen dieser Kette an. Der Browser entscheidet jedoch selbst, ob und wann er einen Hinweis verarbeitet.
Welche Resource Hints gibt es?
Die verschiedenen Resource Hints unterscheiden sich durch Zeitpunkt, Priorität und Zweck. Ein falsch gewählter Typ kann Bandbreite belegen, ohne die Darstellung der aktuellen Seite zu beschleunigen. Die folgende Tabelle zeigt die gebräuchlichen Varianten.
| Resource Hint | Aufgabe | Typischer Einsatz |
|---|---|---|
dns-prefetch | Löst den Domainnamen eines externen Hosts frühzeitig in eine IP-Adresse auf. | Externe Domains, deren Ressourcen möglicherweise benötigt werden. |
preconnect | Startet neben der DNS-Auflösung auch den Aufbau der TCP-Verbindung und bei HTTPS den TLS-Handshake. | Externe Hosts, die für die aktuelle Seite mit hoher Wahrscheinlichkeit gebraucht werden. |
preload | Lädt eine konkret benannte Ressource für die aktuelle Seite mit erhöhter Priorität. | Schriftarten, Hero-Bilder, kritische CSS-Dateien oder andere spät entdeckte Ressourcen. |
prefetch | Lädt eine Ressource mit niedriger Priorität für einen wahrscheinlichen späteren Seitenaufruf. | Dateien einer erwarteten Folgeseite oder eines nächsten Navigationsschritts. |
modulepreload | Lädt JavaScript-Module frühzeitig und bereitet sie für die Ausführung vor. | Webanwendungen, die JavaScript über ES-Module einbinden. |
<link rel='preconnect' href='https://cdn.example.com' crossorigin>. Für eine Schriftdatei eignet sich beispielsweise <link rel='preload' href='/fonts/shop.woff2' as='font' type='font/woff2' crossorigin>. Das Attribut as teilt dem Browser mit, welche Art von Ressource geladen wird. Resource Hints für besseren PageSpeed
Resource Hints verbessern den PageSpeed nur dann, wenn sie einen konkreten Engpass im Ladeablauf verkürzen. Ein Preload für das größte sichtbare Bild kann beispielsweise den Largest Contentful Paint, kurz LCP, verbessern, wenn der Browser das Bild sonst erst spät über CSS oder JavaScript entdecken würde. Als guter LCP gilt ein Wert von höchstens 2,5 Sekunden beim 75. Perzentil der Seitenaufrufe.
Ein Resource Hint verändert nicht automatisch den gesamten PageSpeed-Score. Der Score hängt zusätzlich von Faktoren wie Server-Antwortzeit, Bildgröße, JavaScript-Ausführung, Render-Blocking und Layout-Stabilität ab. Eine Website mit großen Bildern oder umfangreichem JavaScript bleibt daher langsam, wenn lediglich mehrere Preload-Tags ergänzt werden. Prüfe zuerst die Ladekette und priorisiere anschließend genau die Ressource, die den sichtbaren Aufbau verzögert.
Preconnect eignet sich besonders für externe Domains, von denen früh benötigte Inhalte stammen. Dazu zählen beispielsweise ein CDN, ein Schriftarten-Server oder ein für den Seitenaufbau erforderlicher API-Endpunkt. Jede zusätzliche Verbindung beansprucht jedoch Rechenleistung und Netzwerkressourcen. Beschränke Preconnect deshalb auf wenige Hosts, die bei fast jedem Aufruf der betreffenden Seite tatsächlich kontaktiert werden.
Preload und Prefetch unterscheiden
Der Unterschied zwischen preload und prefetch liegt im Nutzungsmoment. Preload ist für eine Ressource der aktuellen Seite vorgesehen und signalisiert eine hohe Dringlichkeit. Prefetch bereitet dagegen einen wahrscheinlichen späteren Aufruf vor und erhält üblicherweise eine niedrigere Priorität. Eine Datei, die für den ersten sichtbaren Seitenbereich gebraucht wird, gehört deshalb nicht in einen Prefetch-Hinweis.
Preload führt außerdem keine Datei aus und bindet kein Stylesheet ein. Der Hinweis sorgt zunächst nur für den frühen Download. Ein vorgeladenes Stylesheet muss weiterhin regulär über rel='stylesheet' verwendet werden, und ein vorgeladenes Skript benötigt weiterhin die passende Script-Einbindung. Fehlt die anschließende Nutzung, wurde Bandbreite verbraucht, ohne den Seitenaufbau zu unterstützen.
Resource Hints richtig einbauen
Die Auswahl sollte aus einer Messung des tatsächlichen Ladeablaufs entstehen. Besonders interessant sind Ressourcen, die für den sichtbaren Seitenbereich benötigt, aber erst spät gefunden werden. Typische Kandidaten sind ein LCP-Bild, eine selbst gehostete Schriftart oder eine kritische Datei, die über weitere Stylesheets oder Skripte referenziert wird.
Bei responsiven Bildern muss der Preload zur tatsächlich ausgelieferten Bildvariante passen. Dafür können die Attribute imagesrcset und imagesizes eingesetzt werden. Ein pauschaler Preload der größten Bilddatei führt auf Smartphones möglicherweise zu einer unnötig hohen Datenübertragung.
Resource Hints messen und prüfen
Messbar ist die Wirkung von Resource Hints durch einen Vergleich vor und nach der Änderung. Prüfe dabei dieselbe URL, denselben Gerätetyp und möglichst ähnliche Netzwerkbedingungen. Vergleiche insbesondere den Startzeitpunkt der optimierten Ressource, den LCP, die gesamte Ladezeit und die Zahl unnötig vorgeladener Dateien. Einzelne Labortests schwanken, weshalb mehrere Messungen belastbarer sind als ein einzelner PageSpeed-Lauf.
Für einen ersten Überblick kannst du den kostenlosen Ladezeiten-Check nutzen. Ergänzend helfen der Netzwerk-Tab des Browsers und ein Wasserfalldiagramm dabei, DNS-Auflösung, Verbindungsaufbau und Download jeder Datei getrennt zu untersuchen. Weitere technische Zusammenhänge erklärt der Beitrag zu den wichtigsten Maßnahmen der technischen SEO.
Prüfe den PageSpeed deiner Seite direkt:
Relevanz für SEO, SEA und GEO
Für SEO beeinflussen Resource Hints vor allem die technische Nutzererfahrung. Schnell verfügbare Hauptinhalte können den LCP verbessern, während unnötige Priorisierungen die Ladezeit erhöhen können. Resource Hints sind damit kein eigenständiger Rankinghebel, sondern eine mögliche Maßnahme innerhalb der PageSpeed-Optimierung und der laufenden technischen SEO-Kontrolle.
Für SEA können Resource Hints den Aufbau von Landingpages beschleunigen. Das ist besonders relevant, wenn Anzeigenbesucher über mobile Verbindungen auf bildstarke Produktseiten gelangen. Die technische Qualität der Zielseite sollte deshalb gemeinsam mit Kampagnendaten geprüft werden. Der Beitrag zu Technik-Checks für Google Ads zeigt, welche weiteren Faktoren bei bezahlten Zielseiten zu kontrollieren sind.
Für GEO, also Generative Engine Optimization, verbessern Resource Hints nicht direkt die Wahrscheinlichkeit einer Nennung in ChatGPT, Perplexity, Gemini oder Grok. Eine schnelle und technisch stabile Seite erleichtert jedoch Nutzern und Crawlern den Zugriff auf zitierfähige Inhalte. Resource Hints unterstützen damit die technische Grundlage, ersetzen aber weder verständliche Antworten noch klare Seitenstrukturen und vertrauenswürdige Inhalte.
Häufige Fragen zu Resource Hints
Wo werden Resource Hints eingebaut?
Resource Hints stehen üblicherweise als Link-Elemente im Head-Bereich des HTML-Dokuments. Dort kann der Browser die Hinweise früh lesen, bevor er den restlichen Seiteninhalt vollständig verarbeitet hat.
Verbessert Preload immer den PageSpeed?
Nein, Preload hilft nur bei einer tatsächlich benötigten und sonst spät entdeckten Ressource. Ein unnötiger Preload kann Bandbreite belegen und den Download anderer Dateien verzögern.
Was ist besser, Preconnect oder DNS-Prefetch?
Preconnect erledigt neben der DNS-Auflösung auch weitere Schritte des Verbindungsaufbaus und eignet sich für sehr wahrscheinlich benötigte Hosts. DNS-Prefetch benötigt weniger Ressourcen und passt zu externen Domains, deren Nutzung weniger sicher ist.
Wie viele Preconnect-Hinweise sollte eine Seite verwenden?
Eine allgemeingültige Höchstzahl gibt es nicht. Verwende Preconnect gezielt für wenige externe Hosts, die früh im Ladeablauf benötigt werden, und kontrolliere die Wirkung im Netzwerk-Tab des Browsers.
Kann ein Browser Resource Hints ignorieren?
Ja, Resource Hints sind Hinweise und keine verbindlichen Befehle. Der Browser berücksichtigt unter anderem verfügbare Bandbreite, Geräteleistung, Cache-Status und eigene Priorisierungsregeln.
Welche Dateien sollte man mit Preload laden?
Geeignet sind kritische Dateien der aktuellen Seite, die der Browser sonst spät entdeckt. Häufige Kandidaten sind das LCP-Bild, selbst gehostete Schriftarten und einzelne für den sichtbaren Bereich erforderliche CSS- oder JavaScript-Dateien.
Wenn du Resource Hints und weitere PageSpeed-Maßnahmen für deine Website fachlich einordnen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.
Sie haben noch Fragen?
