Why isn't my javascript & css caching?

问题:

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?

回答1:

Please, consider disabling ETag's!

Consider the following settings:

Header unset ETag
FileETag None
Header set Cache-Control "max-age=2678400"

The first two rules disable ETag's completely, so the browser is somewhat forced to listen to the Cache-Control header. The last rule tells the browser to cache the file 2678400 seconds, or 1 month. Tweak the settings to what suits you the most. And apply this configuration on your dir which contains the static files (by, for example, placing an .htaccess file in that dir)

Optional, if your using multiple servers to serve static content, and/or are not sure about the last-modified times those servers report, consider using:

Header unset Last-Modified

It tells Apache to not serve any Last-Modified headers, so browsers can only listen to the Cache-Control max-age header.

This settings are used by myself on lots of hightraffic websites, and disabling of ETag's and Last-Modified headers sure helped to drive traffic down to one fifth of what it used to be. Especially Internet Explorer is very sensitive to those settings.

Be warned: Disabling Last-Modified will stop browsers from asking 304 Content Not Modified requests. In my experience this is positive, because the webserver has less requests to process, and browsers rely more on the Cache-Control settings you serve. But it may or may not suit you. Some browsers will try to validate assets every few minutes if you serve them a "Last-Modified" header, and that's why I would advice to disable the use of it completly.

Oh, and if you're not sure about your caching; use http://www.redbot.org/ to test your assets, it tells you quickly what your headers mean to a browser, and how to interpret different cache-control settings you use.

回答2:

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.

回答3:

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: https://serverfault.com/questions/55919/yslow-says-etags-are-misconfigured-how-to-configure-etags-properly-on-iis7

回答4:

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

Add the following in the config file: FileETag none

回答5:

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 than FireBug for this task.

回答6:

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.