HTTP Link Header Generator - Online Preload & DNS‑Prefetch

The HTTP Link header is sent as part of the server's HTTP response headers, allowing the browser to start resource fetching before parsing the HTML. HTML <link> tags are discovered during HTML parsing. The header approach is faster because it eliminates the HTML parsing delay. However, HTML tags are easier to implement (no server config needed). For maximum performance, use both — the header for the earliest possible start, and HTML tags as a fallback.

Preload (rel="preload") fetches resources needed for the current page with high priority. The browser downloads them immediately as critical assets. Prefetch (rel="prefetch") fetches resources that might be needed for future navigation with low priority. Use preload for above-the-fold fonts, critical CSS, hero images. Use prefetch for the next page's resources or secondary content.

DNS-Prefetch only resolves the domain name to an IP address. Preconnect does the full handshake: DNS resolution + TCP connection + TLS negotiation. Preconnect is more powerful but also more "expensive" — it opens and holds connections. Use preconnect for origins you're certain will be needed (e.g., your CDN, font provider). Use dns-prefetch as a lightweight alternative for less-critical third-party domains or as a fallback for older browsers. Best practice: use preconnect for critical 3rd-party origins and skip dns-prefetch for those same origins.

The as attribute tells the browser what type of resource is being loaded, which determines the request's priority, proper Content-Security-Policy handling, and correct caching behavior. Without as, the browser treats the resource as a generic fetch request with incorrect priority. For example, a font preloaded without as="font" may not be used when the CSS actually requests the font, causing a double download. Always specify the correct as value.

Always use crossorigin="anonymous" when preloading fonts — even if they're hosted on your own domain. This is because browsers apply CORS rules to fonts by specification. For other resources: use crossorigin when the resource is on a different origin and requires CORS (e.g., CDN scripts with integrity checks). For modulepreload, crossorigin is automatically applied — you don't need to add it manually.

1. Chrome DevTools: Open the Network tab, look for resources with "Highest" priority (preloaded) or early DNS/TCP timing entries (preconnect). 2. Performance Panel: Record a trace and look for resource loading timestamps — preloaded resources should start very early. 3. Lighthouse: Run an audit — it flags missing preload/preconnect opportunities. 4. Console warnings: Chrome will warn if a preloaded resource isn't used within 3 seconds. 5. Check response headers: In the Network tab, inspect response headers for the Link header.

Yes! rel="modulepreload" is specifically designed for ES modules. It automatically sets crossorigin="anonymous", handles module dependency graphs, and ensures proper module execution order. Using preload as="script" for modules can cause the module to be fetched but not properly parsed as a module, leading to duplicate downloads. Always use modulepreload for ES module files and preload as="script" for classic scripts.