谷歌 Lighthouse 加载 WebP 图像出错。

Question

我正在努力提高我的Google Lighthouse性能得分。它建议使用下一代图像格式，包括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或浏览器不支持时会回退到原始图像。然而，Lighthouse报告显示了一个错误，所以我不能确定我是否已经正确地实施了一切。这个错误是什么意思？

- Billy Moon

---

这个失败时，Nginx 日志有记录吗？另外，当测试发生时，您在浏览器控制台和网络选项卡中是否看到任何信息？ - Tarun Lalwani

还有看看这个能否帮到你？https://github.com/igrigorik/webp-detect - Tarun Lalwani

如果可能的话，您能分享一下您正在测试的网站的URL吗？ - Saiprasad Balasubramanian

@billy moon，我的赏金在哪里？我在赏金还未关闭时回答了问题。 - mario ruiz

@marioruiz 我一直在等待重新部署，直到赏金过期后才能验证您的答案。现在我无法将其授予您，看起来赏金已经丢失了 :-/ - Billy Moon

Answer 1

请将您的灯塔更新至2.4版本及以上

在之前的版本中，webp扩展名无法正确处理

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

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

- mario ruiz

Answer 2

可能是因为NGINX没有使用正确的image/webp MIME类型来提供它们。

尝试将以下内容添加到文件/etc/nginx/mime.types中，并重新启动服务器：

types {

    image/webp webp;

    ...
}

- Martin Zeitler