Slow image loading?

[sivertbjo]

Hi!

I am very much a noob when it comes to Next.js and Payload, so I will mark this as a question instead of an issue. :)

I am having trouble with very long image loading times. I am using Next.js in-built image optimization, and I am pretty sure I have that part set up correctly. I use the UploadThing storage adapter for PayloadCMS.

Any ideas? Feel free to check out the website and test for yourself: trefellingv4.vercel.app

Is it just the Vercel free plan that has too limited resources? The admin panel is also rather slow.

Thanks! :)

edit: typo

[sivertbjo]

My LCP is at about 6 seconds. All the content from MongoDB is lightning fast, but even the smallest image at 71kB loads after 3 seconds..

[matthijs166]

It's hard to pinpoint exactly what's going wrong and don't have the source code to see how it is set up at the moment.

In the frontend, the image URL being loaded on your site looks like this:
https://trefellingv4.vercel.app/_next/image?url=%2Fapi%2Fmedia%2Ffile%2FIMG_6927.JPEG&w=1920&q=75

It seems the process is as follows:

• Image on UploadThing
• Payload fetches the image
• Next.js retrieves the image from Payload, optimizes it
• Serves it to the user

Ideally, the image URL should be fetched directly from the backend:
https://trefellingv4.vercel.app/api/media/file/IMG_6927.JPEG

This would simplify the flow:

• Image on UploadThing
• Payload fetches the image
• serves it to the user

It might also be possible to use a CDN URL if UploadThing provides one. We use DigitalOcean Spaces, which offers a CDN-optimized URL for images.

• Image on UploadThing
• Serves it to the user

Finally, as far as I know, Next.js in-built image optimization is mainly for static images stored in the code repository. (Correct me if I’m wrong here.)

Images in payload can be optimized on upload via the https://payloadcms.com/docs/upload/overview#image-sizes

[sivertbjo]

You might be on to something..

const hero = await payload.findGlobal({ slug: "hero", fields: ["tittel", "tekst", "logo", "image"], });
<Image src={hero?.image?.url} alt={hero?.image?.alt} className="object-cover object-center" fill priority />

Here is how I am fetching the imageUrl. Perhaps this method is not correct?

[revnelson]

It depends on how you set up your cloudStorage config. In our cloudStorage plugin config, we use the generateFileURL option like this:

generateFileURL: ({ prefix, filename }) => `${S3_CDN_URL}/${prefix}/${filename}`

If you get that function to return a properly formatted string that points directly to your hosted image, the url returned from the payload query should be a direct one.