Preload, preconnect and dns-prefetch generator

Preload, preconnect and dns-prefetch generator: what it is for

Resource hints are tags in the <head> that tell the browser what the page will need, so it can get connections and downloads started early. Used sparingly, they shorten the time until the main content appears; used too much, they get in the way.

Paste the addresses or the page's HTML and the tool chooses: preconnect (with crossorigin for fonts) for up to three important domains, dns-prefetch for the rest and for analytics scripts, preload only for one or two fonts and for the main image with fetchpriority=high, and prefetch for the likely next page. Each tag comes with the reason.

How to use

1. Paste the addresses or the HTML.
2. Check the domain, main image and next page.
3. Copy the tags into the <head>.

When to use it

• Sites using Google Fonts.
• Pages with a large image at the top.
• Improving Core Web Vitals LCP.

Frequently asked questions

What's the difference between preconnect and dns-prefetch?

preconnect opens the whole connection to the other domain (DNS, TCP and TLS) before the browser needs it. dns-prefetch only resolves DNS, is cheaper and suits less important domains. Use preconnect on a few domains, two or three, and dns-prefetch on the rest.

When should I use preload?

Only for critical resources the browser discovers late, like the heading font (hidden inside the CSS) or a main image set as a CSS background. Too much preload competes for bandwidth with what matters and makes the site slower.

Why does the font need crossorigin?

Fonts are always fetched in CORS mode. Without the crossorigin attribute on the preload or preconnect, the browser doesn't reuse what it already downloaded and ends up requesting the font twice.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools