next/imageでwebpを取得する時、通信量が15-18kBにも関わらず、10秒以上かかります

Question

エビデンス

以下が該当の写真です。これはnext/imageで20MBほどあるpngの写真をAWSのS3から取得している様子です

ご覧いただいてわかる通り、next/imageがwebpでうまく最適化して画像を取得していますが、なぜか遅いです。
記載されている通り17kB - 25kBの通信量であればもっと早く、ms単位で取得できると期待しておりました。

インターネット速度は十分高速なはずです

該当のコード

<NextImage src={imageUrl} alt="design" width={100} height={100} />

のような感じで標準的な使い方をしており、特にconfigにも特別な設定はしておりません。

module.exports = {
  images: {
    domains: ['取得先のドメイン'], 
  },
};

質問したいこと

• なぜ遅いのか
• どうすれば早くなるのか

Answer 1

こちらに挙動が詳しく書いてあります。
Next.jsのnext/imageコンポーネントの使い方と注意点

Next.js が動いているサーバ（vercel とか）から URL に一旦画像を読みにいって、サーバで最適化した後に webp などを返すようにできているようです。キャッシュが効くのでリロードすると期待した速度で表示されるでしょう。

Comments

[Daimian]

ありがとうございます！私の学習不足でした。大変助かりました。