Learn about Centmin Mod LEMP Stack today
Become a Member

Wordpress Installing WebP Express Wordpress Plugin on Centmin Mod Nginx

Discussion in 'Blogs & CMS usage' started by eva2000, May 11, 2019.

  1. negative

    negative Active Member

    384
    46
    28
    Apr 11, 2015
    Ratings:
    +90
    Local Time:
    2:29 PM
    1.9.10
    10.1.11
    I'm using cloudflare (it caches the images on CDN as u know) and WP Fastest Cache plugin.
    So it may related with them ?
     
  2. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    Depends on your Cloudflare plan. I'm using Cloudflare for the basic things, not optimalization or so. Pro and up plans have webp converter. About your plugin, i never used that one, so I can't tell about that one.
     
  3. negative

    negative Active Member

    384
    46
    28
    Apr 11, 2015
    Ratings:
    +90
    Local Time:
    2:29 PM
    1.9.10
    10.1.11
    I'm at free plan at this website so i'm working hard on webP Express plugin :) My another website has on pro plan so webp and optimizations works perfect without struggle :)
     
  4. fabianski

    fabianski Member

    102
    14
    18
    Feb 20, 2019
    Brazil
    Ratings:
    +36
    Local Time:
    8:29 AM
    fixed in 0.14.2 (17 jun 2019)
    README.txt in webp-express/trunk – WordPress Plugin Repository
     
  5. eva2000

    eva2000 Administrator Staff Member

    44,504
    10,165
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,734
    Local Time:
    9:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    nice lots of version updates since too !
     
  6. KlueMaster

    KlueMaster Member

    49
    10
    8
    Aug 5, 2017
    Ratings:
    +20
    Local Time:
    4:59 PM
    MariaDB 10
    @eva2000
    So, are you including it as an auto option for menu item #22 anytime soon?
    Also, probably a shell script for adding the same to existing sites will be a very useful.
     
  7. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    @eva2000 Yeah, would be nice, same as if we want to install the Classic Editor. Just an option into the menu if we want it or not. Saves some time and you can configure it with the right options using the WP-CLI and have fewer questions here.
     
    Last edited: Jun 20, 2019
  8. eva2000

    eva2000 Administrator Staff Member

    44,504
    10,165
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,734
    Local Time:
    9:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    Definitely thinking about it - so we'll see :)
     
  9. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    Made an edit to my post for an extra motivation, and do you know what some plugins have a delay to load on the forum???
    My language tool delays a lot or does not load at all on the CMM. Could it be Cloudflare again?
     
    Last edited: Jun 20, 2019
  10. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    Hi there,

    Just a small issue with WordPress Multi site.

    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/(.+/)?(.+)\.(png|jpe?g)$ {
        expires 30d;
         add_header Vary "Accept-Encoding";
         add_header Cache-Control "public, no-transform, includeSubDomains; preload";
         try_files $uri$webp_extension $uri =404;
        }
      }
    


    They part
    Code (Text):
    location ~ ^/wp-content/uploads/


    i divided into
    wp-content/uploads/sites/37/2019/09/

    Do I need to change something, because the part
    Code (Text):
    add_header Vary "Accept-Encoding";

    Is not working anymore.

    Info from the WebP Express Plugin test
    Code (Text):
    Testing redirection to existing webp
    UPLOADS
    Copying files for testing
    Copying JPEG to uploads folder (webp-express-test-images/9B9Tbr.JPEG). ok
    We now have a jpeg stored here:
    /home/nginx/domains/domain.com/public/wp-content/uploads/webp-express-test-images/9B9Tbr.JPEG
    
    Copying dummy webp to the cache root for uploads. ok
    We now have a webp file stored here:
    /home/nginx/domains/domain.com/public/wp-content/uploads/webp-express-test-images/9B9Tbr.JPEG.webp
    
    Lets check that browsers supporting webp gets the WEBP when the JPEG is requested
    Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
    https://domain.com/wp-content/uploads/webp-express-test-images/9B9Tbr.JPEG
    Response headers:
    - date: Fri, 27 Sep 2019 13:12:02 GMT
    - content-type: image/webp
    - content-length: 6964
    - set-cookie: __cfduid=d1f28434612feb2d044ed2ca8a42e27c71569589922; expires=Sat, 26-Sep-20 13:12:02 GMT; path=/; domain=.domain.com; HttpOnly; Secure
    - last-modified: Fri, 27 Sep 2019 13:12:01 GMT
    - vary: Accept-Encoding
    - vary: Accept-Encoding
    - etag: "5d8e0aa1-1b34"
    - x-powered-by: centminmod
    - expires: Sat, 26 Sep 2020 13:12:02 GMT
    - cache-control: public, max-age=31536000
    - cf-cache-status: MISS
    - accept-ranges: bytes
    - strict-transport-security: max-age=31536000; includeSubDomains; preload
    - x-content-type-options: nosniff
    - expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    - server: cloudflare
    - cf-ray: 51cdba148905bf50-XXX
    
    Alrighty. We got a webp. Just what we wanted. Great!. BUT!
    Warning: We did not receive a Vary:Accept header. That header should be set in order to tell proxies that the response varies depending on the Accept header. Otherwise browsers not supporting webp might get a cached webp and vice versa.
    
    Now lets check that browsers not supporting webp gets the JPEG
    Making a HTTP request for the test image (without setting the "Accept" header)
    https://domain.com/wp-content/uploads/webp-express-test-images/9B9Tbr.JPEG
    Response headers:
    - date: Fri, 27 Sep 2019 13:12:02 GMT
    - content-type: image/webp
    - content-length: 6964
    - set-cookie: __cfduid=d97633fd72b5d056ed9b3b64f51c364081569589922; expires=Sat, 26-Sep-20 13:12:02 GMT; path=/; domain=.domain.com; HttpOnly; Secure
    - last-modified: Fri, 27 Sep 2019 13:12:01 GMT
    - vary: Accept-Encoding
    - vary: Accept-Encoding
    - etag: "5d8e0aa1-1b34"
    - x-powered-by: centminmod
    - expires: Sat, 26 Sep 2020 13:12:02 GMT
    - cache-control: public, max-age=31536000
    - cf-cache-status: HIT
    - age: 0
    - accept-ranges: bytes
    - strict-transport-security: max-age=31536000; includeSubDomains; preload
    - x-content-type-options: nosniff
    - expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    - server: cloudflare
    - cf-ray: 51cdba1549f3d90d-XXX
    
    Bummer. As the "content-type" header reveals, we got the webp. So even browsers not supporting webp gets webp. Not good!
    The test FAILED.
    What to do now?
    If there is: Check out the How do I configure my CDN in “Varied image responses” operation mode? section in the FAQ (https://wordpress.org/plugins/webp-express/)
    First, examine the response headers above. Is there any indication that the image is returned from a CDN cache? If there is: Check out the How do I configure my CDN in “Varied image responses” operation mode? section in the FAQ (https://wordpress.org/plugins/webp-express/)
    Also, as you are on Nginx, check out the "I am on Nginx" section in the FAQ (https://wordpress.org/plugins/webp-express/)
    System info (for manual diagnosing):
    System info:
    - PHP version: 7.4.0RC2
    - OS: Linux
    - Server software: nginx/1.17.4
    - Document Root status: Available and its "realpath" is available too. Can be used for structuring cache dir.
    - Document Root: /home/nginx/domains/domain.com/public
    - Document Root: Available and its "realpath" is available too. Can be used for structuring cache dir.
    - Apache module "mod_rewrite" enabled?: could not be determined
    - Apache module "mod_headers" enabled?: could not be determined
    Wordpress info:
    - Version: 5.2.3
    - Multisite?: yes
    - Is wp-content moved?: no
    - Is uploads moved out of wp-content?: no
    - Is plugins moved out of wp-content?: no
    
    Image roots (absolute paths)
    uploads: /home/nginx/domains/domain.com/public/wp-content/uploads
    themes: /home/nginx/domains/domain.com/public/wp-content/themes
    plugins: /home/nginx/domains/domain.com/public/wp-content/plugins
    wp-content: /home/nginx/domains/domain.com/public/wp-content
    index: /home/nginx/domains/domain.com/public
    Image roots (relative to document root)
    uploads: wp-content/uploads
    themes: wp-content/themes
    plugins: wp-content/plugins
    wp-content: wp-content
    index: .
    Image roots (URLs)
    uploads: https://domain.com/wp-content/uploads
    themes: https://domain.com/wp-content/themes
    plugins: https://domain.com/wp-content/plugins
    wp-content: https://domain.com/wp-content
    index: https://domain.com
    WebP Express configuration info:
    - Destination folder: mingled
    - Destination extension: append
    - Destination structure: doc-root
    (To view all configuration, take a look at the config file, which is stored in /home/nginx/domains/domain.com/public/wp-content/webp-express/config/config.json)
    Live tests of .htaccess capabilities:
    - mod_rewrite working?: no
    - mod_header working?: no
    - passing variables from .htaccess to PHP script through environment variable working?: no
    .htaccess files that WebP Express have placed rules in the following files:
    - /home/nginx/domains/domain.com/public/wp-content/uploads/.htaccess
    - /home/nginx/domains/domain.com/public/wp-content/themes/.htaccess
    - /home/nginx/domains/domain.com/public/wp-content/plugins/.htaccess
    - /home/nginx/domains/domain.com/public/wp-content/.htaccess
    - /home/nginx/domains/domain.com/public/wp-content/webp-express/webp-images/.htaccess
    WebP rules in uploads:
    # Rules for handling requests for source images
    # ---------------------------------------------
    
    <IfModule mod_rewrite.c>
      RewriteEngine On
    
      # Redirect to existing converted image in same dir (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME}.webp -f
      RewriteRule ^/?(.*)\.(jpe?g|png)$ $1.$2.webp [NC,T=image/webp,E=EXISTING:1,L]
    
      # Redirect images to webp-on-demand.php (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource-rel=xwp-content/uploads/$1.$2&wp-content=wp-content [NC,L]
    
      # Make sure that browsers which does not support webp also gets the Vary:Accept header
      # when requesting images that would be redirected to webp on browsers that does.
      <IfModule mod_headers.c>
        <FilesMatch "(?i)\.(jpe?g|png)$">
          Header append "Vary" "Accept"
        </FilesMatch>
      </IfModule>
    
    </IfModule>
    
    # Rules for handling requests for webp images
    # ---------------------------------------------
    
    # WebP Realizer: Redirect non-existing webp images to webp-realizer.php, which will locate corresponding jpg/png, 
    # convert it, and deliver the freshly converted webp
    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^/?(.+)\.(webp)$ /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination-rel=xwp-content/uploads/$1.$2&wp-content=wp-content [NC,L]
    
    </IfModule>
    
    # Set Vary:Accept header if we came here by way of our redirect, which set the ADDVARY environment variable
    # The purpose is to make proxies and CDNs aware that the response varies with the Accept header
    <IfModule mod_headers.c>
      <IfModule mod_setenvif.c>
        # Apache appends "REDIRECT_" in front of the environment variables defined in mod_rewrite, but LiteSpeed does not
        # So, the next lines are for Apache, in order to set environment variables without "REDIRECT_"
        SetEnvIf REDIRECT_EXISTING 1 EXISTING=1
        SetEnvIf REDIRECT_ADDVARY 1 ADDVARY=1
    
        Header append "Vary" "Accept" env=ADDVARY
    
        # Set X-WebP-Express header for diagnose purposes
        Header set "X-WebP-Express" "Redirected directly to existing webp" env=EXISTING
      </IfModule>
    </IfModule>
    
    # Register webp mime type 
    <IfModule mod_mime.c>
      AddType image/webp .webp
    </IfModule>
    
    WebP rules in themes:
    # Rules for handling requests for source images
    # ---------------------------------------------
    
    <IfModule mod_rewrite.c>
      RewriteEngine On
    
      # Redirect to existing converted image in same dir (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME}.webp -f
      RewriteRule ^/?(.*)\.(jpe?g|png)$ $1.$2.webp [NC,T=image/webp,E=EXISTING:1,L]
    
      # Redirect to existing converted image in cache-dir (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteCond %{DOCUMENT_ROOT}/wp-content/webp-express/webp-images/doc-root/wp-content/themes/$1.$2.webp -f
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/webp-express/webp-images/doc-root/wp-content/themes/$1.$2.webp [NC,T=image/webp,E=EXISTING:1,L]
    
      # Redirect images to webp-on-demand.php (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource-rel=xwp-content/themes/$1.$2&wp-content=wp-content [NC,L]
    
      # Make sure that browsers which does not support webp also gets the Vary:Accept header
      # when requesting images that would be redirected to webp on browsers that does.
      <IfModule mod_headers.c>
        <FilesMatch "(?i)\.(jpe?g|png)$">
          Header append "Vary" "Accept"
        </FilesMatch>
      </IfModule>
    
    </IfModule>
    
    WebP rules in plugins:
    # Rules for handling requests for source images
    # ---------------------------------------------
    
    <IfModule mod_rewrite.c>
      RewriteEngine On
    
      # Redirect to existing converted image in same dir (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME}.webp -f
      RewriteRule ^/?(.*)\.(jpe?g|png)$ $1.$2.webp [NC,T=image/webp,E=EXISTING:1,L]
    
      # Redirect to existing converted image in cache-dir (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteCond %{DOCUMENT_ROOT}/wp-content/webp-express/webp-images/doc-root/wp-content/plugins/$1.$2.webp -f
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/webp-express/webp-images/doc-root/wp-content/plugins/$1.$2.webp [NC,T=image/webp,E=EXISTING:1,L]
    
      # Redirect images to webp-on-demand.php (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource-rel=xwp-content/plugins/$1.$2&wp-content=wp-content [NC,L]
    
      # Make sure that browsers which does not support webp also gets the Vary:Accept header
      # when requesting images that would be redirected to webp on browsers that does.
      <IfModule mod_headers.c>
        <FilesMatch "(?i)\.(jpe?g|png)$">
          Header append "Vary" "Accept"
        </FilesMatch>
      </IfModule>
    
    </IfModule>
    
    WebP rules in wp-content:
    # Rules for handling requests for source images
    # ---------------------------------------------
    
    <IfModule mod_rewrite.c>
      RewriteEngine On
    
      # Redirect to existing converted image in same dir (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME}.webp -f
      RewriteRule ^/?(.*)\.(jpe?g|png)$ $1.$2.webp [NC,T=image/webp,E=EXISTING:1,L]
    
      # Redirect to existing converted image in cache-dir (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteCond %{DOCUMENT_ROOT}/wp-content/webp-express/webp-images/doc-root/wp-content/$1.$2.webp -f
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/webp-express/webp-images/doc-root/wp-content/$1.$2.webp [NC,T=image/webp,E=EXISTING:1,L]
    
      # Redirect images to webp-on-demand.php (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource-rel=xwp-content/$1.$2&wp-content=wp-content [NC,L]
    
      # Make sure that browsers which does not support webp also gets the Vary:Accept header
      # when requesting images that would be redirected to webp on browsers that does.
      <IfModule mod_headers.c>
        <FilesMatch "(?i)\.(jpe?g|png)$">
          Header append "Vary" "Accept"
        </FilesMatch>
      </IfModule>
    
    </IfModule>
    
    WebP rules in cache:
    
    # Rules for handling requests for webp images
    # ---------------------------------------------
    
    # WebP Realizer: Redirect non-existing webp images to webp-realizer.php, which will locate corresponding jpg/png, 
    # convert it, and deliver the freshly converted webp
    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^/?(.+)\.(webp)$ /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination-rel=xwp-content/webp-express/webp-images/$1.$2&wp-content=wp-content [NC,L]
    
    </IfModule>
    
    # Set Vary:Accept header if we came here by way of our redirect, which set the ADDVARY environment variable
    # The purpose is to make proxies and CDNs aware that the response varies with the Accept header
    <IfModule mod_headers.c>
      <IfModule mod_setenvif.c>
        # Apache appends "REDIRECT_" in front of the environment variables defined in mod_rewrite, but LiteSpeed does not
        # So, the next lines are for Apache, in order to set environment variables without "REDIRECT_"
        SetEnvIf REDIRECT_EXISTING 1 EXISTING=1
        SetEnvIf REDIRECT_ADDVARY 1 ADDVARY=1
    
        Header append "Vary" "Accept" env=ADDVARY
    
        # Set X-WebP-Express header for diagnose purposes
        Header set "X-WebP-Express" "Redirected directly to existing webp" env=EXISTING
      </IfModule>
    </IfModule>
    
    # Register webp mime type 
    <IfModule mod_mime.c>
      AddType image/webp .webp
    </IfModule>
    
    Deleting test images
    THEMES
    Copying files for testing
    Copying JPEG to themes folder (webp-express-test-images/k8B3T6.JPEG). ok
    We now have a jpeg stored here:
    /home/nginx/domains/domain.com/public/wp-content/themes/webp-express-test-images/k8B3T6.JPEG
    
    Copying dummy webp to the cache root for themes. ok
    We now have a webp file stored here:
    /home/nginx/domains/domain.com/public/wp-content/webp-express/webp-images/doc-root/wp-content/themes/webp-express-test-images/k8B3T6.JPEG.webp
    
    Lets check that browsers supporting webp gets the WEBP when the JPEG is requested
    Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
    https://domain.com/wp-content/themes/webp-express-test-images/k8B3T6.JPEG
    Response headers:
    - date: Fri, 27 Sep 2019 13:12:02 GMT
    - content-type: image/jpeg
    - content-length: 3195
    - set-cookie: __cfduid=da9c53ed2225509e9fd6e3ac886a316e61569589922; expires=Sat, 26-Sep-20 13:12:02 GMT; path=/; domain=.domain.com; HttpOnly; Secure
    - last-modified: Fri, 27 Sep 2019 13:12:02 GMT
    - vary: Accept-Encoding
    - etag: "5d8e0aa2-c7b"
    - x-powered-by: centminmod
    - expires: Sat, 26 Sep 2020 13:12:02 GMT
    - cache-control: public, max-age=31536000
    - x-xss-protection: 1; mode=block
    - x-content-type-options: nosniff
    - x-rocket-nginx-serving-static: No
    - cf-cache-status: MISS
    - accept-ranges: bytes
    - strict-transport-security: max-age=31536000; includeSubDomains; preload
    - expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    - server: cloudflare
    - cf-ray: 51cdba169dcad8e9-XXX
    
    Bummer. As the "content-type" header reveals, we got the jpeg.
    Additionally, the content-length reveals that we did not get the webp (we know that the file we put is exactly 6964 bytes). So we can conclude that the rewrite did not happen
    The test FAILED.
    Diagnosing rewrites
    Notice that you are on Nginx and the rules that WebP Express stores in the .htaccess files probably does not have any effect.
    Please read the "I am on Nginx" section in the FAQ (https://wordpress.org/plugins/webp-express/)
    And did you remember to restart the nginx service after updating the configuration?
    PS: If you cannot get the redirect to work, you can simply rely on Alter HTML as described in the FAQ.
    Deleting test images
    PLUGINS
    Copying files for testing
    Copying JPEG to plugins folder (webp-express-test-images/ti2IOI.JPEG). ok
    We now have a jpeg stored here:
    /home/nginx/domains/domain.com/public/wp-content/plugins/webp-express-test-images/ti2IOI.JPEG
    
    Copying dummy webp to the cache root for plugins. ok
    We now have a webp file stored here:
    /home/nginx/domains/domain.com/public/wp-content/webp-express/webp-images/doc-root/wp-content/plugins/webp-express-test-images/ti2IOI.JPEG.webp
    
    Lets check that browsers supporting webp gets the WEBP when the JPEG is requested
    Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
    https://domain.com/wp-content/plugins/webp-express-test-images/ti2IOI.JPEG
    Response headers:
    - date: Fri, 27 Sep 2019 13:12:02 GMT
    - content-type: image/jpeg
    - content-length: 3195
    - set-cookie: __cfduid=d8cad2ccfed3a8452a1f3a0ec5dc516571569589922; expires=Sat, 26-Sep-20 13:12:02 GMT; path=/; domain=.domain.com; HttpOnly; Secure
    - last-modified: Fri, 27 Sep 2019 13:12:02 GMT
    - vary: Accept-Encoding
    - etag: "5d8e0aa2-c7b"
    - x-powered-by: centminmod
    - expires: Sat, 26 Sep 2020 13:12:02 GMT
    - cache-control: public, max-age=31536000
    - x-xss-protection: 1; mode=block
    - x-content-type-options: nosniff
    - x-rocket-nginx-serving-static: No
    - cf-cache-status: MISS
    - accept-ranges: bytes
    - strict-transport-security: max-age=31536000; includeSubDomains; preload
    - expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    - server: cloudflare
    - cf-ray: 51cdba176d82c83b-XXX
    
    Bummer. As the "content-type" header reveals, we got the jpeg.
    Additionally, the content-length reveals that we did not get the webp (we know that the file we put is exactly 6964 bytes). So we can conclude that the rewrite did not happen
    The test FAILED.
    Diagnosing rewrites
    Notice that you are on Nginx and the rules that WebP Express stores in the .htaccess files probably does not have any effect.
    Please read the "I am on Nginx" section in the FAQ (https://wordpress.org/plugins/webp-express/)
    And did you remember to restart the nginx service after updating the configuration?
    PS: If you cannot get the redirect to work, you can simply rely on Alter HTML as described in the FAQ.
    Deleting test images
    WP-CONTENT
    Copying files for testing
    Copying JPEG to wp-content folder (webp-express-test-images/kVXh6N.JPEG). ok
    We now have a jpeg stored here:
    /home/nginx/domains/domain.com/public/wp-content/webp-express-test-images/kVXh6N.JPEG
    
    Copying dummy webp to the cache root for wp-content. ok
    We now have a webp file stored here:
    /home/nginx/domains/domain.com/public/wp-content/webp-express/webp-images/doc-root/wp-content/webp-express-test-images/kVXh6N.JPEG.webp
    
    Lets check that browsers supporting webp gets the WEBP when the JPEG is requested
    Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
    https://domain.com/wp-content/webp-express-test-images/kVXh6N.JPEG
    Response headers:
    - date: Fri, 27 Sep 2019 13:12:02 GMT
    - content-type: image/jpeg
    - content-length: 3195
    - set-cookie: __cfduid=d3ff931b730883ce31e46d5151d0828701569589922; expires=Sat, 26-Sep-20 13:12:02 GMT; path=/; domain=.domain.com; HttpOnly; Secure
    - last-modified: Fri, 27 Sep 2019 13:12:02 GMT
    - vary: Accept-Encoding
    - etag: "5d8e0aa2-c7b"
    - x-powered-by: centminmod
    - expires: Sat, 26 Sep 2020 13:12:02 GMT
    - cache-control: public, max-age=31536000
    - x-xss-protection: 1; mode=block
    - x-content-type-options: nosniff
    - x-rocket-nginx-serving-static: No
    - cf-cache-status: MISS
    - accept-ranges: bytes
    - strict-transport-security: max-age=31536000; includeSubDomains; preload
    - expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    - server: cloudflare
    - cf-ray: 51cdba17fca8d901-XXX
    
    Bummer. As the "content-type" header reveals, we got the jpeg.
    Additionally, the content-length reveals that we did not get the webp (we know that the file we put is exactly 6964 bytes). So we can conclude that the rewrite did not happen
    The test FAILED.
    Diagnosing rewrites
    Notice that you are on Nginx and the rules that WebP Express stores in the .htaccess files probably does not have any effect.
    Please read the "I am on Nginx" section in the FAQ (https://wordpress.org/plugins/webp-express/)
    And did you remember to restart the nginx service after updating the configuration?
    PS: If you cannot get the redirect to work, you can simply rely on Alter HTML as described in the FAQ.
    Deleting test images
    
     
  11. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    Work in progress. All images are jpg.webp so if I want to download them they are WebP
    And https://www.webpagetest.org shows the same
     
  12. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    New configuration, works excellent until hit a small bug. Install - Zend OpCache Sub-Menu PHP version 7.4 ioncube.so

    All files server as WebP

    Code (Text):
    yum install libwebp-tools
    

    For cwebb

    Project_CMM_7307.png
    Project_CMM_7308.png
    Project_CMM_7309.png
    Project_CMM_7310.png
    Part when bug comes in

    Project_CMM_7311.png

    Added WebP to part in domain.ssl.conf (guess no need for it)
    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/(.+/)?(.+)\.(webp|png|jpe?g)$ {
        expires 30d;
         add_header Vary "Accept-Encoding";
         add_header Cache-Control "public, no-transform, includeSubDomains; preload";
         try_files $uri$webp_extension $uri =404;
        }
      }
    
     
  13. eva2000

    eva2000 Administrator Staff Member

    44,504
    10,165
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,734
    Local Time:
    9:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    that can work though you're now using webP and thus PHP to serve webP files which will be slower and scale far less than letting Nginx server webP as before
     
  14. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    Fine, set file extension to add.webp instead of webp (what I prefer).
    Deleted all converted files on my network enabled plugin en converted them again to jpg.webp and png.webp

    Now all files show as jpg or png in dev tools or https://www.webpagetest.org, but a if I want to download them I get a WebP file to save.
    And yes, they show all up in the response code as "content-type: image/webp"

    Just want to know how to get it to work without add.webp, Don't upload an image with the same name in PNG or JPG.

    The part ALTER HTML did the trick, even enabled the profilepicture.js for older browsers.

    In that way they will show up again as WebP in dev tools and WebPageTest - Website Performance and Optimization Test

    Works 100%. Just want to get rid of jpg.webp extension and have only WebP.

    @eva2000 The day I introduced you the WebP Express plugin within 10 minutes or so you got it working for NGINX.
    I guess with an extra 10 minutes we can get very nice results.
     
  15. eva2000

    eva2000 Administrator Staff Member

    44,504
    10,165
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,734
    Local Time:
    9:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    Unfortunately, you can't if you want Nginx to conditionally serve webP. You'd have to do it via php i.e. this webP express plugin and acept lesser performance/scalability and measure if the cost of going through PHP vs Nginx is worth it.
     
  16. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    I'm not using imagemagick but cwebb and cwebb is NOT using PHP

    I simply did yum install libwebp-tools and then you have cwebb

    Copy of rosell-dk/webp-convert

    Correct me if I'm wrong.
    Project_CMM_7312.png
     
    Last edited: Sep 29, 2019
  17. eva2000

    eva2000 Administrator Staff Member

    44,504
    10,165
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,734
    Local Time:
    9:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    I'm talking about where the logic lies in serving webP to visitors - using nginx conditional rewrite lets nginx do that versus letting php through the webP express plugin deal with the conditional logic to server webP. One is through nginx and other is through php + nginx.

    To put it another way, if you disabled webP express plugin (served by PHP), would you still be able to serve webP images to visitors conditionally ? Using nginx method you would still be able to if there is webP converted version at .jpg.webp or .png.webp as it doesn't rely on PHP at all.
     
  18. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    WebP Express is using PHP, yes that's logic, but to rewrite the rules of Nginx has nothing to do with PHP. When I set the file extension to WebP I get WebP, setting it to add.webp, I get jpg and png instead.

    So this "could" be a big step forward.
     
  19. eva2000

    eva2000 Administrator Staff Member

    44,504
    10,165
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,734
    Local Time:
    9:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    yes but you only get image.webp due to PHP via webP express making it so - that's what I am referring to as being 'using PHP' and being less performant.

    Unfortunately, you'd need to decide between the 2 methods and ask how many times folks right click and download an image image.jpg when it is conditionally served as image.jpg.webp when not right click downloaded versus how many times folks just load images within their browsers and get the image.jpg.webp version which is smaller for bandwidth usage requirements.
     
  20. EckyBrazzz

    EckyBrazzz Active Member

    871
    183
    43
    Mar 28, 2018
    >>>>Click here<<<< i'm nearby......
    Ratings:
    +334
    Local Time:
    8:29 AM
    Latest
    Latest
    It is not to right click and save a file. It's just the fact that the browser is server WebP if supported directly.

    Guess I have to figure it out alone, just like the WordPress Multisite and Centmin in a cluster.