DE
PortuguêsEnglishEspañolDeutschFrançaisItaliano日本語Русский中文
Start Favoriten
Voltar

Preload-, Preconnect- und dns-prefetch-Generator

Füge die Adressen ein, die die Website nutzt (eine pro Zeile), oder das HTML der Seite. Das Tool wählt den richtigen Hinweistyp für jede und warnt bei zu vielen Hinweisen.

So geht’s

Sag dem Browser, was als Nächstes kommt


Verfügbar auf: PortuguêsEspañolEnglishDeutschFrançaisItaliano日本語Русский中文

Nächstes Toolrobots.txt-Generator→
Werbung

Preload-, Preconnect- und dns-prefetch-Generator: wofür es gut ist

Resource Hints sind Tags im <head>, die den Browser darauf hinweisen, was die Seite brauchen wird, damit er Verbindungen und Downloads vorzieht. Mit Maß eingesetzt verkürzen sie die Zeit, bis der Hauptinhalt erscheint; zu viel genutzt, stören sie.

Füge die Adressen oder das HTML der Seite ein, und das Tool wählt: preconnect (mit crossorigin bei Schriften) für bis zu drei wichtige Domains, dns-prefetch für den Rest und für Analyse-Skripte, preload nur für ein oder zwei Schriften und für das Hauptbild mit fetchpriority=high und prefetch für die wahrscheinliche nächste Seite. Jedes Tag kommt mit der Begründung.

So geht’s

  1. Füge die Adressen oder das HTML ein.
  2. Prüfe Domain, Hauptbild und nächste Seite.
  3. Kopiere die Tags in den <head>.

Wann nutzen

  • Websites mit Google Fonts.
  • Seiten mit großem Bild oben.
  • Das LCP der Core Web Vitals verbessern.

Häufige Fragen

Was ist der Unterschied zwischen preconnect und dns-prefetch?

Das preconnect öffnet die ganze Verbindung zur anderen Domain (DNS, TCP und TLS), bevor der Browser sie braucht. Das dns-prefetch löst nur den DNS auf, ist billiger und eignet sich für weniger wichtige Domains. Nutze preconnect bei wenigen Domains, zwei oder drei, und dns-prefetch bei den übrigen.

Wann nutze ich preload?

Nur für kritische Ressourcen, die der Browser spät entdeckt, wie die Schrift des Titels (die im CSS versteckt ist) oder das Hauptbild, das über das CSS als Hintergrund gesetzt wird. Zu viel preload konkurriert um Bandbreite mit dem, was wichtig ist, und macht die Website langsamer.

Warum braucht die Schrift crossorigin?

Schriften werden immer im CORS-Modus geholt. Ohne das Attribut crossorigin beim preload oder preconnect nutzt der Browser das bereits Geladene nicht wieder und fragt die Schrift am Ende zweimal an.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools

Vielen Dank für deine Hilfe!

Jede Spende hilft, die Website online zu halten. Die Tools sind dafür gemacht, dir zu helfen, aber wir haben Serverkosten. Wenn du helfen kannst, hilft das sehr! Wähle oder gib einen Betrag ein:

Sichere Zahlung über Stripe. Öffnet sich in einem neuen Tab.

Die Tools werden wie besehen und ohne Gewähr angeboten. Wir haften nicht für die Ergebnisse oder für deren Verwendung.