加载webp图像时出现Google Lighthouse错误

Question

我正在努力提高我在谷歌灯塔上的表现分数。它建议使用下一代图像格式，包括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或浏览器不支持webp的原始图像。然而，灯塔报告显示了一个错误，所以我不能确定我是否正确地实现了所有内容。这个错误是什么意思？

​

​

Answer 1

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

在以前的版本中，未正确处理webp扩展

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

如果这不起作用，你可能需要在Github上提交一个问题

Answer 2

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

尝试将此文件添加到文件/etc/nginx/mime.types中，然后重新启动服务器：

types {

    image/webp webp;

    ...
}