Closed
Description
Is your feature request related to a problem?
This is currently not possible to set an HTTP 103 Early Hint response for preloading assets, the browser have to parse the html first.
MDN: Doc: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103
Describe the solution you'd like
Ideally Qwik would check for prelaod
and preconnect
in the DocumentMeta
. If there are one, send a HTTP 103 Early Hint to the client so it can preload the request without having to wait for the document.
Example :
export component$(() => {
return <>
<header>
<img src="/large-img.webp" loading="eager" />
</header>
<main>
<img src="https://external-link" loading="lazy" />
</main>
</>
})
export const head: DocumentHead = () => {
return {
links: [
// Generates a <link> & HTTP 103 Early Hint preload
{
rel: 'preload',
href: '/large-img.webp',
as: 'image'
},
// Generates a <link> & HTTP 103 Early Hint preconnect
{
rel: 'preconnect',
href: 'https://external-link',
as: 'image'
},
],
};
};
Describe alternatives you've considered
Provide a way to add additional HTTP Responses of the page :
export component$(() => {
return <>
<header>
<img src="/large-img.webp" loading="eager" />
</header>
<main>
<img src="https://external-link" loading="lazy" />
</main>
</>
});
// Additional HTTP Response
export const HttpResponse = () => {
103: {
headers: {
Link: '</large-img.webp>; rel=preload, <https://external-link>; rel=preconnect'
},
}
}
export const head: DocumentHead = () => {
return {
links: [
// Generates a <link> & HTTP 103 Early Hint preload
{
rel: 'preload',
href: '/large-img.webp',
as: 'image'
},
// Generates a <link> & HTTP 103 Early Hint preconnect
{
rel: 'preconnect',
href: 'https://external-link',
as: 'image'
},
],
};
};
The main issue with this approach is "how to order the responses ?" 103 should be sent as fast as possible (before the document is resolved)
Additional context
No response
Metadata
Metadata
Assignees
Labels
Remove this label when implementation is completeRemove this label when tests are verified to cover the implementationRemove this label when all critical discussions are resolved on the issueRemove this label when the necessary documentation for the feature / change is addedRemove this label when at least 2 core team members reviewed and approved the RFC implementation