I made this post before but it got removed due to the spam filter.
I ported my site to next.js with a prismatic headless backend. The files get statically generated but still, the images have a very long TTFB (4.2 sec). Last time I posted an attachment of the request the entire post got flagged as spam so I guess you just have to take my word for it.
The instance is " serene-colden-83caab" and there is no DNS so it’s all on the platform.
Could this have anything to do with the decoding="async" you have attached to each image? I’m not familiar with that attribute, and it’s not part of the HTML5 standard.
The images are being loaded by the Image component from Next.Js (next/image | Next.js). I will try and update the images to a native img tag, but I guess all Next.js project on Netlify would suffer the same issues.
I updated the site to use native img tags but it looks like Next.js automatically adds the async stuff. That said, it doesn’t seem to have any impact.
how large are these images, @vanbrabantf ? that is important to consider - our system is optimized to serve smaller assets as fast as possible, and you may not get the same results for larger files.
Hey Perry,
The bigger ones are around 550kb.
The blog can be found here: https://60688f8b6b4ca20c4f90f645--serene-colden-83caab.netlify.app/
hmm, that should be fine. anything over 4-5 mb would be something we would stream at a slower rate.
Would you mind capturing a HAR file for us so we can take a closer look at what your loading is doing?
Sure no problem. I’ve recorded the HAR, but the forum doesn’t allow me to upload it. How can I get it to you?
you might create a public google file link, or, you could upload it to your netlify project. could that work?
I added it to my Dropbox: Dropbox - 60688f8b6b4ca20c4f90f645--serene-colden-83caab.netlify.app.har - Simplify your life
Hi, @vanbrabantf. The two slow requests in that HAR file are not static files. The two slow requests are to a function at this URL:
https://60688f8b6b4ca20c4f90f645--serene-colden-83caab.netlify.app/_next/image
If you examine the logs for that function you can see that it is indeed sometimes slow:
https://app.netlify.com/sites/serene-colden-83caab/functions/next_image
I would recommend debugging that function to find out why this happens.
If there are other questions about this, please let us know.
Hey Luke. Thanks for looking at it. That function is the default way that Next.js renders images, so there isn’t a lot to debug here.
I just ported the site over to Vercel and everything works perfect there so I’m going to use Vercel over Netlify. Netflify was my first choice due to the great ambassadors they have but in the end I just want a working site.
Thanks for the time and effort.
@luke: for those of us considering using nextjs on netlify for an image-heavy site, is there a good alternative to using next/image?
Hey there, @jamie-performant ! Great question. Check out this thread for some helpful links related to next.js on Netlify and handling image-heavy sites.