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:
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.
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!
