search

opennextjs / opennextjs-netlify

Open Next.js adapter for Netlify
https://opennext.js.org/netlify
676 stars 86 forks source link

Improve next/image performance #155

Closed lindsaylevine closed 3 years ago

lindsaylevine commented 3 years ago

This issue follows up https://github.com/netlify/next-on-netlify/issues/70. Initial support for next/image was merged in https://github.com/netlify/next-on-netlify/pull/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 commented 3 years ago

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

lindsaylevine commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Hey @lindsaylevine!

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

lindsaylevine commented 3 years ago

@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 commented 3 years ago

That's great news thank you @lindsaylevine!

jlengstorf commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

lokmanm commented 3 years ago

Super excited about this, thanks to everyone at Netlify 🎉

JeroenReumkens commented 3 years ago

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 commented 3 years ago

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

GBrachetta commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

GBrachetta commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

🎉 🎉 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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

🎉 🎉 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!