wordpress - 如何（清漆）基于接受标头缓存 webp 图像

Question

TLDR；

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

服务器设置

• Ubuntu 18.04.2
• Nginx 作为 ssl 终结者 (:443)
• 清漆以加快传输速度 (:80)
• 由于特殊的 htaccess 要求，Apache2 作为后端（：8080）
• 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”插件的常见问题解答中尝试了“我在 NGINX”方法，但我陷入了该方法的第一步。而且我仍然认为这是错误的方法，因为它会循环环绕清漆，而不是通过清漆提供正确的版本。

我的问题

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

标签： wordpressnginxcachingvarnishwebp

Answer 1

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

我们只是将以下 3 行添加到.htaccessapache2 后端：

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

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

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