Resource Hints sind <link>-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.
Resource Hints sind <link>-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.
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.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Fonts werden spät entdeckt (der Browser muss zuerst das CSS parsen), daher vermeidet das Preloading Verzögerungen durch unsichtbaren Text.
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.
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.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden