OneWebDesk
All tools
한국어|English

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.

Generated link tags
<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 as value 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.

  1. Preload only the few truly critical resources (LCP image, key fonts, blocking scripts) per page.
  2. If a preload is never used, the console warns "preloaded but not used" — remove those entries.
  3. Fonts and cross-origin fetch requests need crossorigin, 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.

Frequently asked questions

Why do as and crossorigin matter for preload?
Without as, the browser can't set the right priority or Accept header and may warn or re-fetch the resource. Fonts are loaded in anonymous CORS mode, so a font preload also needs crossorigin so the cache is reused and the file isn't downloaded twice.
How many preconnects should I add?
Aim for 2–4 origins you're sure to use soon. preconnect holds a real socket and TLS session, so too many spreads resources thin and hurts more than it helps. Use dns-prefetch for uncertain or numerous origins.
Where do I put the generated tags?
Inside the <head> of your HTML document. Placing important hints as high as possible helps the browser discover them early. In Next.js you can add them via metadata or the layout head.
Is the URL I enter sent to a server?
No. All input and tag generation happen entirely in your browser and nothing is sent anywhere. The output markup is produced client-side.
What's the difference between modulepreload and preload as=script?
modulepreload is specific to ES modules: it fetches the module and its dependency graph and prepares them for parsing and instantiation. Use preload as="script" for classic scripts and modulepreload for module entry points.

Related tools

Image Format Recommender
Recommend the right image format (WebP, AVIF, PNG, JPEG) for your use case.
Cache-Control Builder
Build a Cache-Control header for your resource type.
Response Time Test
Measure a URL's server response time and redirect overhead.
Compression (gzip/brotli) Check
Check whether the server applies gzip/brotli compression and the savings.
Page Weight Analyzer
Analyze a page's HTML size and the count/type of referenced resources.
CIDR Calculator
Calculate IP range, subnet mask and host count from CIDR notation.