CODEWITHSUNDEEP
nginxwebplighthouse
Billy Moon
Billy Moon

Reputation: 58541

Google Lighthouse error loading webp images

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?

lighthouse opportunities

Upvotes: 7

Views: 1119

Answers (2)

Martin Zeitler
Martin Zeitler

Reputation: 76699

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;

    ...
}

Upvotes: 0

mario ruiz
mario ruiz

Reputation: 1000

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

Upvotes: 1

Related Questions