High waiting for server response time when using next/image

[ArianHamdi]

Before opening, please confirm:

• [x] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have checked to see if my question is addressed in the FAQ.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

App Id

d3akk1nl18rszx

AWS Region

us-east-1

Amplify Hosting feature

Not Applicable

Frontend framework

Next.js

Next.js version

13.5.1

Next.js router

Pages Router

Describe the bug

We are experiencing extended waiting times for server responses when utilizing next/image. This issue occurs sporadically, and I suspect it may be connected to the cold boot of the next/image lambda function. Consequently, our image loading performance has been severely impacted.

Here is an example of the issue:

This image is only 15KB in size, yet it takes a full 6 seconds to download. It's worth noting that we are also using the webp format for our images.

Expected behavior

Images should load as quickly as possible and not be delayed due to server response times.

Reproduction steps

1. Create a next.js app
2. Import some static images using next/image
3. Deploy the app on Amplify
4. Evaluate the performance of image loading (observe the presence of cold booting for images).

Build Settings

No response

Log output

``` # Put your logs below this line ```

Additional information

No response

[Jay2113]

Hi @ArianHamdi 👋 , thanks for raising this! I am currently investigating into this behavior and will keep you posted about any updates. In the meantime, can you share the following information:

• How sporadic is this behavior? Occurs every few mins, hrs, days etc.?
• Which image types are impacted? Or is it only impacting webp format images?
• Are you serving the static images from the public directory or from a different destination such as Amazon S3 etc.?

[ArianHamdi]

Hi @Jay2113 👋

1. Every time I clear the browser cache, I experience a delay in loading images. Sometimes it takes around 5-6 seconds on cold boots and 1-2 seconds on warm boots.

2. I tried the AVIF format, and it was much worse. The waiting time for a response reached 10-12 seconds. I also tried disabling both the webp and avif formats and serving images in their native format. While this solution increased the image size, the waiting time for the server response didn't change significantly and was close to when using the webp format.

3. I imported the images, so I think Amplify will store them on S3. However, we also have many on-demand images stored on S3, and the problem is the same for those. It is not related to static images only.

4. The Amplify documentation says that installing sharp is unnecessary, but I tried it both with and without sharp, and the results were the same.

I think we have two problems here:

1. The optimization process in next/image is very slow. It could be related to lambda resources or something else.
2. Next/image can't efficiently use the cache and re-optimize images.

Regarding the second issue, I found this comment from a Next.js maintainer, which points to the Vary header. Since Amplify appears to block many incoming headers for an unknown reason, ( and there is no way to configure accept-headers on Cloudfront ) it might be related to this accept-header.

Using AVIF format

[vafPER]

@Jay2113 Huge impact in our product. Quick update is appreciated.

[vafPER]

@Jay2113 Any update on this?

[ArianHamdi]

Hi @ArianHamdi 👋 , thanks for raising this! I am currently investigating into this behavior and will keep you posted about any updates. In the meantime, can you share the following information:

• How sporadic is this behavior? Occurs every few mins, hrs, days etc.?
• Which image types are impacted? Or is it only impacting webp format images?
• Are you serving the static images from the public directory or from a different destination such as Amazon S3 etc.?

Amazing customer support. It is one month without any answer. We will migrate to another platform as soon as possible.