OneTaskBy Tim King · Updated
Resource Hint Generator
Preconnect, Preload, Prefetch and Modulepreload Tags, With as, crossorigin and fetchpriority
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Resource Hint Generator works
This resource hint generator writes preload, preconnect and prefetch tags. Resource hints tell the browser about work it will need to do before it discovers that work by
itself: connect to a host, fetch a font the CSS will ask for, warm up the next page's bundle. The
attributes are easy to get subtly wrong — a font preload without crossorigin downloads the file
twice, a preload without as is ignored — so this generates the tag and the matching HTTP header
for you and explains what the browser will do with it.
Resource hint generator: which hint to use
preconnect does the DNS lookup, TCP handshake and TLS negotiation for an origin ahead of the first request to it. On a mobile connection that is three round trips, easily 300 ms or more, moved off the critical path. It only pays for origins the page will use early and for certain; each open connection costs the browser and server resources, so keep it to two or three and use it for the font host, the CDN or the API, not for every third-party tag.
dns-prefetch is the cheap cousin: resolve the name, open nothing. It is safe to list a dozen and
is the standard fallback next to a preconnect for older browsers. Neither takes a crossorigin
attribute in a meaningful way except preconnect: connections are keyed by CORS mode, so a preconnect
without crossorigin is useless for fonts and fetch() calls, which are always CORS requests.
preload fetches one specific file, at high priority, that the browser would otherwise find late:
a web font named in a stylesheet, a hero image set with background-image, a script another script
imports. The as attribute is mandatory, because the browser matches the preloaded response to the
later request by destination and applies the right priority and Content Security Policy; the wrong
value means a second download and a console warning. Fonts additionally need crossorigin because
font requests are always made in CORS mode. Preload is the hint most often abused: every preload
competes with the page's own resources, and preloading things that are not critical makes the
page slower.
prefetch fetches a file at the lowest priority once the current page has settled, for use on the next navigation. Use it for the bundle behind the most likely next click. It costs data if the user never goes there, and browsers may ignore it on metered connections.
modulepreload is preload for ES modules: it fetches, parses and compiles the module and, in
Chromium, its static import graph, so a deep dependency tree does not load one level per round trip.
It is always CORS and always as="script", so neither attribute is needed.
fetchpriority is a separate signal on preload, images and scripts that nudges priority within
a queue: high for the LCP image, low for something that must load but not first. It works
alongside a hint rather than replacing it.
The Link header. Every hint can also be sent as an HTTP Link: header, which the browser sees
before it parses a byte of HTML. Combined with a 103 Early Hints response it can arrive before
the server has even finished rendering the page, which is the earliest anything can start.
FAQ
Should I preconnect to Google Fonts?
Yes, to https://fonts.gstatic.com with crossorigin, since that is where the font files come
from and font requests are CORS. The stylesheet host, fonts.googleapis.com, is usually reached so
early that a preconnect to it saves little; a dns-prefetch is enough.
Why does the console say a preloaded resource was not used?
The browser fetched it but nothing requested the same URL with the same destination and CORS mode
within a few seconds. Usually the as value is wrong, crossorigin is missing on a font, or the
URL differs from the one the CSS actually uses.
How many hints is too many?
Two or three preconnects and a small number of preloads. If the head has ten preloads, the browser's priority scheduler is being told everything is critical, which is the same as telling it nothing is.
Does prefetch work across origins?
Yes, but the response goes into the HTTP cache under the current page's partition, so it is only reused by later pages on the same site, not by the other origin's own pages.
What about rel=prerender and speculation rules?
prerender as a link relation is deprecated. The replacement is the Speculation Rules API, a JSON
script block that prefetches or fully prerenders likely next pages, which is a different mechanism
from these hints.
See also: all Dev Utilities tools, Formatters & Validators, Data & Encoding, Security & Identifiers, SEO, Accessibility, AI.
Related tools
Core Web Vitals Calculator
Check whether your page passes Core Web Vitals and which metric to fix first.
Lighthouse Score Explainer
See exactly where your Lighthouse performance score comes from.
Cache-Control Header Builder
Build a Cache-Control header and see exactly how browsers and CDNs will treat it.
Page Weight Calculator
Add up page resources, see the breakdown and load time on each connection.
HTTP Header Inspector
Parse pasted HTTP headers, explain each one and audit security.