LinkThe Link header expresses the same link relations as HTML's `<link>` element, but as an HTTP response header. It lets browsers and crawlers learn about related resources (styles, fonts, the next page, the canonical URL) before the body is even parsed.
Each link is `<URL>; rel=relation`, with multiple links comma-separated and parameters (`as`, `type`, `crossorigin`, ...) attached via semicolons.
For performance the most important uses are `rel=preload` and `rel=preconnect`. Because the header arrives ahead of the document, it can start loading critical resources (CSS, web fonts, hero images) early, or pre-establish connections (DNS + TCP + TLS) to third-party origins, cutting render-blocking latency. `preload` requires `as=`, and CORS resources like fonts must include `crossorigin` to avoid a duplicate download.
For structure and SEO you can declare `rel=canonical` (canonical URL), `rel=alternate` (localized or media alternatives, with `hreflang`/`type`), and `rel=next`/`rel=prev` (pagination) in the header. The header approach can even assign a canonical to non-HTML resources (PDFs, images) that can't carry a `<link>`.
It is powerful combined with a 103 Early Hints response: while the server prepares the final response, sending `Link: rel=preload` early with a 103 lets the browser fetch resources during that wait, improving perceived load time. After HTTP/2 Server Push was effectively deprecated, this combination became its replacement.
Link: <uri-ref>; rel=<relation>[; <param>=<value>]*e.g. Link: </style.css>; rel=preload; as=style
rel=<relation> | The link relation type: `preload`, `preconnect`, `dns-prefetch`, `prefetch`, `canonical`, `next`, `prev`, `alternate`, etc. |
rel=preload | Tells the browser to fetch a resource needed by the current page early and at high priority; requires `as=` for the resource type. |
rel=preconnect | Warms up DNS, TCP, and TLS to a given origin so later requests to it are faster. |
as=<type> | The destination type for a preload (script, style, font, image, ...); it sets priority, CORS, and acceptance. |
crossorigin | Required when preloading CORS resources such as fonts; omitting it causes a duplicate fetch. |