Wordpress Installing WebP Express Wordpress Plugin on Centmin Mod Nginx

WebP Express interesting indeed but seems to use .htaccess apache rewrite rules for conditional browser webp supported rewrites which nginx doesn't support .htaccess. But Centmin Mod Nginx in 123.09beta01 natively can rewrite with instructions at https://centminmod.com/webp/. You'd have to used mingled destination folder mode though for Centmin Mod Nginx's webp to pick up the converted webp version



Also make sure you select append .webp in WebP Express plugin and not set .webp for extension



Don't enable Alter HTML section options as it is not required at all. Best performance is letting Nginx do the webP conditional detection and serving to webP supported web browsers and not let WebP Express PHP code do the work. For Centmin Mod Nginx config outlined in this thread, WebP Express wordpress plugin's only task is to auto convert images to WebP at upload time.

also centmin.sh menu option 22 installed wordpress wpsecure whitelisting is needed as php files can't be run in WebP Express doing conversion test = 403 no permission as per https://community.centminmod.com/threads/wordpress-403-permission-denied-errors.11215/



added whitelist exception in my test domain's (funky.domain.com) wpsecure include file /usr/local/nginx/conf/wpincludes/funky.domain.com/wpsecure_funky.domain.com.confright after the last whitelist exception location context

replace all references to funky.domain.com with your domain name

Code (Text):

# Whitelist Exception for webp-express
location ~ ^/wp-content/plugins/webp-express/ {
  include /usr/local/nginx/conf/php.conf;
  include /usr/local/nginx/conf/staticfiles.conf;
  # below include file needs to be manually created at that path and to be uncommented
  # by removing the hash # in front of below line to take effect. This wpwhitelist_common.conf
  # allows you to add commonly shared settings to all wp plugin location matches which
  # whitelist php processing access at /usr/local/nginx/conf/wpincludes/funky.domain.com/wpsecure_funky.domain.com.conf
  #include /usr/local/nginx/conf/wpincludes/funky.domain.com/wpwhitelist_common.conf;
}

then restart php-fpm service and now test conversions work. This wpsecure whitelisting allows you finer grain control over which wordpress plugins can run php code from /wp-content/plugins/yourpluginname directory.



test media image upload to see if it converts to webp file




nice

Code (Text):

find /home/nginx/domains/funky.domain.com/public/wp-content/uploads -type f -name "*.webp"
/home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/epyc2-cray-8180m-01-100x100.png.webp
/home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/epyc2-cray-8180m-01-300x114.png.webp
/home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/epyc2-cray-8180m-01-150x150.png.webp
/home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/epyc2-cray-8180m-01-324x304.png.webp
/home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/epyc2-cray-8180m-01-768x292.png.webp
/home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/epyc2-cray-8180m-01-416x158.png.webp
/home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/epyc2-cray-8180m-01.png.webp

Code (Text):

ls -lah /home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/
total 692K
drwxr-sr-x 2 nginx nginx 4.0K May 10 16:32 .
drwxr-sr-x 3 nginx nginx 4.0K May  9 06:41 ..
-rw-r--r-- 1 nginx nginx 4.7K May  9 08:37 avatar-100x100.png
-rw-r--r-- 1 nginx nginx 2.1K May  9 08:37 avatar.png
-rw-r--r-- 1 nginx nginx  15K May 10 16:32 epyc2-cray-8180m-01-100x100.png
-rw-r--r-- 1 nginx nginx 1.7K May 10 16:32 epyc2-cray-8180m-01-100x100.png.webp
-rw-r--r-- 1 nginx nginx  29K May 10 16:32 epyc2-cray-8180m-01-150x150.png
-rw-r--r-- 1 nginx nginx 2.9K May 10 16:32 epyc2-cray-8180m-01-150x150.png.webp
-rw-r--r-- 1 nginx nginx  55K May 10 16:32 epyc2-cray-8180m-01-300x114.png
-rw-r--r-- 1 nginx nginx 5.8K May 10 16:32 epyc2-cray-8180m-01-300x114.png.webp
-rw-r--r-- 1 nginx nginx  34K May 10 16:32 epyc2-cray-8180m-01-324x304.png
-rw-r--r-- 1 nginx nginx 8.6K May 10 16:32 epyc2-cray-8180m-01-324x304.png.webp
-rw-r--r-- 1 nginx nginx  96K May 10 16:32 epyc2-cray-8180m-01-416x158.png
-rw-r--r-- 1 nginx nginx 9.1K May 10 16:32 epyc2-cray-8180m-01-416x158.png.webp
-rw-r--r-- 1 nginx nginx 258K May 10 16:32 epyc2-cray-8180m-01-768x292.png
-rw-r--r-- 1 nginx nginx  22K May 10 16:32 epyc2-cray-8180m-01-768x292.png.webp
-rw-r--r-- 1 nginx nginx  82K May 10 16:32 epyc2-cray-8180m-01.png
-rw-r--r-- 1 nginx nginx  27K May 10 16:32 epyc2-cray-8180m-01.png.webp

