Question

I’m looking to collect data on page load speeds via Google Analytics, and would like to split this between pages that have been returned having HIT the Varnish cache, and those that have MISSED the cache.

Before looking into this I just assumed I’d get JS to have a look at the varnish headers in the page response, and create a GA custom var to track this on a per-page basis. Of course, JS doesn’t have access to the page headers, so I’m at a bit of a loss currently. I’ve made server-side GA tracking work ing the past (via php-ga) but this needs to tie in to real-world page load time.

Answer 1

Just a thought, but you could set a cookie in the “vcl_deliver” subroutine. Something like this:

sub vcl_deliver {
    if (obj.hits > 0) {
            set resp.http.Set-Cookie = "VarnishHit=Yes;Path=/;";
    }
 return (deliver); }

This basically says: if the obj has more than one hit, set a cookie saying so. You will need to make sure you do not over write any other cookies, so maybe just concatenate this to you existing Set-Cookie, if you are using cookies. For more info on the obj.hits look here:
https://www.varnish-cache.org/docs/3.0/reference/vcl.html

Here is the line that matters:

obj.hits
The approximate number of times the object has been delivered. A value of 0 indicates a cache miss. This variable is also available in vcl_deliver.

That will give you access to this information from within Javascript using the document.cookie variable. I believe that jQuery has some plugins to make this easier, here is one I found: https://github.com/carhartl/jquery-cookie on Google. Once you can check for the existence of the cookie in JS you should be able to use the GA API to log a event. I hope that helps.