When do I need crossorigin on preload?

Always for fonts (CORS-anonymous), and for any preload whose actual fetch will be CORS (modules, fetch()). Without it the browser warns and the preload is wasted.

Are my hint URLs sent to a server?

No. The tags are built locally in your browser.

Does preconnect help for resources I will preload anyway?

Usually no: preload triggers connection setup itself. Use preconnect for origins whose actual requests come later in the page lifecycle (analytics, third-party widgets).

preload · prefetch · preconnect · dns-prefetch

Build resource hints for the <head>

Q: preload vs. prefetch?

preload is for resources needed by the current page, fetched at high priority. prefetch is for resources needed by a likely next navigation, fetched at idle priority and stored in the HTTP cache.

Compose preload, prefetch, preconnect and dns-prefetch link tags. Pick the right one based on how soon and how critically each asset is needed.

Resource Hints Builder

Hints

rules

preload

critical

preconnect

origin

Bytes

210

html

input · hints

CORS

output · link tags

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/next-page.js" as="script">

Quick Start

How to pick the right hint

Resource hints help browsers start work earlier. Pick the most aggressive hint that's true: preload > preconnect > prefetch > dns-prefetch.

01
Identify critical assets
Fonts, hero images, render-blocking CSS/JS — these benefit from preload.
Lookups reference the IANA registries (MIME, HTTP status, TLDs) bundled at build time — no live network calls, no rate limits, no leaked queries.
auditIANAregistryofflinelive
critical · queryasset · IANA
```
preload fonts
```
loaded · IANA bundlespec · ready
02
Open early connections
preconnect to third-party origins your page calls within the first few seconds.
Builders emit canonical syntax per the relevant RFC (9110 for HTTP, 5322 for headers, 3986 for URLs) so the output passes spec-compliant parsers.
preconnectRFC 9110canonicalspec-compliantlive
preconnect · optionsorigin · live
```
fonts.gstatic.com
```
options applied · livecanonical
03
Anticipate next clicks
prefetch the JS/CSS the user is likely to need on their next route.
Validation flags common pitfalls — uppercase header names, smart quotes inside Content-Type, missing ;charset=utf-8 — before they bite production.
prefetchvalidationlintpitfallslive
prefetch · looked upnext · ready
```
/next-page.js
```
result · livevalidated
04
Paste into <head>
Order doesn't matter much — but place hints high in the head.
Copy writes the snippet directly into your clipboard; downloads emit the right extension and MIME so curl/httpie pick them up correctly.
deployclipboardMIME-correctblobcurl-ready
ok · copiedready · done
```
<link rel=preload ...>
```
shipped · ready to shipsuccess

Pro tips

Web-spec details that bite later

Idempotency saves retries

POST/PUT/DELETE should be safely retried. Use idempotency keys and return the same response on duplicate requests.

Match RFC 9110 status codes

Don’t invent codes. 422 for validation errors, 409 for conflicts, 429 for rate limits. Standard codes work with off-the-shelf clients.

Set <code>Cache-Control</code> deliberately

Default browser caching is conservative. Use max-age + stale-while-revalidate for hot endpoints.

Validate Open Graph in dev

OG tags break silently. Use a previewer like OG Generator + Facebook’s debugger before launch.

CORS is a server concern

The browser sends the preflight; the server decides. Wildcard origins disable credentials — be explicit.

MIME drives behaviour

Servers must send the right Content-Type. Browsers sniff but the spec says they shouldn’t — be explicit to avoid surprises.

Use Cases

When to use resource hints

Web perf, CWV, font loading, route prefetch.

Web fonts

preconnect + preload to hit LCP and CLS targets. Bundled from IANA registries at build time — no live network call, no rate limit, no leaked queries. The MIME, TLD, and status-code tables are baked in so the tool works offline once loaded.

spec-compliant

Third-party origins

preconnect Stripe, GA, Sentry, fonts CDNs. Output is canonical per the relevant RFC (9110 for HTTP, 5322 for headers, 3986 for URLs), so spec-compliant parsers accept it as-is. Cross-browser and cross-library behaviour stays consistent.

Single-page apps

prefetch the next-route bundle while the user reads. Pairs with the curl-to-fetch converter for end-to-end test stubs — copy the curl from DevTools, paste, get an idiomatic fetch() body. Drop into Playwright/Vitest fixtures without manual translation.

IANA-backed

Module preload

Avoid round trips for known ES module dependencies. Catches common pitfalls (uppercase header names, smart quotes inside Content-Type, missing ;charset=utf-8) before they bite production. Validation flags rather than auto-corrects so you stay in control.

RFC-aligned

Critical CSS

preload above-the-fold stylesheets to render faster. Validation runs as you type — copy only when the output is shaped correctly. The output drops directly into nginx, Apache, or CDN configs without re-formatting or re-quoting.

production-grade

Geo-far APIs

Open the TLS connection while the user is still reading. Same input plus same options always produces identical canonical output, so the tool is safe to embed in CI scripts that diff against expected configs.

curl-ready

FAQ

Frequently asked questions

preload vs prefetch?

preload starts downloading now for the current page. prefetch hints assets needed soon, with lower priority.

When is crossorigin needed?

For fonts and for any fetched resource from a different origin that returns credentials. Without it the browser may issue a duplicate request.

What about modulepreload?

Use it for ES module bundles — it primes both the module graph and the network.

Will too many hints hurt?

Yes. They compete for bandwidth and main thread. Keep to <10 critical preloads and a small list of preconnects.

Does it run locally?

Yes. Generation is entirely client-side.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!