all that is left is setup Centmin Mod Nginx's conditional .webp extension rewrite for browsers that support webp as per https://centminmod.com/webp/. Centmin Mod 123.09beta01 already has setup instructed /usr/local/nginx/conf/webp.conf include file in nginx.conf.

you can do that by editing wpsecure for your wordpress site i.e. for my funky.domain.com wordpress site would be at
/usr/local/nginx/conf/wpincludes/funky.domain.com/wpsecure_funky.domain.com.conf
and adding right after nginx-helper log blocking location context the following

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";
   add_header Cache-Control "public, no-transform";
   try_files $uri$webp_extension $uri =404;
  }
}

so in wpsecure include file right after block nginx-helper log context

Code (Text):

# Block nginx-help log from public viewing
location ~* /wp-content/uploads/nginx-helper/ { deny all; }

# 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;
  }
}

then restart nginx + php-fpm

Code (Text):

nprestart

inspecting Chrome devtools network tab

---

if you see images with content-type = image/webp then Centmin Mod Nginx is serving the webP version of your image converted via WebP Express wordpress plugin when you uploaded the image to wordpress media/gallery.

 

Good to hear - thanks for heads up on WebP Express wordpress plugin, seems like a good candidate for centmin.sh menu option 22 auto installation or at least prompt end user to whether they want it installed

Interesting that WebP Express's FAQ for Nginx setup is very complex compared to what is really needed to conditionally server WebP images to supported browsers only WebP Express

Also note for use with Cloudflare

Basically, if using Cloudflare Pro and higher paid plans, you do not need WebP Express wordpress plugin as Cloudflare can do on the fly WebP conversion of your images when it's beneficial to do so.

 

If you setup in your own wpsecure /usr/local/nginx/conf/wpincludes/funky.domain.com/wpsecure_funky.domain.com.conf - change funky.domain.com to your domain name include file the setting

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";
   add_header Cache-Control "public, no-transform";
   try_files $uri$webp_extension $uri =404;
  }
}

and restarted nginx + php-fpm services, webp images should be cached - it is for me in webpagetest.org tests



both expires and cache-control headers present for webp content-type = image/webp mime type

 

Don't look at the extension of the file, look at content-type mime = image/webp that indicates if webP is working as the nginx rewrite rule redirects .png to .png.web if working properly. You can see same at https://centminmod.com/webp/

You can verify by size of webp image reported in chrome network tab for 300x114.png.webp = 5.8KB (5842 bytes content length) which is approximate size of it as 5.8KB versus 300x114.png non-webp png fille at 55KB.

also verify that cache control header is set to 30 day expiry = 2592000 seconds with public, no-transform as per

Code (Text):

add_header Cache-Control "public, no-transform";

Code (Text):

