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?

Pikestaff

Any thing nginx logs when this fails? Also I would like to know if you see anything in browser console, network tab when the test happens – Brockway

Also see if this helps? github.com/igrigorik/webp-detect – Brockway

If possible could you share the URL of the site on which you are testing? – Charcuterie

@billy moon , where's my bounty? I answered when the bounty still was open. – Alisun

@marioruiz I was waiting for a redeploy and was only able to verify your answer today, after the bounty expired. There is no option for me to award it to you now, seems like the bounty is lost :-/ – Pikestaff

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

Alisun

Answer 2

Probably NGINX doesn't serve them with proper image/webp MIME type.

Try to add this into file /etc/nginx/mime.types and restart the server:

types {

    image/webp webp;

    ...
}

Gigantopithecus