Developer Tools
Resource Hints Generator
Generate valid rel=preload, modulepreload, prefetch, preconnect, and dns-prefetch link tags for the HTML head, with HTTP Link header output.
Presets
Drop in a tested resource-hint pattern, then edit it for your URLs.
Hint 1
Open the TCP connection and TLS handshake to an origin early. Use origin-only URLs (no path). Helpful before a third-party fetch.
Origin only, like https://fonts.gstatic.com. Paths, queries, and fragments are ignored.
anonymous matches most CDN and font requests; use-credentials sends cookies.
Generated tag
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Preconnect to https://fonts.gstatic.com.
Hint 2
Fetch a critical sub-resource as early as possible. Requires the `as` attribute and must match the request the browser would otherwise make (type, crossorigin, media).
Absolute URL (https://...) or a root-relative path starting with /.
Required for preload. Tells the browser the request destination.
MIME type of the resource. Optional but helps the browser skip non-matching responses.
Fonts must use anonymous, otherwise the browser fetches the file twice.
Optional media query, like (max-width: 768px), for responsive hints.
Override the browser default. high forces front-of-queue, low yields to other hints.
Subresource integrity hash, like sha384-...
Optional. Controls what the browser sends in the Referer header.
Generated tag
<link rel="preload" href="https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2" as="font" type="font/woff2" crossorigin />
Preload https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2 as font.
Hint 3
Fetch a critical sub-resource as early as possible. Requires the `as` attribute and must match the request the browser would otherwise make (type, crossorigin, media).
Absolute URL (https://...) or a root-relative path starting with /.
Required for preload. Tells the browser the request destination.
MIME type of the resource. Optional but helps the browser skip non-matching responses.
anonymous matches most CDN and font requests; use-credentials sends cookies.
Optional media query, like (max-width: 768px), for responsive hints.
Override the browser default. high forces front-of-queue, low yields to other hints.
Same syntax as <img srcset>. Lets the browser pick the right LCP image size.
Same syntax as <img sizes>. Defaults to 100vw if omitted.
Subresource integrity hash, like sha384-...
Optional. Controls what the browser sends in the Referer header.
Generated tag
<link rel="preload" href="/images/hero.webp" as="image" type="image/webp" fetchpriority="high" />
Preload /images/hero.webp as image.
Add another hint
Combine preconnect, preload, modulepreload, prefetch, and dns-prefetch rows. Up to 24 rows per generation.
Rows
3
Errors
0
Warnings
0
How to use
- Pick a preset to drop in a tested pattern, or start editing the default rows.
- Choose the hint type for each row: preload, modulepreload, prefetch, preconnect, or dns-prefetch. The form rearranges to show only the attributes that apply.
- Fill in the href: a full URL for preconnect and dns-prefetch (origin only), or a URL or root-relative path for the other hint types.
- Set as, type, crossorigin, and the remaining attributes as needed. Use imagesrcset for responsive LCP image preloads and fetchpriority for confirmed critical requests.
- Read the inline warnings: font preloads without crossorigin, preconnect with a non-origin path, and other common mistakes are flagged before you ship.
- Click Copy HTML for the head block or Copy header for the HTTP Link header value. Add or remove rows to extend the set up to twenty four hints.
About this tool
Resource Hints Generator builds the five standard browser resource-hint link tags used to speed up navigation and improve Core Web Vitals: preload, modulepreload, prefetch, preconnect, and dns-prefetch. Each row is a fully-typed editor for one hint with the right fields surfaced automatically: preload exposes as, type, crossorigin, media, imagesrcset and imagesizes (when as is image), fetchpriority, referrerpolicy, and integrity; modulepreload exposes crossorigin, referrerpolicy, and integrity; prefetch exposes as, type, media, fetchpriority, crossorigin, and referrerpolicy; preconnect and dns-prefetch hide everything that browsers ignore and warn if you pasted a full path because both hints target an origin only. Validation runs live: an empty href surfaces a clear error, a non-origin URL on preconnect is flagged, font preloads without crossorigin anonymous get a duplicate-fetch warning, fetch preloads without crossorigin are flagged, and contradictions like prefetch with fetchpriority high are explained instead of silently rendered. Six presets drop in tested patterns in one click: Google Fonts preconnect plus woff2 preload, an LCP hero image preload with imagesrcset and fetchpriority high, a top-level ES module modulepreload, a next-page prefetch with as document, a third-party preconnect with a dns-prefetch fallback, and a critical CSS preload. The output panel emits both formats your stack needs: an HTML head block with one normalized link tag per row in stable order, and a Link HTTP header value for non-HTML responses and HTTP/2 early hints. Type suggestions are tailored to each as value (font/woff2 for fonts, image/avif and image/webp for images, text/css for styles, text/javascript and module for scripts), and crossorigin renders the HTML spec form so anonymous becomes the bare attribute and use-credentials renders with the value. Useful for front-end developers tuning LCP and TTFB, performance consultants writing audit reports, marketers shipping faster landing pages, design system maintainers documenting the right way to preload a webfont, and DevOps engineers wiring Link headers into their CDN. Everything runs in your browser using the native URL constructor and local string operations, so the URLs you paste stay on your device.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
HTML srcset Generator
Build a responsive img tag with srcset, sizes, and picture fallbacks.
Open tool
GeneratorHTML Boilerplate Generator
Build a clean HTML5 starter template with meta, OG, JSON-LD, and a CSS reset.
Open tool
SEOViewport Meta Tag Generator
Build the <meta name=viewport> tag with accessibility checks and presets.
Open tool
SEOCanonical Tag Generator
Build a normalized rel=canonical link tag and HTTP header from any URL.
Open tool
DeveloperCache-Control Header Builder
Build and parse Cache-Control headers with directive flags, max-age presets, conflict checks, and ready-to-paste server snippets.
Open tool
DeveloperCORS Headers Generator
Build Access-Control headers with live validation and Apache, Nginx, Vercel, Netlify, Next.js, Worker, and Express snippets.
Open tool