Google Lighthouse 加载 webp 图像时出错答案

【问题标题】：Google Lighthouse error loading webp imagesGoogle Lighthouse 加载 webp 图像时出错
【发布时间】：2019-11-16 02:46:30
【问题描述】：

我正在努力提高我在谷歌灯塔上的表现得分。它建议使用下一代图像格式，包括 webp，所以我通过使用类似这样的 Nginx 配置实现了服务 webp 来代替请求接受标头包含 webp 的图像...

map $http_accept $webp_suffix {
  default   "";
  "~*webp"  ".webp";
}

server {
  root /www/;
  listen 80 default_server;
  index index.html;

  location ~* ^\/images\/ {
    expires max;
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
  }

  location / {
    try_files $uri $uri/index.html =404;
  }

  error_page 404 /404.html;
}

现在页面加载速度更快，webp 方法运行良好，在不存在 webp 或浏览器不支持的情况下回退到原始图像。但是，灯塔报告显示错误，所以我不能确定我是否正确实施了一切。这个错误是什么意思？

【问题讨论】：

失败时 nginx 记录的任何内容？另外我想知道您是否在测试发生时在浏览器控制台、网络选项卡中看到任何内容
也看看这是否有帮助？ github.com/igrigorik/webp-detect
如果可能，您能否分享您正在测试的网站的 URL？
@billy moon ，我的赏金呢？我在赏金仍然开放时回答了。
@marioruiz 我正在等待重新部署，今天只能在赏金到期后验证您的答案。我现在无法将它奖励给你，看来赏金已经丢失了：-/

标签： nginx webp lighthouse

【解决方案1】：

将您的灯塔更新到 2.4 版以上

在之前的版本中，webp 扩展没有被正确处理

https://github.com/GoogleChrome/lighthouse/issues/3364

如果这可能不起作用您可能需要在 Github 上提出问题

【讨论】：

【解决方案2】：

可能 NGINX 没有为他们提供正确的image/webp MIME 类型。

尝试将其添加到文件/etc/nginx/mime.types 并重新启动服务器：

types {

    image/webp webp;

    ...
}

【讨论】：