What the Preload and Preconnect Builder does
This builder turns a list of the resources a page needs early - web fonts, the hero image, module scripts, third-party origins - into the right resource hints: preconnect for the origins, dns-prefetch for the rest, preload with the correct as, type and crossorigin for late-discovered files, and modulepreload for ES modules. It writes them as HTML link tags or as an HTTP Link header, and checks existing hints for the mistakes that make them useless.
Resource hints are easy to get subtly wrong. A font preload without crossorigin does not match the real font request, so the browser downloads the font twice. A preconnect without crossorigin to a font host opens a connection the font cannot use. Ten preloads raise ten files to high priority, and then nothing is prioritised. The rules come from the HTML and Fetch standards, and this tool applies them for you.
How to use it
- Enter the page URL so relative paths resolve and your own origin can be told apart from third parties. Nothing is fetched.
- List the critical resources, one per line. The type is detected from the extension; add
lcpto the largest above-the-fold image,moduleto ES modules without an .mjs extension,corsfor anything requested with CORS, oras=fetchand similar to override the type. - Set the round-trip time to third-party servers and the maximum number of preconnects. Origins beyond that limit get
dns-prefetchinstead. - Copy the link tags into the page head, or the
Linkheader into your server or CDN configuration. - Optionally paste the link tags your page already has; the checker reports missing
crossorigin, missing or invalidas, preconnects to your own origin, duplicates and over-use.
Reading the results
Preconnect does the DNS lookup, TCP handshake and TLS negotiation ahead of time. With TLS 1.3 over TCP that is about three round trips per origin - 300 ms at a 100 ms round-trip time - and about two over HTTP/3, where QUIC combines transport and TLS setup. The stat shows this as "up to" because some of the work may already be overlapping with other requests.
Browsers keep separate connections for requests with and without CORS. Fonts and fetch() calls always use CORS, so their origins need preconnect ... crossorigin; if the same origin also serves images, it needs a second preconnect without it. The builder emits both when your list needs both.
Preload is for files the browser would otherwise find late: fonts referenced inside CSS, a hero image set as a CSS background or inserted by script, a script loaded by another script. Anything already in the HTML - a stylesheet link, a script tag, an img - is found by the browser's preload scanner, and preloading it mostly adds noise.
Worked example: a shop with Google-hosted fonts, an image CDN and payment script
The shop example lists two WOFF2 fonts on fonts.gstatic.com, a hero AVIF on cdn.shop.example flagged lcp, a critical stylesheet on the shop's own origin, Google Tag Manager and Stripe. The builder emits four preconnects - fonts.gstatic.com with crossorigin because fonts use CORS, the CDN, googletagmanager.com and js.stripe.com - and no preconnect for shop.example itself, which the browser is already connected to.
Each font gets as="font" type="font/woff2" crossorigin, and the hero gets as="image" type="image/avif" fetchpriority="high". At 100 ms per round trip, each preconnected origin can save up to 300 ms of connection setup.
The findings question the rest: six preloads is more than the handful that keeps priorities meaningful; the stylesheet is probably already in the HTML; and preloading the tag manager and Stripe scripts would put third-party code on a par with the fonts and hero image. The existing tags pasted in the example show the classic bugs - a gstatic preconnect and a font preload both missing crossorigin, and a preconnect to the page's own origin.
Limitations: what the result does not prove
- It generates and checks hints; it cannot measure whether they help on your page. Compare waterfalls before and after in DevTools or WebPageTest - a hint that does not move a request earlier is just extra bytes.
- The saving shown is connection setup only. It is not added to Largest Contentful Paint or any other metric automatically.
- Resource types are guessed from file extensions. URLs without an extension need an explicit
as=flag. - Browsers apply their own limits and heuristics - for example ignoring preconnects that go unused for about ten seconds - so the same hints can behave slightly differently across browsers.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- W3C Resource Hints / HTML preload - checked 19 Sep 2026
- WHATWG HTML - Link type preconnect
- WHATWG HTML - Link type modulepreload
- web.dev - Establish network connections early
- web.dev - Preload critical assets
Frequently asked questions
What is the difference between preload and preconnect?
preconnect warms up a connection to another origin - DNS, TCP and TLS - without downloading anything. preload downloads a specific file early, at high priority, so it is ready when the page asks for it. Use preconnect for important third-party origins and preload for specific critical files the browser would discover late.
Why is my preloaded font downloaded twice?
Usually because the preload lacks crossorigin. Browsers always request fonts in CORS mode, even from your own origin. A preload is reused only if its mode matches the real request, so a preload without crossorigin is fetched in no-CORS mode and then ignored, and the font is downloaded a second time.
How many preconnects should a page have?
Usually no more than three or four, for origins used early in the page load. Each one costs a little CPU and keeps a socket open; browsers close unused ones after about ten seconds. For the rest, dns-prefetch is a cheaper hint that only resolves the name.
When should I use modulepreload instead of preload?
For JavaScript modules. modulepreload fetches the module with the right mode and credentials for an import, and browsers may also parse it and fetch its dependencies. A preload with as=script does not match a module request, so the file is downloaded twice.
Can resource hints be sent as HTTP headers?
Yes. The Link response header accepts the same relations, for example Link: <https://fonts.gstatic.com>; rel=preconnect; crossorigin. Headers are read before the HTML body arrives, and some CDNs turn them into 103 Early Hints so the browser can start even earlier.
Is dns-prefetch still useful?
As a fallback, yes. It only resolves the domain name, which costs almost nothing, so it suits third-party origins that are used on the page but are not important enough to spend one of your few preconnects on.
Last reviewed by the A2Z.Tools team against the sources listed above.
