Learn about Centmin Mod LEMP Stack today
Register Now

CDN WebPerf How to use WebP with JPG PNG and Cloudflare, Cloudfront - Centminmod

Discussion in 'Web Development & Web Performance' started by adamus007p, Apr 10, 2020.

  1. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM
    Hello @eva2000

    I have open a new topic to focus on WebP and Cloudfront Cloudflare.


    I have test my config with and normally only WebP works with png, with jpg there was no webp.



    Amazon AWS Cloudfront >> your distribution > Origins and Origin Groups >> edit and add custom header, like below.

    Vary header value Accept,Accept-Encoding

    upload_2020-4-9_22-42-35.png

    and jpg works :)

    upload_2020-4-9_22-43-11.png


    For other of course your need 1st follow tutorial here:
    Nginx Serving WebP Images Conditionally Demo

    and recompile your nginx, option 5.

    Summary:
    With standard add_header Vary "Accept"; png works only, with custom header jpg works too.


    Now the time for Cloudflare ;)
     
  2. eva2000

    eva2000 Administrator Staff Member

    55,805
    12,272
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,858
    Local Time:
    4:26 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Nice, I did read Amazon Cloudfront can whitelist configure custom headers but they didn't show examples in their documentation. So thanks for sharing :)
     
  3. pamamolf

    pamamolf Well-Known Member

    4,101
    428
    83
    May 31, 2014
    Ratings:
    +838
    Local Time:
    9:26 PM
    Nginx-1.26.x
    MariaDB 10.6.x
    I can't find the related edit at Cloudflare :(
     
    Last edited: Apr 10, 2020
  4. eva2000

    eva2000 Administrator Staff Member

    55,805
    12,272
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,858
    Local Time:
    4:26 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Amazon Cloudfront != Cloudflare. Above is for Amazon Cloudfront CDN.
     
  5. pamamolf

    pamamolf Well-Known Member

    4,101
    428
    83
    May 31, 2014
    Ratings:
    +838
    Local Time:
    9:26 PM
    Nginx-1.26.x
    MariaDB 10.6.x
    I got confused from the "Cloudfront Cloudflare." on the topic :)

    Ok let's hope there will be a solution for Cloudflare also...
     
  6. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM
    Give me time to make a tests. I will update this topic.
     
  7. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM
    Very often you will not find example only deep search and testing can show you.
    In amazon there is many things hidden and visible only from API.
    List use route53 and API to renew the Letsencrypt.

    Now I want to test Cloudflare if it will really not works or there is a solution. ;)
     
  8. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM
    One last thing I disabled compression on Amazon Cloudfront side.

    I did nit turn in on again for test, but for the first test there was some problems, so I thing extra you need disable compression.

    My finding i did not read about it.
     
  9. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM
    Hi @eva2000 I have tested a Cloudflare free account and I see that Couldflare serve webP in my end.

    my config is
    CDN - WebPerf - Webp - how to use?

    With orange selected
    upload_2020-4-10_19-22-38.png


    I made a tests


    from AWS Cloudfront
    upload_2020-4-10_19-32-38.png

    I have now with Cloudflare
    upload_2020-4-10_19-32-16.png


    First Byte Time (back-end processing): 49/100 Learn More
    818 ms First Byte Time
    317 ms Target First Byte Time

    Leverage browser caching of static assets: 55/100 Learn More
    WARNING - (3.8 hours) jpg

    changed to 1 month
    upload_2020-4-10_19-41-52.png

    now I have
    upload_2020-4-10_19-42-12.png




    Any advise how to improve it - the first byte time?



    PS. I don't know why my VPS is slower from 50ms to more then 200ms.
    Maybe this is a reason.
     
    Last edited: Apr 11, 2020
  10. eva2000

    eva2000 Administrator Staff Member

    55,805
    12,272
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,858
    Local Time:
    4:26 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    problem with free Cloudflare it doesn't support HTTP Vary header for cache so when Chrome/Firefox webP supported browser populates Cloudflare cache and then next visitor uses Safari browser which doesn't support webP, then Cloudflare will serve a webP image for Safari user which will be a broken image. That is why Centmin Mod Nginx disables Nginx webP when Cloudflare is detected being used on the Nginx site Beta Branch - update webp.conf for cloudflare compatibility in 123.09beta01.

    Basically Cloudflare free plan will not work with Nginx level webP as Cloudflare cache can't differentiate webP images for non-webP supported browsers like Safari. You won't have issues with Chrome, Opera or Firefox which support webP.
     
  11. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM
    OK, now it is clear for me. Thank you for the explanation.

    I have test my website crossbrowsertesting.com and Browserling - Live interactive cross-browser testing

    but it seems that there are pictures. For my nginx config for my website with cache on Cloudflare on.


    OK I have check it on ream MAC and there is no images.

    That testers websites are not reliable.
     
    Last edited: Apr 11, 2020
  12. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM
    Hello @eva2000

    what about to add a Nginx: Detecting WebP support with Header Vary Accept. Filename format: image.jpeg / image.webp
    Nginx: Detecting WebP support with Header Vary Accept. Filename format: image.jpeg / image.webp

    Code (Text):
    location ~ (.+)\.(png|jpe?g)$ {
        if ( $http_accept ~* webp ) {
            set $webp "A";
        }
        if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
            set $file_without_ext $1;
        }
        if ( -f $file_without_ext.webp ) {
            set $webp "${webp}E";
        }
     
        if ( $webp = AE ) {
            add_header Vary Accept;
            rewrite (.+)\.(png|jpe?g)$ $1.webp break;
        }
    }



    What do you think?
     
  13. eva2000

    eva2000 Administrator Staff Member

    55,805
    12,272
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,858
    Local Time:
    4:26 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
  14. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM
    I thought that if browser send information that it can handle webp format, it will receive webp images, otherwise it will receive jpeg. For older browser this means they will always receive jpeg and it need to be done on nginx side.

    Is there no option to check on nginx side the compatibility with webp and serve even different jpg names?
     
  15. eva2000

    eva2000 Administrator Staff Member

    55,805
    12,272
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,858
    Local Time:
    4:26 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Problem isn't browser side it's cloudflare cache side without HTTP Vary header support, the cache won't save separate copies of webp and original image to be served conditionally depending on browser support
     
  16. adamus007p

    adamus007p Member

    371
    18
    18
    Feb 8, 2019
    Ratings:
    +36
    Local Time:
    8:26 PM