Resource Hints Generator
Generate preload, preconnect and dns-prefetch link tags.
Resource hints are <link> tags that tell the browser to get a head start on a resource. By opening connections early with preconnect and fetching critical files ahead of time with preload, you can meaningfully improve core metrics like LCP and FCP. This generator turns a type and a URL into a ready-to-paste block of hint tags.
Add rows to build several hints at once. For preload, it captures the required as value and the crossorigin attribute needed for fonts and cross-origin fetches. The output is static markup you can drop straight into <head>, so it works the same in any framework.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
The five resource hints at a glance
Each hint differs in how aggressively it works ahead. From most conservative to most aggressive:
- dns-prefetch: Resolves a domain's DNS ahead of time. It's nearly free, so it's safe to apply broadly across many third-party domains.
- preconnect: Completes DNS + TCP + TLS handshakes in advance. Reserve it for origins you're sure to use soon (font CDN, API server) and keep it to 2–4 entries.
- preload: Fetches a specific file the current page definitely needs (LCP image, critical font, urgent script) at high priority right away. The
asvalue is mandatory. - modulepreload: Fetches an ES module and its dependency graph and prepares it for parsing. It's more accurate than
preload as="script"for module bundles. - prefetch: Fetches resources for the nextnavigation at low priority during idle time. It does not affect the current page's speed.
preconnect vs dns-prefetch — which to use
Both speed up future requests, but they cost differently. dns-prefetchonly resolves a name, so it's almost free, while preconnect actually opens a socket and TLS session, holding resources. Use preconnect for one or two origins you'll definitely use soon, and dns-prefetch for origins that are uncertain or numerous. Pairing both on the same origin is a common compatibility pattern.
Beware of over-preloading
preload is powerful but backfires when abused. Preloading everything steals bandwidth from the resources that actually matter and can make LCP slower. Follow these rules.
- Preload only the few truly critical resources (LCP image, key fonts, blocking scripts) per page.
- If a preload is never used, the console warns "preloaded but not used" — remove those entries.
- Fonts and cross-origin
fetchrequests needcrossorigin, otherwise the cache key mismatches and the file is downloaded twice — always check it.
To decide which resources to prioritize, first understand how many scripts, styles and images a page references. Check that structure with the page weight analyzer.
preload as values and crossorigin — quick reference
The as value tells preload what priority and Acceptheader to use. Get it wrong and the browser can't reuse the cache, so it fetches the same file twice. Here are the correct combinations for the resources you'll use most.
| Resource | as value | crossorigin | Suggested type |
|---|---|---|---|
| Web font (.woff2) | font | Always required | font/woff2 |
| CSS | style | Only if cross-origin | Omit |
| Script | script | Only if cross-origin | Omit |
| LCP image | image | Only if cross-origin | image/webp, etc. |
fetch() JSON | fetch | Only if cross-origin | Omit |
Fonts are the one resource that always needs crossorigin, regardless of origin. Because fonts load in anonymous CORS mode, a same-origin font preload without crossoriginstill mismatches the real request's cache key and gets downloaded twice.
Worked example — preloading a font and the LCP image
Imagine a page with a large hero background image and a variable font for body text. You preconnect to the font CDN and preload the two actual files, producing this markup.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/img/hero.webp" as="image" type="image/webp">
Interpreted: the handshake with the font CDN starts while the HTML is still parsing, and the font and hero image are fetched at high priority before the page's other resources. The result is less text flash (FOIT) and a faster LCP at the same time. Note the image omits crossoriginbecause it's same-origin, while the font keeps it regardless of origin.
Common pitfall
- Preloading below-the-fold images: they aren't the LCP element yet grab bandwidth first, delaying the resources that matter. Reserve preload for above-the-fold LCP candidates.
- Mistaking
prefetchfor current-page acceleration: prefetch is a low-priority download for the nextnavigation, so it does nothing for this page's LCP. Files you need now must usepreload. - Dropping
crossoriginfrom a fontpreload: the most common mistake, it silently downloads the font twice — often with no console warning at all.