ls -lah /home/nginx/domains/funky.domain.com/public/wp-content/uploads/2019/05/
total 692K
drwxr-sr-x 2 nginx nginx 4.0K May 10 16:32 .
drwxr-sr-x 3 nginx nginx 4.0K May  9 06:41 ..
-rw-r--r-- 1 nginx nginx 4.7K May  9 08:37 avatar-100x100.png
-rw-r--r-- 1 nginx nginx 2.1K May  9 08:37 avatar.png
-rw-r--r-- 1 nginx nginx  15K May 10 16:32 epyc2-cray-8180m-01-100x100.png
-rw-r--r-- 1 nginx nginx 1.7K May 10 16:32 epyc2-cray-8180m-01-100x100.png.webp
-rw-r--r-- 1 nginx nginx  29K May 10 16:32 epyc2-cray-8180m-01-150x150.png
-rw-r--r-- 1 nginx nginx 2.9K May 10 16:32 epyc2-cray-8180m-01-150x150.png.webp
-rw-r--r-- 1 nginx nginx  55K May 10 16:32 epyc2-cray-8180m-01-300x114.png
-rw-r--r-- 1 nginx nginx 5.8K May 10 16:32 epyc2-cray-8180m-01-300x114.png.webp
-rw-r--r-- 1 nginx nginx  34K May 10 16:32 epyc2-cray-8180m-01-324x304.png
-rw-r--r-- 1 nginx nginx 8.6K May 10 16:32 epyc2-cray-8180m-01-324x304.png.webp
-rw-r--r-- 1 nginx nginx  96K May 10 16:32 epyc2-cray-8180m-01-416x158.png
-rw-r--r-- 1 nginx nginx 9.1K May 10 16:32 epyc2-cray-8180m-01-416x158.png.webp
-rw-r--r-- 1 nginx nginx 258K May 10 16:32 epyc2-cray-8180m-01-768x292.png
-rw-r--r-- 1 nginx nginx  22K May 10 16:32 epyc2-cray-8180m-01-768x292.png.webp
-rw-r--r-- 1 nginx nginx  82K May 10 16:32 epyc2-cray-8180m-01.png
-rw-r--r-- 1 nginx nginx  27K May 10 16:32 epyc2-cray-8180m-01.png.webp

If using other wp plugins which enable webp support, i.e. keycdn cache enabler, disable that option within such plugins as you want nginx to have full control over serving webp via nginx rewrite rule and not via wp plugins.

 

the nginx rules outlined in that page are slightly different to one listed for this wordpress thread - the location context to match images in this thread are for wordpress specifically

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";
   add_header Cache-Control "public, no-transform";
   try_files $uri$webp_extension $uri =404;
  }
}

so adjust your old install to this version and it should work in theory

I'll update the web site example with a 2nd example for wordpress to clarify things.

this part is specific to wordpress while one of web site is a generic example

Code (Text):

  location ~* ^/wp-content/uploads/(.+/)?(.+)\.(png|jpe?g)$ {

and this specific one is added by default to new centmin mod 123.09beta01's centmin.sh menu option 22 wordpress installer so that is why you're seeing it work on fresh new site install via centmin.sh menu option 22

haha, Centmin Mod is the gift that keeps on giving

 

strange then, i'd do a diff compare of the wpsecure files to see too.

 

there's your problem you have unwanted wpsecure in whitelist for web-express for old install



edit: oh looks like that was a line wrap of commented out entry heh or is it a line wrap or newline break, might double check considering the diff is reported for it

 

verified if those images do have the converted .jpg.webp extension versions ?

 

looks like they don't use append .webp extension but set .webp extension

Code (Text):

ls -lah /home/nginx/domains/$vhost/public/wp-content/uploads/2019/05/
total 1.2M
drwxr-sr-x 2 nginx nginx 8.0K May 10 20:41 .
drwxr-sr-x 4 nginx nginx   26 Apr 30 23:34 ..
-rw-r--r-- 1 nginx nginx  16K May 10 19:35 1180x355px-Slide1-1024x308.jpg
-rw-r--r-- 1 nginx nginx 4.6K May 10 19:35 1180x355px-Slide1-1024x308.webp

make sure you select append .webp in WebP Express plugin and not set .webp for extension as you want converted webp images to have naming format of filename.jpg.webp

 

You can remove the .webp set images and re-run batch conversion in WebP for append .webp configuration to create the proper .jpg.webp or .png.webp converted images. Or if both sites have exact same images, just copy over the /wp-content/uploads directory from working copy to other one