Learn about Centmin Mod LEMP Stack today
Register Now

Wordpress Cloudflare Polish issues

Discussion in 'Blogs & CMS usage' started by ct_roy, Feb 18, 2021.

Tags:
  1. ct_roy

    ct_roy Premium Member Premium Member

    39
    6
    8
    Jun 21, 2020
    Ratings:
    +11
    Local Time:
    9:31 PM
    1.17.10
    10.3.22
    So I've enabled CF Polish on one of my test subdomains and noticed that Polish wasn't doing it's thing.
    After digging around the cmm nginx config files I noticed that all images had the "no-transform" header (in addition to the Vary "accept" header).
    Further digging narrowed this down to wpsecure_mydomain.com.conf

    I made a couple of tweaks as follows:
    - commenting out the no-transform and Vary "Accept" headers
    - adding gif to the image list
    - extending the expires to 365d (to keep Google Pagespeed Insights happy)

    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/(.+/)?(.+)\.(gif|png|jpe?g)$ {
        expires 365d;
        #add_header Vary "Accept";
        #add_header Cache-Control "public, no-transform";
        add_header Cache-Control "public";
        try_files $uri$webp_extension $uri =404;
      }
    }
    CMM version:
    123.09beta01.b616

    With my tweaks above, webp's are being generated where relevant (and smaller than the original source).

    I'm guessing I shouldn't need to do this?
    I know CF doesn't support vary and you've got code in place that detects CF - but does that also impact a pro account as per above?

     
  2. eva2000

    eva2000 Administrator Staff Member

    48,519
    11,116
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +17,306
    Local Time:
    6:31 AM
    Nginx 1.21.x
    MariaDB 10.x
    Yes CF all paid and free accounts do not support webp generated at Centmin Mod origin if the webp image uses same extensions as non-webp image. So for CF Polish to work you need to disable webp serving on Centmin Mod origin side.
     
  3. ct_roy

    ct_roy Premium Member Premium Member

    39
    6
    8
    Jun 21, 2020
    Ratings:
    +11
    Local Time:
    9:31 PM
    1.17.10
    10.3.22
    In my scenario I didn't *think* I had enabled webp serving! How do I disable it and I'll check if I had enabled it at some point.
     
  4. eva2000

    eva2000 Administrator Staff Member

    48,519
    11,116
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +17,306
    Local Time:
    6:31 AM
    Nginx 1.21.x
    MariaDB 10.x
    with this in place
    Code (Text):
    # 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/(.+/)?(.+)\.(gif|png|jpe?g)$ {
       expires 365d;
       #add_header Vary "Accept";
       #add_header Cache-Control "public, no-transform";
       add_header Cache-Control "public";
       try_files $uri$webp_extension $uri =404;
      }
    }
    

    it will auto enable if you installed a Wordpress plugin to do webp conversion on the server side with format of image.jpg.webp or image.png.webp in /wp-contents/uploads/*
     
  5. ct_roy

    ct_roy Premium Member Premium Member

    39
    6
    8
    Jun 21, 2020
    Ratings:
    +11
    Local Time:
    9:31 PM
    1.17.10
    10.3.22
    Interesting.
    I just did another clean WP install - (I chose Cache Enabler as my caching method) and I didn't install any other plugins and that code block is active by default.
    Once again I had to go in and comment out the same 2 lines.

    Looking at that code block, it's applying the Vary "accept" and no-transform headers to all jpegs, gifs,pngs (since I have no webp's at all) which I think is the issue.

    Does choosing the Cache Enabler cache method via centmin menu options 22 trigger this code block to be activated?
     
  6. eva2000

    eva2000 Administrator Staff Member

    48,519
    11,116
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +17,306
    Local Time:
    6:31 AM
    Nginx 1.21.x
    MariaDB 10.x
    it's a default location context for all wpsecure_domain.com.conf include files

    but I see how this setting
    Code (Text):
    add_header Cache-Control "public, no-transform";
    

    could be problematic if you aren't using webP on Centmin Mod Nginx side for Cloudflare Polish

    Seems like a bug I need to fix :)
     
  7. ct_roy

    ct_roy Premium Member Premium Member

    39
    6
    8
    Jun 21, 2020
    Ratings:
    +11
    Local Time:
    9:31 PM
    1.17.10
    10.3.22
    that what I was thinking :)
     
  8. ct_roy

    ct_roy Premium Member Premium Member

    39
    6
    8
    Jun 21, 2020
    Ratings:
    +11
    Local Time:
    9:31 PM
    1.17.10
    10.3.22
    @eva2000 Looks like this bug is still open - want me to create a github issue for it?
     
  9. eva2000

    eva2000 Administrator Staff Member

    48,519
    11,116
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +17,306
    Local Time:
    6:31 AM
    Nginx 1.21.x
    MariaDB 10.x
    did you update your local Centmin Mod code by running cmupdate ? Only new centmin.sh menu option 22 sites would have the fix, existing Wordpress sites would of needed manual fix as auto updating existing installs could break users custom settings.

    I don't see the no-transform line in update to date code at centminmod/wpsetup.inc at 123.09beta01 · centminmod/centminmod and it was removed via commit via fix CF Polish issue with centmin.sh menu option 22 in 123.09beta01 · centminmod/centminmod@d983405 committed 11 months ago. You can see Githit blame history for that line at centminmod/inc/wpsetup.inc at 123.09beta01 · centminmod/centminmod
     
  10. ct_roy

    ct_roy Premium Member Premium Member

    39
    6
    8
    Jun 21, 2020
    Ratings:
    +11
    Local Time:
    9:31 PM
    1.17.10
    10.3.22
    I sure did, but looking at your commit I see the issue. You'll note at the beginning of this thread that I also commented out
    #add_header Vary "Accept";

    This is required for CF Polish to work properly:
    Source: https://developers.cloudflare.com/images/polish

    So not sure how best you could tweak the nginx config at site setup time for the specific use case that webp image serving is completely offloaded to CF/CF Polish?

    Sidenote: If I'm an edge case I'm ok doing this manually each time I created a WP site. But I'm sure others might run into this use case and it would be good to let people know they need to comment it out at a minimum if they completely rely on CF Polish for webp serving.
     
  11. eva2000

    eva2000 Administrator Staff Member

    48,519
    11,116
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +17,306
    Local Time:
    6:31 AM
    Nginx 1.21.x
    MariaDB 10.x
    Ah that explains it then! I'll need to update Centmin Mod for this. Been working on Nginx PCRE2 changes https://community.centminmod.com/threads/centmin-mod-nginx-1-21-5-pcre2-beta-testing.22326/ so probably time to roll the Nginx PCRE2 changes into public 123.09beta01 along with this fix.

    Yeah will have to revisit this. Personally, for my own Wordpress sites I just either gave up doing it on origin server side or use Shortpixel Image Optimizer plugin to embed into HTML pages a picture/image scrset for serving webp or fallback image formats by image filename i.e. image.webp and image.png etc so Cloudflare treats .webp and .png differently and the HTML page srcset determines what is served to whichever web browser.