Google Lighthouse error loading webp images

Question

I am trying to improve my performance score on google lighthouse. It was recommending using next-gen image formats, including webp, so I implemented serving webp in place of images where the request accept header includes webp by using Nginx config something like this...

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;
}

Now the page loads much faster, and the webp method is working well, with fallback to original image where no webp exists or browser does not support it. However, the lighthouse report is showing an error, so I can't be sure I have implemented everything right. What does this error mean?

Answer 1

Update your lighthouse to version 2.4 onwards

On prior versions the webp extension was not handled correctly

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

If that's not working probably You might need to file an issue on Github