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’sSag dem Browser, was als Nächstes kommt
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
- Füge die Adressen oder das HTML ein.
- Prüfe Domain, Hauptbild und nächste Seite.
- 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.