apache - 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 MSIE !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

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.