Web Resource Hints Generator
Generate correct <link rel> resource hint tags (preload, prefetch, preconnect, dns-prefetch, modulepreload) and the equivalent HTTP Link header from a plain list of resources, with automatic as= and crossorigin guidance.
Input
One resource per line: url | hint type | resource type (as=) | crossorigin | media. Only url and hint type are required — trailing fields can be omitted. Hint types: preload, prefetch, preconnect, dns-prefetch, modulepreload. Lines starting with # are ignored.
Output
Fixes applied automatically (like adding crossorigin for fonts) and anything worth double-checking.
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/web-resource-hints-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"resources": "https://fonts.gstatic.com | preconnect | | anony…"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `web-resource-hints-generator` tool (Web Resource Hints Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/web-resource-hints-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Web Resource Hints Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
The Web Resource Hints Generator turns a plain list of resources into correctly formatted <link rel> HTML tags and the equivalent HTTP Link: header for preload, prefetch, preconnect, dns-prefetch, and modulepreload. It applies the attribute rules browsers actually enforce — as= for preload, crossorigin for fonts — automatically, and tells you what it changed.
How to use the tool
Enter one resource per line in the format:
url | hint type | resource type | crossorigin | mediaOnly the URL and hint type are required — trailing fields can be left off. For example:
https://fonts.gstatic.com | preconnect | | anonymous
/styles/critical.css | preload | style
/fonts/inter.woff2 | preload | fontThe tool generates both the HTML <link> tags (for your <head>) and the equivalent HTTP Link: header lines (for server-level config, since a header hint applies before the HTML is even parsed). Copy whichever format your setup uses.
Hint types
preload— fetch a resource this page will definitely need, at high priority, without blocking rendering. Requiresas=.prefetch— fetch a resource a future navigation will likely need, at low priority, during idle time.preconnect— open the connection (DNS + TCP + TLS) to a cross-origin host ahead of time, without fetching anything yet.dns-prefetch— resolve DNS for a host ahead of time; a cheaper fallback for browsers that don't supportpreconnect.modulepreload— preload a JavaScript module and its dependency graph.
Why as= and crossorigin matter
preload without a matching as= value (script, style, image, font, fetch, document, audio, video, track, worker, embed, object, manifest) is fetched at the wrong priority or ignored outright, because the browser can't tell how to match it to the eventual request. Fonts specifically must be fetched in CORS mode even when same-origin — the tool adds crossorigin automatically for any as=font line and explains why in the Guidance panel.
Why does the tool sometimes add crossorigin with no value?
A bare crossorigin attribute (no ="anonymous") is the standard shorthand for anonymous-mode CORS — the form browsers themselves use in their own preload examples. Use crossorigin="use-credentials" explicitly only if the resource requires cookies or HTTP auth.
HTML tag or HTTP header — which should I use?
The HTTP Link: header is discovered before the browser even starts parsing HTML, so it can hint slightly earlier than the same <link> tag placed in <head> — useful for a CDN or reverse proxy that can inject the header, or for preconnect/dns-prefetch hints you want to apply site-wide. Otherwise the HTML tag is simpler to maintain since it lives next to the markup it supports.
To check what headers a live site is already sending, use the HTTP Header Analyzer. For the related HSTS security header, see the HSTS Preload Header Generator. To redirect old URLs instead of hinting at new ones, see the Redirect Rules Generator.