Vary and Last-Modified headers

[paulirish]

via aaron peters at http://html5boilerplate.com/#comment-67835184

You can further improve browser and proxy caching, and thus page performance:

1. To ensure proxy caching of CSS and JS files, ensure you send the Vary: Accept-Encoding response header as well (not just the Cache-control: public header), if you send them Gzipped.

http://code.google.com/speed/page-speed/docs/caching.html#LeverageProxyCaching

2. Send the Last-Modified header, to enable browser to make conditional requests and enable the server to send a (small, fast) 304 response.
   Set the Last-Modified date to the last time the resource was changed.

http://code.google.com/speed/page-speed/docs/caching.html#LeverageBrowserCaching

[paulirish]

Related concern: the HTML should go out without an expires (just Last-Modified), but I was thinking about an ExpiresDefault. How can this sort of combo work?

[adeelejaz]

There are two ways I've tackled it in the past.

1. Instead of appending query at the end of the file (e.g. style.css?v=1), I append the version in the file: style-1.css Then using .htaccess I do a RewriteRule to map style-([0-9]+).css to css/style.css
2. When the resource (js or css) is fetched, I give the maximum expiry header which is 1 year. My reasoning is the css/js should be cached indefinitely and browsers don't send the HTTP request at all. If I have to replace it, I just bump the number in step 1 to: style-2.css This forces the browsers to fetch the new file.

I use the same approach on all static stuff e.g images, js, css etc

[paulirish]

Header append Vary Accept-Encoding - thx aaron peters.

closed by 9f9d6ee

[paulirish]

We can't do last-modified without a backend language, it appears.

adeel, your comments are good but we're tackling that issue via the build script.