HTTP Link Header Format for Resource Hints

HTTP Link Headers for Resource Hints

Instead of placing <link> tags in your HTML, you can send resource hints as HTTP response headers. This can be faster because the browser receives them before it starts parsing the HTML document.

HTTP Header Syntax

Link: </css/critical.css>; rel=preload; as=style
Link: </fonts/inter.woff2>; rel=preload; as=font; type=font/woff2; crossorigin=anonymous
Link: <https://fonts.gstatic.com>; rel=preconnect; crossorigin=anonymous
Link: <https://cdn.example.com>; rel=dns-prefetch

Multiple Resources in One Header

You can combine multiple hints in a single Link header by separating them with commas:

Link: </css/critical.css>; rel=preload; as=style, </fonts/inter.woff2>; rel=preload; as=font; crossorigin=anonymous, <https://cdn.example.com>; rel=preconnect; crossorigin=anonymous

When to Use HTTP Headers vs HTML Tags

Scenario	Recommendation
Static HTML pages	HTML <link> tags
Server-rendered pages	HTTP headers (faster)
CDN-served pages	HTTP headers (via CDN config)
103 Early Hints	HTTP headers (required)
Service workers	HTML <link> tags

103 Early Hints

HTTP 103 Early Hints is a special status code that lets the server send resource hints before the final response is ready. This is particularly powerful for dynamic pages where the server needs time to generate the HTML:

HTTP/1.1 103 Early Hints
Link: </css/critical.css>; rel=preload; as=style
Link: <https://fonts.gstatic.com>; rel=preconnect; crossorigin=anonymous

HTTP/1.1 200 OK
Content-Type: text/html
Link: </css/critical.css>; rel=preload; as=style
...

The browser starts fetching resources after receiving the 103 response, while the server is still generating the HTML.

CDN Configuration Examples

Cloudflare

Cloudflare automatically converts <link> tags in HTML to HTTP headers. You can also set them in Cloudflare Workers:

response.headers.append('Link',
  '</css/style.css>; rel=preload; as=style');

Nginx

add_header Link "</css/critical.css>; rel=preload; as=style";

Apache

Header add Link "</css/critical.css>; rel=preload; as=style"

Important Notes

• HTTP Link headers follow RFC 8288 syntax — angle brackets around URLs, semicolons between parameters
• Attribute values with special characters must be quoted
• The nopush parameter prevents HTTP/2 server push: rel=preload; as=style; nopush