なぜ、50Bの通信のみで、323KBの画像を表示することができるのか教えてください！

Question

私は現在、Next.jsを使い、vercelを利用する形でサイトをwebサイトを作っています。

画像を10枚ほど載せた試験的なページをデプロイしてみたところ、画像の取得がとても早いことに驚きました。

画像のサイズは100kbから300kb前後のもの * 10枚なので、2~3秒くらいはかかるのかなと考えていたのですが、500ms以下で全てのローディングが完了しました。

devツールをみてみると、以下の画像の通り、
「50B transferred over network, resource size is: 323KB」とあります。

なるほど、50Bのみの通信量だから、取得までが早いのか、と理解したような気になったのですが、

そもそもなぜ、50Bの通信のみで、323KBの画像を表示することができるのか

わからなくなりました。

もしかすると基本的なプロトコル関連の質問になるかもしれませんがとても気になっています。

（そもそもこれがCDN（vercel）を使用したからなのか、Next.jsのpre-renderingの功績なのか、その辺りもよく分からず、質問している次第です）

ヒントだけでも結構ですのでご教示いただけますと幸いです
よろしくお願いします。

Answer 1

Status欄が200でなく304ではありませんか？
であれば、ネットワーク上はNot Modified情報だけです。

Comments

[Daimian]

ありがとうございます、304でした、キャッシュされてるということですね
キャッシュをリセットしたところ200で想定どおりにリクエストとなりました。。
初歩的な質問ですいません、ご回答感謝します

Answer 2

ちなみに transferred over network は今回やりとりした HTTP リクエストとレスポンス・ボディの合計。
resource size は取得したボディのサイズ (304 であるなら前回取得したボディのサイズ) であると思います。
たぶん。

Comments

[Daimian]

ありがとうございます、304でした、理解しました。初歩的な質問ですいません、ご回答感謝します