Der Browser lädt Ressourcen in der Reihenfolge wie er sie im HTML-Code entdeckt. Mit Resource Hints (Preload, Prefetch, Preconnect, DNS-Prefetch) können Sie diese Reihenfolge steuern und kritische Ressourcen vorladen lassen. Das verbessert Speed und Core Web Vitals messbar.
Resource Hints im Überblick
<head>
<!-- Preload: Diese Ressource wird für die aktuelle Seite benötigt -->
<link rel="preload" href="/fonts/heading.woff2" as="font" crossorigin>
<!-- Prefetch: Diese Ressource wird wahrscheinlich bald benötigt -->
<link rel="prefetch" href="/bilder/produkt-detail.webp" as="image">
<!-- Preconnect: Verbindung zum Server herstellen -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- DNS-Prefetch: DNS-Auflösung vorab starten -->
<link rel="dns-prefetch" href="//analytics.domain.de">
</head>Jedes Hint-Typ hat eine andere Priorität und einen anderen Anwendungsfall.
rel=“preload”: Kritische Ressourcen priorisieren
preload ist der stärkste Hint. Er sagt dem Browser: Diese Ressource wird für die aktuelle Seite benötigt – lade sie so früh wie möglich.
Typische Preload-Kandidaten:
Web Fonts:
<link rel="preload" href="/fonts/archivo.woff2" as="font"
type="font/woff2" crossorigin>Ohne Preload: Browser entdeckt die Font erst wenn er das CSS verarbeitet hat. Mit Preload: Font-Download startet sofort beim Parsen des <head>.
LCP-Bild (Hero-Bild):
<link rel="preload" href="/images/hero.webp" as="image"
fetchpriority="high">Das fetchpriority="high" Attribut signalisiert zusätzlich höchste Priorität.
Kritisches JavaScript:
<link rel="preload" href="/js/kritisch.js" as="script">Korrektes Preloading des LCP-Elements (meist Hero-Bild oder Hauptschrift) verbessert den LCP-Wert in 85 % der getesteten Websites um 200–800ms – oft der Unterschied zwischen „Gut” und „Verbesserungsbedarf”.
rel=“prefetch”: Ressourcen für die nächste Seite
prefetch hat niedrige Priorität – es sagt dem Browser: Diese Ressource werde ich wahrscheinlich bald brauchen, aber nicht sofort.
Anwendungsfall: Navigation vorvorbereiten. Wenn ein Nutzer auf der Startseite ist und wahrscheinlich zur Produktseite navigiert:
<!-- Auf der Startseite: -->
<link rel="prefetch" href="/produkte/bestseller-image.webp" as="image">Bei Navigation zur Produktseite ist das Bild bereits im Browser-Cache – sofortige Anzeige.
Wichtig: Prefetch nur für Ressourcen nutzen die tatsächlich wahrscheinlich besucht werden. Blindes Prefetching erhöht Bandbreitenverbrauch ohne Nutzen.
Prefetch ist besonders wertvoll für E-Commerce-Websites: Wenn Analytics zeigt, dass 60 % der Besucher von Seite A zu Seite B navigieren, kann die kritische Ressource von Seite B auf Seite A prefetched werden – das macht die nächste Seite gefühlt sofort verfügbar.
rel=“preconnect”: Verbindungsaufbau beschleunigen
Jede Verbindung zu einem externen Server erfordert: DNS-Auflösung + TCP-Verbindung + TLS-Handshake. Das kostet 200–500ms.
preconnect startet diesen Prozess früh – bevor die erste Ressource von diesem Server angefordert wird.
Typische Kandidaten:
<!-- Google Fonts API -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- CDN -->
<link rel="preconnect" href="https://cdn.ihredomain.de">
<!-- Analytics -->
<link rel="preconnect" href="https://www.google-analytics.com">Beschränkung: Preconnect für maximal 3–5 Domains nutzen. Jede offene TCP-Verbindung kostet Browser-Ressourcen.
rel=“dns-prefetch”: Leichtere Alternative
Wenn preconnect zu teuer ist (viele externe Domains), ist dns-prefetch die leichtere Alternative – es führt nur die DNS-Auflösung durch, nicht den vollständigen Verbindungsaufbau.
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//analytics.google.com">Priorität und fetchpriority
Das neue fetchpriority-Attribut (verfügbar auf <img>, <script> und <link rel="preload">) gibt dem Browser einen expliziten Hinweis zur Ladepriorität:
<!-- Hero-Bild: höchste Priorität -->
<img src="hero.webp" alt="Hero" fetchpriority="high">
<!-- Banner unter dem Fold: niedrige Priorität -->
<img src="banner.webp" alt="Banner" fetchpriority="low" loading="lazy">Kombination aus fetchpriority="high" auf dem LCP-Element und loading="lazy" auf Bildern unter dem Fold verbessert den LCP in Benchmarks um durchschnittlich 30 % ohne andere Performance-Aspekte zu verschlechtern.
Mehr zu Lazy Loading finden Sie in unserem Artikel über Lazy Loading und SEO.