How to (varnish) cache webp images based on accept header

2
votes

TLDR;

I'm upgrading my clients outdated server but I'm having trouble getting webp images cached (or not) based on the browser accept header. Varnish caches webp image until somebody with an old browser visit's the website. After that all (webp compatible) browsers get served the cached jpg image.

Server setup

  • Ubuntu 18.04.2
  • Nginx as ssl terminator (:443)
  • Varnish for faster transfer (:80)
  • Apache2 as backend because of special htaccess requirements (:8080)
  • Wordpress website
    • "wprocket" plugin for html caching
    • "WebP Express" plugin to dynamically serve webp images (default mode)
    • Core and plugins are up to date

Issue

When a webp supporting browser visit's the website (second visit after varnish cache clear) it get's served the image with extention .jpg, but when you check the headers for content-type it says "image/webp", just like the "WebP Express" plugin says it should. Varnish log's a "hit" so this is working fine. But when I now fetch the image in IE for example (does not support webp) and go back to chrome and do a refresh the content-type in the header now says "image/jpg" and logs a varnish hit. This is the unwanted behaviour. It should just serve the webp images on compatible browsers and the jpg version on older browsers. But they should be varnish cached because... (read below)

Unwanted solution

I've changed my default.vcl file to exclude png|jpe?g|webp files from caching. This "fixes" the issue ofcourse but increases the loading time again. Average loading time of test image with varnish: +/- 20ms. Average loading time of same test image without varnish: +/- 120ms. I know the difference is little, but on some gallery pages it's make a noticable difference. Therefore varnish cache should be enabled.

What I've tried

Adding a webp check to default.vcl I got from: https://github.com/igrigorik/webp-detect/blob/master/varnish.vcl --> Does not seem to do anything? (Yes I restarted varnish service)

Tried the "I am on NGINX" approach from the FAQ from the "WebP Express" plugin, but I get stuck in the first step of that approach. And I still think that is the wrong approach because it would loop arround varnish instead of serving the correct version through varnish.

My question

How do I approach this? Is it something with the "WebP Express" plugin settings? Is it something I have to add to the default.vcl file (that would be easiest). Maybe a combination of both? Or maybe something completely different? I'm stuck and any suggestions are welcome now.

1
wordpressnginxcachingvarnishwebp

1 Answers

2
votes

Me and my colleague spent some more time testing and researching this and we've seemed to have found the solution.

We simply added the following 3 lines to the .htaccess of the apache2 backend:

# Fix for serving webp in compatible browsers with "webp express" wordpress plugin
<IfModule mod_headers.c>
    Header append Vary "content-type"
</IfModule>

Restart varnish service after that and you'll see it in the headers too.

Now varnish consistently serves webp images in Chrome and other compatible browsers and jpg's in IE and other incompatible browsers.