http header if not modified help

Question

I am having a little trouble with sorting out my HTTP headers for my sites. I am currently setting up Varnish on my server and so trying to get everything working correctly.

All my sites are WordPress except for one which is Joomla if this makes any difference.

The query I have is that I am trying to sort out browser caching with HTTP headers. Some of the sites are fairly large and I think it would help to cache as much as I can. I can do this with max-age however, I am having issues with getting the browser to refresh the content after it has changed, whether this is the actual HTML or CSS.

Here are my response headers of the HTML:

Accept-Ranges: bytes
Age: 2
Cache-Control: max-age=3, must-revalidate
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 6451
Content-Type: text/html; charset=UTF-8
Date: Tue, 02 Feb 2016 19:48:29 GMT
Expires: Tue, 02 Feb 2016 19:48:29 GMT
Last-Modified: Tue, 02 Feb 2016 19:48:13 GMT
Server: Apache
Vary: Accept-Encoding,Cookie
Via: 1.1 varnish
X-Cache: HIT
X-Varnish: 1571572700 1571572688

Obviously at the moment, I have a max-age of 3 which isn't ideal as after 3 seconds, Varnish records a miss.

Here is the response header for the CSS file

Accept-Ranges: bytes
Age: 77
Cache-Control: max-age=604800
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 30070
Content-Type: text/css
Date: Tue, 02 Feb 2016 19:49:30 GMT
Expires: Thu, 03 Mar 2016 19:48:13 GMT
Last-Modified: Fri, 29 Jan 2016 12:59:15 GMT
Server: Apache
Vary: Accept-Encoding,User-Agent
Via: 1.1 varnish
X-Cache: HIT
X-Varnish: 1571572717 1571572659

It does work as it's hitting Varnish, but if I change the stylesheet then it won't refresh for 7 days which is annoying if I need to make a quick change to something.

This same rule applies if the max-age for the html isn't 3 but something better like 1 day.

Is there a way to have a long max-age for the above, but if the CSS file or HTML on the WordPress pages has been changed, then it'll show this instead of the stale files.

I have been trying for most of the day to sort this out and whilst it may seem like a simple tweak to the .htaccess file, I can not seem to get it to work properly.

Any advise or pointers would be greatly appreciated.

Thanks

Answer 1

For the HTML files, you can't have it both ways. The only way for Varnish to always show HTML files if they've changed would be to check every time (=cache miss), at which point you've not gained anything by using it. If your site changes very frequently, setting a short cache time like you have is probably the best you can do (although 3 seconds might be a bit too short). Personally I don't usually bother caching HTML files except on high traffic sites.

For static assets like stylesheets, ideally you want the URL to change when the file does. The simplest way to do this is to include the last modified timestamp in the URL for the stylesheet. I don't use Wordpress, but I'd be surprised if plugins don't exist that will automate this for you. Then you can set very high max-age values and the content will always be fresh.

Also, don't use both max-age and expires headers - stick to one or the other.