Add Link HTTP headers #5455
Description
Describe the problem
With Chrome's stable version v103 now integrating RFC 8297 Early Hints, web hosts have started to take note.
Among them is Cloudflare, who supports Automatic Early Hints without making any changes to code (aside from returning a header). It works like this:
- on first request, client returns regular response with a Link header indicating resources the current page depends on. Cloudflare stores this in a non-expiring cache
- on subsequent requests, they transform the Link header into a 103 Early Hints response, serving it as soon as they can (before the real response)
- when the actual response comes through (from an origin server or Worker) they compare the Link header. If things have changed, they update the cache
SvelteKit relies on lots of small JS files, so allowing these to be returned in the Link header (and benefit from 103 Early Hints on Cloudflare) would likely allow a large speed improvement, especially if the webserver or Worker/Pages Function takes a while to return the response (database lookups etc).
Although relatively new, Early Hints look very promising. Some articles:
- https://kian.org.uk/implementing-103-early-hints-with-cloudflare-workers-htmlrewriter/
- https://developer.chrome.com/blog/early-hints/
- https://blog.cloudflare.com/early-hints/
Describe the proposed solution
In order for Cloudflare's Automatic Early Hints to work properly, the resources the current page depends on must be returned in a Link header with the regular response.
This is currently impossible with SvelteKit because there is no way to access the manifest. Were there a way to access the manifest (containing which JS files are needed for each route), this could be done inside a hook or similar. E.g:
// DOES NOT WORK, PROOF OF CONCEPT
export async function handle({ event, resolve, manifest }) {
const response = await resolve(event);
for(const jsFile of manifest[event.url.pathname])
{
response.headers.append("Link", `<${jsFile.url}>; rel=preload; as=script`)
}
return response;
}Alternatives considered
One alternative could be doing this automatically (without user integration). This is actually a good idea except that:
- some platforms don't care about the Link header so this would be extra work by the server
- some users might not want to prefetch certain files for one reason or another
Perhaps a flag in the config might work?
Another alternative would be to make this adapter-specific (i.e. implemented in adapter-cloudflare and when adapter-auto detects it is running on Cloudflare).
Importance
nice to have
Additional Information
No response