wordpress - 如何基于接受 header (上光)缓存Webp图像

Question

TLDR；

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

服务器设置

Ubuntu 18.04.2

Nginx 作为 ssl 终止符 (:443)

Varnish 用于更快的传输 (:80)

Apache2 作为后端，因为特殊的 htaccess 要求 (:8080)

Wordpress 网站

用于 html 缓存的“wprocket”插件

“WebP Express”插件动态提供 webp 图像(默认模式)

核心和插件是最新的

问题

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

不需要的解决方案

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

我试过的东西

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

尝试了来自“WebP Express”插件的常见问题解答中的“我在 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>

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

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