What are the trade offs between resource preload as a HTTP header or as a tag in the response?

Question

So a preload https://w3c.github.io/preload/ can be defined as a tag via declarative markup

<link rel="preload" href="/styles/other.css" as="style">

Or as a HTTP header

Link: <https://example.com/other/styles.css>; rel=preload; as=style

But what are the tradeoffs between the two? Under what circumstances should the tag be used and vica versa?

Micromho

Answer 1

Well, it should be kind of obvious. If it's in the HTML, you need to parse the HTML. That happens after parsing the headers, since you need the headers to know you're parsing HTML in the first place (and not, say, image/jpeg or text/plain).

Does this actually cause a performance difference in practice? That's quite impossible to tell in general, as with most performance questions. The main point is still separating I/O from execution, which is true for both approaches.

CDNs and proxies generally make use of headers for various access optimizations and caching. This is obviously cheaper than parsing the HTML, so maybe we'll see some recommendations to that effect :) For example, I can imagine a proxy that launches a preload based on the HTTP header before it even gets the HTTP header - just by observing common patterns in what kinds of requests usually mean what kinds of preloads. When the prediction fits, it can quite nicely eliminate latency in fetching this, especially on high-latency connections, and with long-running requests.

Hallerson