Was sind Resource Hints wie preload, prefetch und preconnect?

Question

Accepted Answer

**Resource Hints** sind ``-Tags, die dem Browser mitteilen, Ressourcen frühzeitig abzurufen oder Verbindungen aufzubauen, um die Ladeperformance zu optimieren. Jeder Hint deckt einen anderen Bedarf hinsichtlich Timing und Priorität ab. ```html ``` ## Was jeder einzelne bewirkt - **`preload`** — "Ich brauche das **für die aktuelle Seite**, rufe es jetzt mit hoher Priorität ab." Für kritische Ressourcen, die der Parser erst spät entdeckt: Fonts, Hero-Images, in CSS referenzierte Assets. Erfordert `as`, damit der Browser die korrekte Priorität und die richtigen Header setzt. - **`preconnect`** — "Ich werde mich bald mit diesem **Origin** verbinden; führe DNS-Lookup + TCP + TLS-Handshake jetzt durch." Spart die Round-Trips vor der ersten Anfrage an einen Drittanbieter (API, Font-Host, CDN). Nutze es für wenige kritische Origins. - **`dns-prefetch`** — eine leichtgewichtige Variante von preconnect: nur die DNS-Auflösung. Guter Fallback bzw. für viele Origins geeignet. - **`prefetch`** — "Ich werde das **wahrscheinlich** für die **nächste** Navigation brauchen; rufe es mit niedriger Priorität ab, wenn der Browser im Leerlauf ist." Für voraussichtlich als Nächstes benötigte Seiten/Assets. Wird für die Zukunft gecacht, nicht für die aktuelle Seite. ## Ein häufiges Praxisbeispiel: Fonts ```html ``` Fonts werden spät entdeckt (der Browser muss zuerst das CSS parsen), daher vermeidet das Preloading Verzögerungen durch unsichtbaren Text. ## Vorsicht: nicht zu viele Hints setzen Alles zu preloaden verfehlt den Zweck — es konkurriert mit den wirklich kritischen Ressourcen um Bandbreite. Setze Hints nur für die wenigen, die am wichtigsten sind. ## Warum es wichtig ist Resource Hints reduzieren die Latenz auf dem kritischen Pfad: `preconnect` beseitigt die Handshake-Verzögerung für Drittanbieter, `preload` priorisiert spät entdeckte kritische Assets (Fonts, LCP-Image) und `prefetch` lässt die *nächste* Navigation sofort wirken. Gezielt eingesetzt verbessern sie die Core Web Vitals spürbar.