wordpress - 如何( Varnish )基于接受 header 缓存 webp 图像

Question

TLDR；

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

服务器设置

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

问题

当支持浏览器的 webp 访问该网站时(清除 Varnish 缓存后的第二次访问)，它会提供扩展名为 .jpg 的图像，但是当您检查内容类型的 header 时，它会显示“image/webp”，就像“WebP Express”插件说它应该。 Varnish 日志很受欢迎，所以它工作得很好。但是，当我现在在 IE 中获取图像(不支持 webp)并返回 chrome 并刷新时，标题中的内容类型现在显示“image/jpg”并记录 Varnish 命中。这是不受欢迎的行为。它应该只在兼容的浏览器上提供 webp 图像，在旧浏览器上提供 jpg 版本。但它们应该被 Varnish 缓存，因为......(阅读下文)

不需要的解决方案

我已更改 default.vcl 文件以从缓存中排除 png|jpe?g|webp 文件。这当然“解决”了问题，但再次增加了加载时间。带 Varnish 的测试图像的平均加载时间:+/- 20ms。无 Varnish 的相同测试图像的平均加载时间:+/- 120ms。我知道差异很小，但在某些图库页面上差异显着。因此应启用 Varnish 缓存。

我尝试过的

将 webp 检查添加到我从以下位置获得的 default.vcl: https://github.com/igrigorik/webp-detect/blob/master/varnish.vcl --> 好像什么也没做？ (是的，我重新启动了 Varnish 服务)

尝试了“WebP Express”插件常见问题解答中的“我在 NGINX”方法，但我陷入了该方法的第一步。我仍然认为这是错误的方法，因为它会在 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>

之后重新启动 Varnish 服务，您也会在标题中看到它。

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