Preload, Preconnect und Prefetch: Resource Hints erklärt

26.7.2026

Standardmäßig entdeckt ein Browser Ressourcen erst, während er das HTML Zeile für Zeile liest. Eine Schrift bemerkt er beim CSS, das sie aufruft, ein Bild beim <img>-Tag. Diese späte Entdeckung kostet Zeit. Resource Hints — preload, preconnect, dns-prefetch und prefetch — sind Ihre Möglichkeit, dem Browser zu sagen: Bereite das vor, ich werde es brauchen. Richtig eingesetzt, verkürzen sie den kritischen Ladepfad um 100–400 ms.

preconnect: die Verbindung früh aufwärmen

Jede Verbindung zu einer Domain (Google Fonts, ein CDN, Analytics) braucht drei Schritte: DNS-Abfrage, TCP-Handshake und TLS-Aushandlung. Das dauert leicht 100–300 ms, bevor ein einziges Byte geladen ist. Mit <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> erledigt der Browser diese Schritte sofort, noch während er das HTML parst, sodass die Verbindung schon warm ist, wenn die Ressource gebraucht wird. Nutzen Sie es für Ihre 2–4 wichtigsten Fremd-Domains — mehr verschwendet Ressourcen ohne Nutzen.

dns-prefetch: die günstigere, schwächere Variante

<link rel="dns-prefetch"> erledigt nur den DNS-Teil, nicht TCP/TLS. Es hilft weniger als preconnect, ist aber günstig und in älteren Browsern breiter unterstützt. Ein gängiges Muster: für Schlüssel-Domains beides angeben — zuerst preconnect, dann dns-prefetch als Fallback.

preload: eine kritische Ressource früher laden

<link rel="preload"> weist den Browser an, eine bestimmte Datei mit hoher Priorität sofort zu laden, obwohl er sie im HTML noch nicht „gesehen" hat. Die häufigsten Anwendungen sind:

Die Schrift der Hauptüberschrift — as="font" mit crossorigin, um FOIT (unsichtbaren Text während des Ladens) zu vermeiden.
Das LCP-Bild (Hero-Banner) — as="image", oft mit imagesrcset für responsive Varianten.
Eine kritische CSS- oder JS-Datei, ohne die die Seite nicht korrekt rendert.

Vorsicht: preload ist ein Befehl, keine Empfehlung. Laden Sie etwas vor, das in den ersten Sekunden nicht genutzt wird, nehmen Sie den wirklich kritischen Ressourcen Bandbreite weg. Die Konsole warnt mit „was preloaded but not used".

prefetch: die nächste Seite vorbereiten

<link rel="prefetch"> betrifft die Zukunft, nicht die aktuelle Seite. Es weist den Browser an, im Hintergrund bei freiem Netz eine Ressource zu laden, die wahrscheinlich auf der nächsten Seite gebraucht wird — etwa das JS-Bundle der Produktseite, während der Nutzer auf einer Kategorieseite ist. Klickt der Nutzer, ist die Seite fast sofort da. Die Priorität ist niedrig, sie stört das aktuelle Laden also nicht.

Die richtige Reihenfolge

Eine praktische Reihenfolge im <head>: zuerst preconnect zu Font- und CDN-Domains, dann preload für Schrift und LCP-Bild, danach der Rest. Bei WordPress übernehmen das meist Performance-Plugins (WP Rocket, Perfmatters) oder das Theme, doch es lohnt sich, in DevTools → Netzwerk unter „Priority" zu prüfen, was wirklich passiert.

Häufige Fehler

Erstens: zu viel preloaden — dann ist nichts mehr Priorität. Zweitens: fehlendes crossorigin bei Schriften, wodurch die Ressource zweimal geladen wird. Drittens: preconnect zu einer Domain, von der nichts geladen wird. Viertens: prefetch für Ressourcen der aktuellen Seite, wo es nicht hilft. Messen Sie immer vorher und nachher — Hints helfen nur, wenn sie die richtigen, langsamen Ressourcen treffen.

Häufige Fragen

Ersetzen Resource Hints schnelles Hosting? Nein. Sie planen intelligenter, was ohnehin geladen werden muss, aber wenn der Server das HTML langsam ausliefert (hoher TTFB), liegt das Problem tiefer. Das beste Ergebnis: schneller Server plus gut gesetzte Hints.

Wie viele Preconnects sind zu viele? Ab 4–6 wird es schädlich, weil jede warme Verbindung Speicher und Akku auf Mobilgeräten kostet. Beschränken Sie sich auf die wichtigsten Domains.

Unsere Pakete bringen ein kostenloses globales CDN und NVMe-Laufwerke mit, sodass preconnect und preload aus einer schnellen Quelle laden. Sehen Sie sich unsere Pakete und Preise oder die Details zum SEO-Hosting an.