Google Chrome is not caching images

Question

I'm trying to optimize my application in Ruby on Rails, and I realized that the pictures in my application is what most long does it take to load, but I also noticed another problem, which is that google chrome isn't caching the images.

I noted this because in the Google Developers Console you can see that Google Chrome makes a request to load the images that are canceled before the images are truly loaded.

This can be seen here, first I open the Google Developers Console, then refresh the page and within the first requests there you can see the ones of the images, but they are canceled immediately.

After that you can see the requests that actually loaded the images.

I don't understand why is this happening if in the response headers you can see that the Cache Control is set to public with max-age = 31536...

I put the images in my application this way:

<div class="col-xs-3"><%= image_tag "#{@hero.id}/ability_1.png", class: "center-block"%></div>

And the images are organized in folders in app/assets/images

Is there a RoR way to fix this?

Edit: Now testing my app (which is in Heroku) in Windows I noticed that in fact Google Chrome caches the images sometimes, but it happens like the 50% of the times (and when I was in Ubuntu in development it didn't work a single time), while in firefox the first time the images are loaded, but the subsequent times I load the same view I can't even notice the reload, it's beatiful, Why google Chrome is not like that? Is normal that Google Chrome acts so weird?

Answer 1

The most important thing to realize when analyzing browser caching is the "Status Code". In your example, you can see you got a "304", which stands for "Not Modified" Which means the browser "could potentially use it's cache". So you ARE in fact caching. Caching != Not hitting your web server.

The definition according to Mozilla:

This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.

It sends the etag and last-modified to your web server, and your web server then looks at those meta and say "Nope, this file hasn't changed, so feel free to use your cache", and that's it. It actually does not send the file again. You can see that the "Size" is much less then when it's a "200" status code, where the web server IS sending the file, and the timing should me much shorter as well.

In Chrome you can force "non-caching" by checking the "Disable cache" option in the Network tab.

Hope that helps!

Answer 2

It looks like Chrome does handle image caching differently. What type of reload are you doing (following links, pressing enter in the address bar, Ctrl+r)? It looks like if you press enter in the search bar it will respect max-age but if you use Ctrl+r Chrome sets max-age to 0.

expires_in max-age cache control doesn't work

Chrome doesn't cache images/js/css