Add prop to output preload tag

[nathanaelphilip]

It’d be nice to have a prop that outputs these preload links automatically as outlined here: https://web.dev/optimize-lcp/?utm_source=lighthouse&utm_medium=unknown#preload-important-resources

<link
  rel="preload"
  as="image"
  href="wolf.jpg"
  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
  imagesizes="50vw"
/>

[nathanaelphilip]

It may be easier to hook into this: https://www.npmjs.com/package/lazysizes

[frederickfogerty]

Hey @nathanaelphilip, actually I think this could be a great idea! I'll bring it up with the team and see if we can add this to the roadmap 👍 For now, you could potentially use the buildURL advanced API to generate this yourself

[jamiechong]

@frederickfogerty was there any discussion with your team to add this feature? It'd be super helpful for us. We've looked into trying to use buildUrl, but it hasn't really helped.

[frederickfogerty]

Hey @jamiechong, I am no longer an engineer at @imgix, please contact either @sherwinski or @luqven instead

[jamiechong]

@sherwinski or @luqven care to reopen this ticket?

[sherwinski]

Hey @jamiechong, I'm happy to re-open this and discuss with the team what a solution could look like. I can't guarantee a timeline right now but it is noted in our backlog for further investigation.

[luqven]

Hey @nathanaelphilip,

I wanted to quickly pick this issue back up.

I think this could lead to some great DX for folks who really care about loading background images as eagerly as possible. I'd love to chat more about how this could work and what it should look like.

Did you have a strong preference for how this should get implemented? I was thinking we just add the <link> tag as a child of the <Background> component with rel="preload".

[nathanaelphilip]

hi @luqven ; it’s been a while but I think you would just need to add a preload prop to the component. And then you could either pass the priority level to it preload="high" or have a separate prop for it: priority="high";

[tleunen]

Wouldn't this work only if the app is server side rendered though? Because otherwise, it would start loading it when the real image gets rendered. There won't be any benefits I guess.