Caching Javascript and css in Apache

Javascript, css, Apache, ExpiresByType,expires_module

[Gopinath]

Hi,

To boost the performance of our website, we have decided to cache Javascripts and css too along with other static images.

Here is what I am doing

LoadModule expires_module modules/mod_expires.so
LoadModule headers_module modules/mod_headers.so

<VirtualHost x.x.x.x>
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 day"

[other site configurations goes here]
</VirtualHost>

This works fine for me. After the first request from a browser, the subsequent requests (soft refresh - F5)are served from cache. But I am wondering how do I refresh this cache once after I deploy a new Javascript or css.

I thought that a server re-start will do that. But didn't.

The only way to refresh this cache is to do a hard refresh (CTRL + F5) from the browser, which is not desired as we would like to get the users the latest changes as soon as we deploy them.

Any help would be greatly appreciated.

Thanks
Abhilash

[jdMorgan]

The cache belongs to the client. It won't re-load the new file until the expiry time you specified unless you also sent the HTTP Cache-Control "no-cache, must revalidate" header to force the browser to send a conditional (revalidation) GET request every time -- sending your server a "GET" request for every object, but containing an HTTP "If-Modified-Since" header. Your server can then reply with "304-Not Modified" or send a new replacement file and a 200-OK response.

Other than that, the solution is to set shorter expiry times (anything more than a week is usually futile), and if the change is a big important one, then change the included filename -- perhaps using the last-modified date in the filename.

Jim

[Gopinath]

Thanks Jim,

That solved the bigger part of the problem.
Here is my modified configuration
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 day"
Header append Cache-Control "no-cache,must-revalidate"

It returns a 200 for a hard refresh (Ctrl+F5) or if the file is modified.
For the soft refresh (F5), it always returns a 304, which is desired, assuming that a 304 will tell the browser that the file is not modified, and it can take from cache.

But, when I ran 'Page Speed' (Webmaster tool), it says that my js & css are explicitly non-cacheable and consider making them cachable.

Question: If my objects are non-cachable, with the above configuration, how am I getting a 304?

Thanks Again!
Abhilash

[jdMorgan]

They are not strictly-cacheable, they are only cacheable if the client checks back with the server to see if the cached version can be used (and the server sends a 304 telling the client it's OK to use that cached version.)

As stated before, a better solution is to use versioning on the CSS and JS files, so you don't have to deal with this problem. In this way, if a client loads a page, and that page includes new a JS or CSS file, the client will fetch it. And then that new file can be cached for a week or a month, and you don't have to worry about updates and caching and Page Speed. main100310.css might be "ugly", but no-one is going to see that filename except for you and anyone who cares enough to use View-Page-Source to see it...

Jim

[Gopinath]

Thanks Jim, again.

status: [SOLVED]