如何基于接受标头（上光）缓存Webp图像

Question

TLDR;

我正在升级我的客户端过时的服务器，但是我无法基于浏览器接受标头来缓存（或不缓存）webp图像。 Varnish会缓存webp图像，直到有人使用旧的浏览器访问该网站为止。之后，所有（兼容webp的）浏览器都将获得缓存的jpg图像。

服务器设置

• Ubuntu 18.04.2
• Nginx作为ssl终止符（：443）
• 清漆以加快传输速度（：80）
• 由于特殊的htaccess要求（：8080），Apache2作为后端
• WordPress网站
  • 用于HTML缓存的“ wprocket”插件
  • “ WebP Express”插件可动态提供Webp图像（默认模式）
  • 核心和插件是最新的

问题

当支持浏览器的Webp访问网站（清漆缓存清除后的第二次访问）时，它将获得具有扩展名.jpg的图像，但是当您检查内容类型的标题时，它会显示“ image / webp”，就像“ WebP Express”插件说应该。清漆原木是“命中”的，所以工作正常。但是，例如，当我现在在IE中获取图像（不支持webp）并返回chrome并刷新时，标题中的内容类型现在显示为“ image / jpg”并记录了清漆命中。这是不想要的行为。它应该只在兼容的浏览器上提供webp图像，而在较旧的浏览器上提供jpg版本。但是应该将它们缓存为清漆，因为...（如下所述）

不需要的解决方案

我已将default.vcl文件更改为从缓存中排除png|jpe?g|webp个文件。这“解决”了路线问题，但又增加了加载时间。带清漆的测试图像的平均加载时间：+/- 20ms。没有清漆的相同测试图像的平均加载时间：+/- 120ms。我知道差别不大，但在某些图库页面上却有明显的不同。因此应启用清漆缓存。

我尝试过的事情

将webp检查添加到default.vcl中，我来自： https://github.com/igrigorik/webp-detect/blob/master/varnish.vcl->似乎什么都没做？ （是的，我重新启动了清漆服务）

尝试使用“ WebP Express”插件的FAQ中的“我在NGINX上”方法，但是我陷入了该方法的第一步。而且我仍然认为这是错误的方法，因为它会循环使用arround varnish，而不是通过varnish提供正确的版本。

我的问题

我该如何处理？ “ WebP Express”插件设置是否有用？是我必须添加到default.vcl文件中的东西（这是最简单的）。也许两者结合？也许是完全不同的东西？我被困住了，现在欢迎任何建议。

Answer 1

我和我的同事花了更多时间进行测试和研究，我们似乎已经找到了解决方案。

我们仅将以下3行添加到apache2后端的.htaccess中：

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

此后重新启动清漆服务，您还将在标题中看到它。

现在，清漆始终在Chrome和其他兼容浏览器中提供webp图像，并在IE和其他不兼容浏览器中始终提供jpg。