Resource Hints Generator

preload fetches a resource needed for the current page with high priority — use it for fonts, hero images, and critical scripts that are discovered late. prefetch fetches a resource likely needed for the next navigation with low priority — use it for assets of the next page in a user journey. preload improves current page performance; prefetch improves future page performance. Preloaded resources that aren't used within a few seconds trigger a browser warning.

preconnect establishes a TCP connection, TLS handshake, and DNS lookup to an origin in advance, saving 100–500ms of latency when that origin is first requested. Use it for critical third-party origins you know will be needed soon (CDN, Google Fonts, analytics). Limit to 2–3 preconnects — each one reserves a socket and consumes resources. For origins you're less certain about, use dns-prefetch instead (DNS only, cheaper).

modulepreload is purpose-built for ES modules. Unlike preload (which fetches and stores), modulepreload also parses the module, compiles the JavaScript, and registers it in the module map — so when the module is imported, it's instantly available with zero parsing overhead. Use modulepreload for your main JS entry points (app.js, chunks). It's supported in all modern browsers. Regular preload with as=script doesn't give the same compile-time benefit for modules.

The as attribute tells the browser what type of resource is being preloaded, which affects request priority, cache matching, and Content Security Policy enforcement. Without it, the browser fetches with lowest priority. Values: script, style, font, image, fetch, document, track, worker. For fonts, always include crossorigin='anonymous' — even same-origin fonts need it because fonts use CORS. Missing crossorigin causes a double download.

Resource hints work in both HTML link tags and HTTP Link response headers. HTTP Link headers have a slight advantage: they're processed before HTML parsing begins, giving a tiny head start. Use HTTP headers for preconnect and preload on the initial HTML document. Example: Link: </fonts/myfont.woff2>; rel=preload; as=font; crossorigin. Most CDNs and servers (Nginx, Cloudflare, Vercel) support Link headers via config or response headers.