cache-control not working without etag

Question

I am sending the following header in the reponse. "Cache-Control: public, max-age=300", but still every time I hit refresh I get a 200 response(the request is made to he server again). Same happens if I add the "Expires" header.

But if I add a ETag to the headers, then I get 304 on refresh(the request goes to the server, the server prepares the response, then matches the ETag and returns a 204 response).

What should I change so that "Cache-Control" header is used and the content is served from local cache and no request is sent to the server until the age becomes more than "max-age"?

EDIT: Here is an image that doesn't get cached https://image-dev-dot-quizizz-dev.appspot.com/resource/gs/quizizz-image/rejected.jpeg

Answer 1

Your image is in proxy cache - notice that in a response you get Age header. Furthermore, every next request in 300 seconds takes much less time. Why is the status not 304? According to this article:

200 (from cache) vs 304

Now the other day while performing a site performance audit I noticed that a lot of our assets were returning 304 statuses. While comparing another site I noticed that it was returning a 200 (from cache) status code. This intrigued me and I wanted to dig deeper.

It turns out that when a 200 (from cache) response is given it means that a future expiration date on the content is set. In essence the browser doesn’t even really communicate with the server to check on the file. It knows not to do it until the expiration date has expired.

By contrast a 304 goes to the server and receives a response back that the data has not change. The server is telling the browser to use the cache as a result.