Nginx Nginx PageSpeed webp howto

Hi there

I wanted to ask about the article Conditionally Serving WebP Images With Nginx

Are you sure that this code fragment works like you think? Maybe I did not understand what you were trying to do !

Code:

# webp extension support if you are converting /uploads images to webp
location ~ ^/wp-content/uploads/ {
  #pagespeed off;
  #pagespeed unplugged;
  #autoindex on;
  #add_header X-Robots-Tag "noindex, nofollow";
  location ~* ^/wp-content/uploads/(.+/)?(.+)\.(png|jpe?g)$ {
   expires 30d;
   add_header Vary "Accept";
   add_header Cache-Control "public, no-transform";
   try_files $uri$webp_extension $uri =404;
  }
}

It's suggested that pagespeed needs to be turned off ie

---

Is that how nginx works though? Is it not the case that when you request the page it is generated by the location block that handles, for example PHP? And when using pagespeed url's in that returned HTML are now written in pagespeed format.

For example, image-name.png is rewritten to image-name.png.pagespeed.ic.C-hJZePHgn.webp. To render the page the browser now requests image-name.png.pagespeed.ic.C-hJZePHgn.webp which would be handled by pagespeed converting the image on the fly.

And that would mean that this is never exercised:

Code:

try_files $uri$webp_extension $uri =404;

I would suggest what you are actually trying to achieve is not rewriting the original HTML which you might do inside your server block:

Code:

pagespeed Disallow "*jpg";
pagespeed Disallow "*jpeg";
pagespeed Disallow "*png";

This would stop pagespeed re-writing the image URLS which I think is what you're actually trying to achieve.

The nginx map to control the Cloudflare cache looks odd as well. It's probably not going to play nicely with this at all but I think what you're trying to do might be better done in the location block for the rewritten webp images, something like:

Code:

location ~* \.(jpeg|jpg|png)$ {

        add_header Cache-Control no-cache;
       expires 1s;
  try_files      $uri$webp_suffix $uri =404;
  access_log     off;
  log_not_found  off ;

}

It's tricky, if you use cloudflare then it's natural to be concerned about this but it's a bit incomplete to recognise that upstream caching is a problem and then turn it off for that one single example. If are concerned about upstream caching then it really ought to be addressed systematically.

Really pagespeed doesn't do such a bad job of creating those webp versions. I find the compression/quality it gets is within sight of pre-creating them. There's some load associated with that of course. And solutions like pagespeed and CDN's rarely work like people think they do, generally the cost of keeping the cache hot is higher than assumed and probability of an entry being stale far greater than assumed assumed especially on a CDN.


Incidentally, you can create the webp images in a single line:

Code:

find /var/www/html/*/wp-content/uploads/2* \( -name "*.jpg" -o -name "*.jpeg"  -o -name "*.png" \)  -exec sh -c "[[ ! -f {}.webp ]] && echo {}  " \;|while read jpg;do printf "$jpg " ; /usr/libwebp-1.1.0-linux-x86-64/bin/cwebp -short $jpg -o $jpg.webp ; done

 

It might be better to update the article to say that I think. It's well written article with a lot of good information that ranks nicely on Google. But the details about pagespeed are misleading. It's not the case that it's a missing comma or semi-colon, it's that nginx with pagespeed itself doesn't work like that.

I also think since you raise the problems of an upstream cache it might be worth fully exploring it. Trying to use content negotiation in this way with cloudflare or any upstream cache is quite problematic. Some users may find the jetpack CDN serves their purpose better actually and is a more common use case.

Pagespeed is a great tool, it may be a better way to produce webp resources for many people. It's certainly cheaper than paid services.