Google Lighthouse 加载 webp 图像时出错

Question

我正在努力提高我在 google 灯塔上的表现得分。它建议使用 next-gen 图像格式，包括 webp，所以我实现了服务 webp 代替图像，其中请求接受 header 包括 webp 通过使用像这样的 Nginx 配置...

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 或浏览器不支持的情况下回退到原始图像。但是，灯塔报告显示错误，所以我不能确定我是否正确实施了所有内容。这个错误是什么意思？

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;

    ...
}

Google Lighthouse 加载 webp 图像时出错

Google Lighthouse error loading webp images

nginx

webp

lighthouse