Build HTML resource hints for important connections, fonts, images, stylesheets and scripts. This generator normalizes connection origins, checks common input mistakes and produces escaped markup you can copy into your page's <head>.
Resource Hints & Preload Generator
Runs locallyPreview the current hint
Choose a hint.
Which resource hint should you use?
| Hint | What it prepares | Typical use |
|---|---|---|
dns-prefetch | Hostname resolution | Lower-priority external origins |
preconnect | Connection setup | A small number of critical external origins |
preload | A specific resource request | An important asset discovered late, with the correct destination |
modulepreload | JavaScript module fetching and preparation | A module needed soon in the current document |
A connection hint takes an origin, not the path to a particular file. The generator turns https://cdn.example.com/assets/app.js into https://cdn.example.com for preconnect. DNS-prefetch uses the hostname; ports and paths do not define a separate DNS lookup.
How to use the generator
- Identify the real resource. Use your browser's Network panel to find the URL and how it is requested.
- Select the hint. Use a connection hint for an external origin, preload for a known resource, or modulepreload for a JavaScript module.
- Match the request details. Select the correct
asvalue and CORS mode. MIME type and media are optional preload settings. - Add and copy. Add more than one hint if needed. Identical generated lines are deduplicated.
- Measure on the target page. Check that the browser reuses the request and does not report unused preloads.
Worked examples
Choose preload, enter /fonts/body.woff2, select Font, set font/woff2 and keep Automatic CORS.
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
The eventual font request must match this URL and mode. Preloading does not replace your @font-face rule.
<link rel="preconnect" href="https://cdn.example.com" />
Use anonymous CORS when preparing an origin for anonymous CORS resources such as fonts. Avoid preconnecting to every third party.
<link rel="modulepreload" href="/assets/app.mjs" />
The page still needs its normal module script or import. This tag does not execute the application.
Request matching matters
Preload reuse depends on matching the URL, resource destination and credentials mode. A wrong as or CORS setting can create an extra download. Font preloads use anonymous CORS, including same-origin fonts. Fetch preloads must match the credentials behavior of the later request; use-credentials is appropriate only when that request actually includes credentials.
The generator checks syntax, not your server's CORS headers or whether the resource exists. It does not inspect authentication, redirects, content negotiation or cache policy. A relative resource path is resolved by the target page when you paste the tag there.
Responsive image preload example
<link rel="preload" href="/hero-1280.webp" as="image" type="image/webp" imagesrcset="/hero-640.webp 640w, /hero-1280.webp 1280w" imagesizes="100vw" fetchpriority="high" />
Match these candidates and sizes to the image used on your page. Reserve high priority for a genuinely critical asset. Responsive selection depends on the document viewport, so do not translate these attributes into a 103 Early Hints header.
Build a focused loading strategy
Start with the bottleneck shown by measurement. Use connection hints for critical third-party origins, preload for a small number of assets that the browser discovers too late, and modulepreload for modules needed early. Do not give every resource high priority. Avoid duplicating hints already emitted by your CMS or build system.
The optional target-page URL enables a same-origin warning. The preview updates locally as you edit; Add hint puts the validated line into the output. Download snippet saves only the generated tags, not a complete website or a server configuration.
Validation is not a performance audit
The generator checks supported URLs, destinations, MIME syntax and a restricted candidate-list syntax. It rejects credentials in URLs, mixed width/density descriptors and duplicate descriptor values. It escapes attributes instead of inserting generated tags into this page. It cannot prove that media or sizes expressions are correct for your design, or that a resource is used early.
Check the output after installation
- Test a clean load. Compare before and after with the same network and cache conditions.
- Inspect requests. Verify that the consuming resource reuses the preload and that URLs and credentials match.
- Watch for warnings. Remove preloads that are not used soon after loading.
- Check mobile too. Confirm that candidate selection matches the displayed image and does not download multiple variants unnecessarily.
Common mistakes
- Preloading too many assets and competing with the page's most important resources.
- Preconnecting to the current origin, whose connection is already established.
- Preloading a font that is not used in the initial view.
- Generating both AVIF and WebP preloads when only one format is used.
- Using classic-script preload for a module instead of modulepreload.
- Assuming a preload applies the stylesheet, displays the image or executes the script.
- Adding early connections to services that your consent setup is meant to keep inactive until the user's choice.
How to add resource hints to your website
The generated tags are ordinary HTML and are not specific to Blogger. Add them where your platform renders the document head. Use the exact asset URL served to visitors; relative paths are resolved against the target document's base URL.
| Platform | Integration approach | Check before saving |
|---|---|---|
| HTML or custom website | Add selected link tags to the document head. | Confirm the asset URL, destination and CORS mode. |
| WordPress | Use the theme or plugin mechanism that controls head output. | Check whether optimization plugins already add the same hints. |
| Shopify | Use the theme's head output and the actual rendered asset URLs. | Confirm generated URLs and avoid duplicating platform hints. |
| Blogger | Add relevant tags to the XML theme head after making a backup. | Preserve valid XML and use paths that are actually hosted. |
| Application frameworks | Use the framework's supported head or resource-loading API. | Inspect the rendered HTML; the bundler may manage module dependencies. |
Self-closing tags can be pasted into an XML-based template. The output is a snippet, not a whole HTML document. It does not configure HTTP Link headers, CDN cache rules or 103 Early Hints.
Choose settings that match the resource
| Resource | Suggested starting point | Important limit |
|---|---|---|
| Font needed early | preload, as=font, matching MIME, anonymous CORS | Do not preload every weight or unused family. |
| Late-discovered hero image | preload, as=image, matching candidates and sizes | Verify candidate selection and priority on mobile. |
| Classic script | preload, as=script | It still needs its consuming script element. |
| JavaScript module | modulepreload | Check the build system's existing module hints. |
| JSON or other fetch resource | preload, as=fetch | Match credentials mode with the eventual fetch. |
| Critical external origin | preconnect | Avoid unnecessary early third-party connections. |
A practical performance workflow
- Review existing markup. Use the Web Performance HTML Auditor to help review performance-related HTML, then verify actual requests in browser tools.
- Prepare the asset. For images, review dimensions and responsive candidates with the Responsive Image HTML Optimizer.
- Generate a small set of hints. Use measured need rather than adding every available option.
- Compare loading behavior. Check the page's network waterfall, unused-preload warnings and visible loading before and after.
- Keep the configuration current. Remove a hint when an asset changes, is no longer used early, or is already handled by the platform.
Privacy and scope
Your entered URLs are used locally to generate text. This tool does not fetch them, upload them or store them as drafts. Page visits can still load normal site resources and advertising technologies as described in the Privacy Policy. After you install a generated hint on your own site, the visitor's browser may contact that target earlier; consider your site's consent requirements.
Frequently asked questions
Does this tool test the URL or download the file?
No. It generates text locally and does not request your entered URL. Test the result in the browser on the target page.
Do I still need my stylesheet or script tag?
Yes. Preload prepares a resource; the normal consuming element, CSS rule, fetch call or module import still uses it.
Why does my font need crossorigin?
Fonts use anonymous CORS requests. Matching that mode helps the browser reuse the preload instead of fetching again.
Will these tags improve my SEO score?
They can help selected loading bottlenecks when used correctly, but a tag is not a ranking guarantee. Measure loading and user experience on the actual page.
Can I generate responsive image preloads?
Yes. Choose image preload and enter width or density candidates. Width candidates require sizes. Match the consuming image, and verify the selected request in the browser. The generator supports a restricted syntax and does not validate all possible HTML srcset forms.
Is this generator only for Blogger?
No. It produces standard link markup for websites on different platforms. The correct insertion point depends on how your platform outputs its head.
Can I use these tags in HTTP Link headers or Early Hints?
Do not paste the HTML directly into a header. Server-side Link syntax is different, and responsive image selection needs the document viewport. This generator outputs HTML snippets only.
Can preload replace lazy loading?
They solve different needs. Preload is for selected early resources; lazy loading delays resources that are not needed yet. Do not preload offscreen images merely because they are lazy-loaded.
Why do I see an unused-preload warning?
The resource may not be consumed soon, or its URL, destination, candidate selection or credentials mode may not match. Check the actual network request and remove unnecessary hints.
Sources
- MDN — preconnect: connection origins and limiting critical connections.
- MDN — preload: destinations, matching CORS mode and media conditions.
- MDN — modulepreload: module fetching and preparation.
- MDN — dns-prefetch: hostname resolution.
- web.dev — responsive image preloads: imagesrcset and imagesizes.
- web.dev — Fetch Priority: priority tradeoffs.
Related tools
- Web Performance HTML Auditor — inspect performance-related markup.
- Responsive Image HTML Optimizer — prepare image candidates and markup.
- URL Extractor — collect resource URLs from text for review.
- Remove Duplicate Lines — clean repeated URL lists before reviewing them.
- XML Sitemap Validator — review sitemap structure as a separate technical SEO task.
- Generators — browse developer generators.
- All calculators and tools — explore the full directory.
Read the Numeros methodology for how tools are built. Resource hints address loading; sitemap checks address discovery. Neither guarantees a search ranking.