Preload / Prefetch Generator
Generate resource hints to optimize page loading performance
About this ToolHow it works, benefits & use casesTap to collapse
The Preload / Prefetch Generator builds resource-hint markup for tuning how the browser fetches assets. You add hints in a builder where each row picks a type — preload, prefetch, preconnect, dns-prefetch, or modulepreload — and a URL or path. For preload and modulepreload you set the "as" attribute (script, style, image, font, fetch, or document); for preload and preconnect you can toggle a crossorigin flag. When you type a preload URL, the tool auto-detects the resource type from the file extension and sets "as" for you (.css to style, .woff2 to font, images to image, and so on). One click on a common-use-case card — Critical CSS, Web Fonts, Hero Image, Third-party Domains, Analytics & Scripts, Next Page, or ES Modules — loads a ready-made hint set. Generated output is available in three tabs: HTML <link> tags, an HTTP Link header, and a Next.js next/head snippet. Hints are saved in your browser.
How to Use
- 1Click "Add hint" to create a row, then choose the hint type and enter the URL or path.
- 2For preload/modulepreload, set the "as" attribute; for preload/preconnect, tick CORS if the resource needs it (preload URLs auto-detect "as").
- 3Or click a common use-case card (Web Fonts, Hero Image, Third-party Domains, etc.) to load a recommended hint set.
- 4Press "Generate code".
- 5Switch between the HTML, HTTP Headers, and Next.js tabs and copy or download the snippet you need.
Key Benefits
- Supports all five hint types: preload, prefetch, preconnect, dns-prefetch, and modulepreload
- Auto-detects the "as" attribute for preload from the URL's file extension
- Per-hint crossorigin toggle for preload and preconnect
- Seven one-click recommendation presets for common performance scenarios
- Three output formats: HTML link tags, HTTP Link header, and Next.js next/head code
- Builds multiple hints at once and outputs them together
- Hint list saved in your browser between sessions
Common Use Cases
- Preloading critical CSS or above-the-fold hero images to speed first paint
- Preloading web fonts with crossorigin to avoid FOUT/FOIT
- Preconnecting to font CDNs and third-party API origins early
- DNS-prefetching analytics and tracking domains before they are needed
- Emitting resource hints as an HTTP Link header instead of inline tags
Resource hints
Common use cases
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Performance Budget CalculatorCalculate and track performance budgets for web apps
- HTML FormatterFormat and beautify HTML code
- Bundle Analyzer VisualizerPaste a bundle file list to get a visual size treemap, gzip/brotli estimates, performance-budget pass/fail checks, and a build-vs-build diff of what grew or shrank
- Speculation Rules GeneratorBuild the modern speculationrules script for instant navigations — prerender/prefetch, document rules & eagerness
- Bundle Size CalculatorEstimate package sizes and analyze bundle impact on your application
- Image Optimization CalculatorPlan responsive images — recommended breakpoints with ×1/×2 DPR, ready-to-paste srcset/picture/Next.js <Image> markup, per-format byte estimates, and total savings vs shipping the full-size original
preload fetches and caches a critical resource for the current page; prefetch fetches resources for a likely next navigation; preconnect opens an early connection to an important third-party origin; dns-prefetch resolves a third-party domain's DNS in advance; and modulepreload preloads an ES module and its dependencies. The builder shows relevant fields per type.
When you enter a preload URL, the tool reads the file extension and sets "as" accordingly — .css becomes style, .js becomes script, .woff/.woff2 become font, image extensions become image, .json becomes fetch, and .html becomes document. You can override the detected value from the As dropdown at any time.