Search code examples
cachingnetworkinggoogle-chrome-devtoolsvercel

audio file network transfer size is lesser than resource size


I have a web app which uses audio file. Hosted it on vercel. The audio file size is 1.5mb. The first request in the network tab of the chrome dev tools , it shows the right size, 1.5mb(network transer) and 1.5mb(resource size). In the subsequent requests the file size is shown as 53 bytes(network transfer) and 1.5mb(resource size). I am not sure how the audio file went from 1.5mb to 53 bytes. It is same for other files as well like js bundle,css bundle. Did vercel compressed it?


chrome dev tools


chrome dev tools


Solution

  • In your screenshot you can see that the first response is 200, but the second response is 304, "Not Modified".

    That means that the server provided cache information along with the initial 200 response, the browser cached the file, and upon making the second request, included cache validation headers. The server responded that the file had not been modified since the last reqquest, so the cache is still valid and the file does not have to be transferred again.

    Using the cache instead of retransferring the same content again is a good thing for everybody involved, and shouldn't cause your application any issues.