Want to subscribe to topics you're interested in?
Become a Member

Nginx Nginx PageSpeed webp howto

Discussion in 'Nginx, PHP-FPM & MariaDB MySQL' started by alpine.link, May 9, 2020.

  1. alpine.link

    alpine.link New Member

    3
    0
    1
    May 9, 2020
    Leysin, Swiss Alps
    Ratings:
    +1
    Local Time:
    8:52 PM
    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
     
  2. eva2000

    eva2000 Administrator Staff Member

    44,163
    10,066
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,556
    Local Time:
    4:52 AM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    The webP page guide was written with intention of use without ngx_pagespeed as that module is disabled by default on Centmin Mod LEMP stacks. It doesn't account for ngx_pagespeed enabled webP conversion which would overtake webP conversion from the guided instructions anyway so it isn't intended to work with ngx_pagespeed webP conversion.
    Indeed you can :)

    The goal is to have a variety options for webP conversion so folks can do it as:
    • natively in Centmin Mod Nginx without ngx_pagspeed or cloudflare pro plan polish webP conversion
    • via Centmin Mod Nginx with ngx_pagespeed webP without cloudflare pro plan polish webP conversion. They can use pagespeed Disallow directive to selectively choose which webP conversions are done by ngx_pagespeed and/or by native Centmin Mod Nginx webp outlined guide
    • via cloudflare pro plan polish webP conversion
    • They'd all be mutually exclusive methods with intention not to overlap
     
  3. alpine.link

    alpine.link New Member

    3
    0
    1
    May 9, 2020
    Leysin, Swiss Alps
    Ratings:
    +1
    Local Time:
    8:52 PM
    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.
     
    • Informative Informative x 1