Improve next/image performance

[lindsaylevine]

This issue follows up netlify/next-on-netlify#70. Initial support for next/image was merged in netlify/next-on-netlify#138. However, that initial support is not performant since the Netlify function will re-run on every request without any caching.

Our next step is to improve this performance with caching. This will depend on internal work at Netlify. Please follow this issue for updates on next/image performance!! :)

[MaximeHeckel]

Thank you for the update @lindsaylevine! 🎉 Is there a timeline you can share until better caching / performances becomes available?

[lindsaylevine]

hey @MaximeHeckel! my understanding as of right now is that we may not see the internal caching functionality we're looking for until 1-2 months out :( this is because the team is heads down working on other priorities. if i can help speed this up at all, i will! and if there are any updates, i'll be sure to report them here. in the meantime, we suggest in the README (per netlify/next-on-netlify#138) using a provider like Cloudinary. hope that helps!!!

[MaximeHeckel]

Thank you @lindsaylevine! So excited to see this happening 🎉 And no worries, this is a dependency on some personal work I can easily postpone, I'm not in a rush 😄

[MaximeHeckel]

Hey @lindsaylevine!

Are there any updates you could give regarding the progress the Netlify team has made on this issue?

[lindsaylevine]

@MaximeHeckel heyo. we're still technically at the same crossroads we were at before. however! we have had many, many conversations internally about the right way to approach caching problems like this one, with a clear proposed solution. can't share too much but just know it is moving, and we're making sure we're doing it right and staying aligned with netlify's philosophy. will be worth the wait! let me know if i can answer anything else <3

[MaximeHeckel]

That's great news thank you @lindsaylevine!

[jlengstorf]

hey, @MaximeHeckel! we have an experimental feature in development that we think helps here [edit: dang, y'all email fast. removing the details now 💜 ]

[lindsaylevine]

a very big shoutout to jason (@jlengstorf) who's been hugely responsible for all of the work that's gone into next/image support from day one and who's been overall instrumental in helping with next-on-netlify's toughest problems!!! ❤️

[MaximeHeckel]

Hey @jlengstorf that would be amazing 🔥 ! sending you an email right now!

[lokmanm]

Super excited about this, thanks to everyone at Netlify 🎉

[JeroenReumkens]

Yesss! Can not wait 😁 I’ve tried this a week back and stumbled across this issue. Stoked that there might be a solution already this quickly! 🚀

I’ve sent you an email Jason. Love to try it out.

[juliefleet]

Hey @lindsaylevine,
Any update on a release date for this feature? 🙏
Thanks!

[GBrachetta]

Looking forward to the release.

Just deployed a Next.js app to Netlify with 2 very small <Image /> components (no more than 50KB each) and they take a ridiculous amount of time to render: up to 3s for 36Kb after <Image /> optimisation! In this case I will obviously use an <img /> tag, but I'll soon need to deal with a lot more images and <Image /> seems to be unusable on Netlify.

Also noticed that the very same repo, same viewport, on a deployment on Vercel loads instantly and images are optimised in size to half of what Netlify does. I'm puzzled.

[lindsaylevine]

@GBrachetta @juliefleet and everyone - thanks so much for your patience! last week we had two lucky folks from this thread test out our solution. on/around april 13th, we'll be able to finally offer it to everyone. 👀 hang tight!

[kpfromer]

I have been watching this thread for a bit and I am super excited! Thanks for all the hard work @lindsaylevine !

[GBrachetta]

Thank you @lindsaylevine, looking forward to test it and compare it with Vercel's native solution.

Will this require any action from us once it's been released (rebuild/redeploy or reinstallation of the plugin)?

[lindsaylevine]

@GBrachetta

if you have your plugin installed at a fixed version (i.e. you npm installed it), then you'll need to upgrade the plugin version with the new release (when it happens).

if you just have the plugin installed via your .toml file or the UI or it's auto installed on your site, then you're good to go and no action necessary!

[lindsaylevine]

hello all! for those who haven't seen: today netlify announced our first step towards solving the problems ISR/ISG originally set out to solve.

https://www.netlify.com/blog/2021/04/14/faster-builds-for-large-sites-on-netlify-with-on-demand-builders-now-in-early-access/
https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/

what i can offer you today is a tagged release of our plugin:
npm install --save @netlify/plugin-nextjs@experimental-odb

this release uses on-demand builders to dramatically improve next/image performance by caching next/image requests.

it is my hope to ship this as the primary release after a week or two of testing. at that time, i will close this issue :).

please let me know if you have any feedback or questions!! <3

[MaximeHeckel]

🎉 🎉 The improvements the team is making on this are just amazing!

I was testing one of the other experimental-release for next/image support but the @netlify/plugin-nextjs@experimental-odb has significantly improved the loading speed of my images!! It's getting closer to the point where I could use this in prod 🙌

Questions:

1. Is there going to be some sort of support for .gifs ? (It's not a huge deal honestly but just wondering because now they are rendering as static images)
2. I still have sometimes the following error:

errorMessage: "Response payload size (12809084 bytes) exceeded maximum allowed payload size (6291556 bytes)."
errorType: "Function.ResponseSizeTooLarge"

However the underlying image is relatively "small" : 370kB, and I can load some slightly heavier images. Any tips to handle these use cases? Could it be because the resolution of this image is fairly high?

[lindsaylevine]

@MaximeHeckel :D

1. i can look into the gif support, i think i accidentally left it out by mistake
2. what width height and quality are you passing for this image? not sure :/

[MaximeHeckel]

@lindsaylevine

1. Oh awesome! If by any chance gif support is not planned in the short term that's also totally fine
2. The original image is 1288 × 1254 and 373 KB. Regarding the props that I'm passing to the next/image component:

  src="/static/images/sunshine-settings-panel.png"
  layout="responsive"
  width={700}
  height={675}
  quality={50}

[AlexandraKlein]

🎉 🎉 The improvements the team is making on this are just amazing!

I was testing one of the other experimental-release for next/image support but the @netlify/plugin-nextjs@experimental-odb has significantly improved the loading speed of my images!! It's getting closer to the point where I could use this in prod 🙌

Agreed! Quite an improvement! Thanks, team!