Configuring Varnish to rewrite Expires/Cache-Control headers for client-side caching

cacheperformancevarnish

How do I configure Varnish so that all responses to requests matching say "*.css" gets cached in the client's browser for 30 days?

What I'm trying to achieve is making Varnish set the correct "Expires:" and/or "Cache-Control" settings so that all CSS:s are cached for 30 days regardless of what the backend says about the client-side cacheability of these objects.

Best Answer

This does the trick:

sub vcl_fetch {
  ..
  if (req.url ~ "\.css$") {
    set obj.http.magicmarker = "1";
  }
  ..
}

sub vcl_deliver {
  ..
  if (resp.http.magicmarker) {
    unset resp.http.magicmarker;
    set resp.http.Cache-Control = "...";
    set resp.http.Expires = "...";
    set resp.http.Age = "...";
  }
  ..
}

Related Solutions

Nginx – What headers to add for most efficient file caching

This is not related to caching but since you are comparing your headers to that of facebook I assume your concern is to improve the user experience of your site.

One this I see missing from your header is compression. nginx and other Webservers allow you to compress the content before sending it to the client, significantly reducing the amount total data transfer.

You can use the link below to configure compression on your instance of nginx.

http://www.devcha.com/2010/02/enable-gzip-compression-of-nginx.html

When doing compression be sure to handle older MSIE browsers which don't handle compression very well. There is more info in a Related post

Secondly, if possible use a different domain for your static content. This will reduce the client request size because the cookie will not be passed. Example Yahoo used yimg.com for its static content i.e JS,CSS, images

Nginx – Cache-control for permanent 301 redirects nginx

Have you tried Cache-Control flags in your nginx configuration ?

Sample configuration:

upstream yourappserver{
  server 0.0.0.0:6677;
}


proxy_cache_path  /tmp/cache levels=1:2 keys_zone=my-test-cache:8m max_size=5000m inactive=300m;

server {
    listen 80;
    server_name your.domain.tld;
    root /path/to/the/document/root/;

    access_log  /var/log/nginx/access.log;

    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_cache my-test-cache;
      proxy_cache_valid  200 404  1m;
      proxy_cache_valid 302 20m;

      proxy_cache_use_stale   error timeout invalid_header updating;
      proxy_redirect off;

      if (-f $request_filename/index.html) {
        rewrite (.*) $1/index.html break;
      }
      if (-f $request_filename.html) {
        rewrite (.*) $1.html break;
      }
      if (!-f $request_filename) {
        proxy_pass http://yourappserver;
        break;
      }
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
      root html;
    }
}

I think you are looking for this particular configuration snippet

proxy_cache_valid 302 20m;

Best Answer

Related Solutions

Nginx – What headers to add for most efficient file caching

Nginx – Cache-control for permanent 301 redirects nginx

Related Topic