Why isn't my javascript & css caching ?

Question

It's appears ONLY javascript and css are not caching ... but images are caching.

I am using Firebug and when I refresh the page, I notice in Firebug a lot of 200 HTTP responses for js/css but am receiving 304 HTTP codes (content not modified) for all of my images. So it appears that my JS and CSS are not caching.

Also, when using YSlow to help determine the problem with my JS/CSS content not caching, it informs me that:

There are 4 components with misconfigured ETags

• http://www.example.com/css/basic.css
• http://www.example.com/js/ga.js
• http://www.example.com/js/dojo/dojo.js

Listed below is my .htaccess file

Options -Indexes
Options +FollowSymLinks  

# Enable ETag
FileETag MTime Size

# Set expiration header
ExpiresActive on
ExpiresDefault "access plus 1 week"

# Compress some text file types
AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript application/json

# Deactivate compression for buggy browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Set header information for proxies
Header append Vary User-Agent

Any idea what's wrong with my .htaccess access file preventing it from caching my CSS or JavaScript?

Answer 1

Yes, it is correct and well-known behavior (maybe not really needed).

Read http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html about ETag.

Probably you want to just disable ETag on server.

Edit: Also, use LiveHTTPHeaders addon to understand, what your browser does. It works better then FireBug for this task.

Answer 2

I experiences the same problem as you. Removing the etag will work.

Add the following in the config file: FileETag none

Answer 3

Hi I had the same trouble. But just putting in FileETag none didn't work

The way I fixed it (and I don't know if this is correct - but it works) was I put the

FileETag none

at the bottom of my htaccess file.

Then ySlow was happy.

Answer 4

YSlow reports misconfigured etags if they don't adhere to a certain pattern. Since you're compressing the css and js, the etags are being output something like this:

Etag "1e10-4889909861a80"-gzip

See the -gzip at the end? It's put there by apache (version 2 only). That is what's causing the "error". YSlow expects to see something like this:

Etag "xxxx-xxxxxxxxxxxxx"

Bascially, you can't fix this because it's not broken. So don't go crazy trying to get a perfect score if you don't know what your doing. Even that yahoo home page only gets a 90.

Answer 5

This YSlow error message is extremely misleading!

YSlow is actually complaining that you are using ETags at all!

YSlow runs in your browser--it has no way of knowing if ETags are configured correctly or not. As a rule of thumb, it is saying that you shouldn't use ETags because you are more likely to have them misconfigured than properly configured in a multi-server environment. (And YSlow is aimed at users with large, multi-server websites.)

Of course, if you're on a single-server setup, or if you're on a distributed server setup but know what you're doing, then ETags are just fine. But YSlow has no way of knowing this.

There is lots of discussion of this in the comments of the error description page that you should check out: http://developer.yahoo.net/blog/archives/2007/07/high_performanc_11.html

Also I found this answer on ServerFault that reiterates the point: http://serverfault.com/questions/55919/yslow-says-etags-are-misconfigured-how-to-configure-etags-properly-on-iis7