Site slow to load, and some but not all images won't load with 502 bad gateway error

Netlify URL:

As the title states, my site is very slow to load, and most of the images aren’t loading, but oddly a couple are loading (albeit slowly).
I’m using NextJS and am new to both NextJS and Netlify, so I’m sure it’s something I’ve done wrong, but I haven’t found anything obvious while looking through the Netlify docs.

The deploy logs show the build process successful, but when I access the site, most of the images that are being loaded using NextJS’ tag are giving 502 bad gateway errors. Images that load via the standard tags are loading fine.

My github repo is private, I’m using Yarn berry, and I believe my build/deploy settings are all Netlify’s default settings for a NextJS app.

I’ve uploaded a screenshot showing the errors present in my browser console:
Screen Shot 2023-05-12 at 1.50.48 PM

Let me know if I should add the deploy logs.

Any help is appreciated!

As a follow up, I seem to have resolved the images not loading issue, but they still load crazy slow.

In case this can help anyone else, I did the following:

  • Scaled the cover images down as they were quite large
  • Converted the cover images to webp

Next.js Images use On Demand Builders. The initial load would definitely take long as it needs time to generate the image, but subsequent loads should be cached, thus faster. If that’s not happening, please share a HAR file to investigate.

Hi, thanks for the follow-up.

I am aware of the caching mechanism with NextJS, although not entirely sure how it works, but they just wouldn’t load at all before.

After converting them to webp and reducing the resolution as well as lowering the image quality, they seem to be loading fine now. I hadn’t originally bothered to check the cover-art sizes, but they were actually quite huge! They’re now much smaller, so … lesson learnt I guess! :slight_smile:

Thanks for sharing this insight with the community!