Resource Hints – Greenbydefault

TL;DR

Resource Hints sind Browser-Anweisungen (preload, prefetch, preconnect), die das Laden wichtiger Ressourcen priorisieren und beschleunigen.

Was sind Resource Hints?

Resource Hints geben dem Browser Hinweise, welche Ressourcen wichtig sind oder bald gebraucht werden. Der Browser kann so frühzeitig Verbindungen aufbauen oder Dateien laden.

Arten von Resource Hints

preload: "Lade das jetzt, ich brauche es sofort"
prefetch: "Lade das für später vor"
preconnect: "Baue Verbindung auf, Requests kommen"
dns-prefetch: "Löse DNS auf, spart Zeit"

Wann welcher Hint?

Preload: Hero-Bilder, kritische Fonts
Prefetch: Nächste Seite, wahrscheinliche Navigation
Preconnect: CDNs, Font-Provider, APIs

Syntax

Im <head>:

<link rel="preload" href="font.woff2" as="font">
<link rel="prefetch" href="next-page.html">
<link rel="preconnect" href="api.example.com">

Resource Hints und Nachhaltigkeit

Vorsicht: Nur wirklich nötige Ressourcen hinten:

Zu viele Hints verschwenden Bandbreite
Prefetch lädt auch bei Nicht-Navigation
Gezielt einsetzen = effizient

Fazit

Resource Hints sind mächtige Performance-Tools. Richtig eingesetzt können sie Ladezeiten spürbar verbessern – aber Übertreibung kostet Ressourcen.

Mehr aus dem Glossar

Geändert am:

15.12.2025

Preconnect

Baut DNS/TCP/TLS-Verbindung früh auf, bevor Ressourcen geladen werden. Spart oft hunderte Millisekunden bei externen Domains.

Preconnect

Geändert am:

15.12.2025

Prefetch

Lädt wahrscheinlich benötigte Ressourcen später im Hintergrund vor. Hilft Navigation, kann aber Bandbreite verschwenden, wenn falsch eingesetzt.

Prefetch

Geändert am:

15.12.2025

Preload

Priorisiert kritische Ressourcen sofort (Fonts, Hero-Bilder, CSS). Zu viel Preload kann andere Downloads verdrängen.

Preload