This article will walk you through how to setup Shortpixel to serve webp files on specific websites on your GridPane servers.
CDN Note: this won’t work properly if you use a CDN system (e.g. Cloudflare).
See the official Shortpixel documentation here:
https://help.shortpixel.com/article/111-configure-nginx-to-transparently-serve-webp-files-when-supported
Step 1. SSH into your server
Please see the following articles to get started:
Generate your SSH Key:
Generate SSH Key on Windows with Putty
Generate SSH Key on Windows with Windows Subsystem for Linux
Generate SSH Key on Windows with Windows CMD/PowerShell
Add your SSH Key to GridPane:
Add/Remove an SSH Key to/from an Active GridPane Server
Connect to your server:
Step 2: Create webp-mappings.conf
We first need to create an Nginx configuration (aka config / .conf) file so that our server can serve WebP files. This first config makes use of the HTTP Context which applies server-wide.
HTTP Context includes the following:
http {
include /etc/nginx/common/basics.conf;
#include /etc/nginx/common/geoip.conf;
include /etc/nginx/common/limits.conf;
include /etc/nginx/mime.types;
include /etc/nginx/common/ssl.conf;
include /etc/nginx/common/logging.conf;
include /etc/nginx/common/6g-mappings.conf;
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/extra.d/http-context.conf;
include /etc/nginx/sites-enabled/*;
}
We’ll make use of the include highlighted in red to create our new config, which ensures that any .conf file added to the
/etc/nginx/conf.d/
directory applies server-wide.
This step will only need to be set up once per server. If you’re adding Shortpixel to more than one site, you can skip this step for your 2nd site onwards.
So, to summarise, we’ll create a file called
webp-mappings.conf
in the
/etc/nginx/conf.d/
directory.
Create webp-mappings.conf
Create the file with the following command:
nano /etc/nginx/conf.d/webp-mappings.conf
Paste the following block of code:
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
Now Ctrl+O and then press Enter to save the file. Then Ctrl+X to exit nano.
Step 3: Create webp-main-context.conf
We now have 2 options for how to proceed. We can apply our WebP settings server-wide, or just on one specific site. You may find that it’s easier and more convenient to simply apply the changes server-wide. We’ll look at both options below.
Create a Server-wide configuration
The code supplied by Shortpixel themselves only works on individual sites. We’ve modified it so that you can set live for all your sites in one go and then just never need to worry about it.
To set this up, we need to create a file called
shortpixel-webp-main-context.conf
in the
/etc/nginx/extra.d/
directory.
Create the file with the following command:
nano /etc/nginx/extra.d/shortpixel-webp-main-context.conf
Paste the following block of code:
location ~* ^(/wp-content/.+).(png|jpe?g)$ {
set $base $1;
set $webp_uri $base$webp_suffix;
set $webp_old_uri $base.$2$webp_suffix;
add_header Vary Accept;
if ( !-f $document_root$webp_uri ) {
add_header X_WebP_GP_Miss $document_root$webp_uri;
}
try_files $webp_uri $webp_old_uri $uri =404; }
Now Ctrl+O and then press enter to save the file. Then Ctrl+X to exit nano. You can now proceed to step 4.
Create a site-specific configuration
For a singular website, we need to create a file called
shortpixel-webp-main-context.conf
in
/var/www/site.url/nginx
.
Create the file with the following, switching out “site.url” with your website’s domain:
nano /var/www/site.url/nginx/shortpixel-webp-main-context.conf
Paste the following block of code, again switching out “site.url” with your website’s domain:
location ~* ^(/wp-content/.+).(png|jpe?g)$ {
set $base $1;
set $webp_uri $base$webp_suffix;
set $webp_old_uri $base.$2$webp_suffix;
set $root "/var/www/site.url/htdocs";
root $root;
add_header Vary Accept;
if ( !-f $root$webp_uri ) {
add_header X_WebP_GP_Miss $root$webp_uri;
}
try_files $webp_uri $webp_old_uri $uri =404;
}
Now Ctrl+O and then press enter to save the file. Then Ctrl+X to exit nano. Proceed to step 4.
Staging Push Note
When pushing from live to staging or vice versa, the site.url in the site-specific config will need to be edited to the correct website (e.g. staging.site.url), otherwise the $root will be incorrect and WebP files will cease to work.
Step 4: Check and reload Nginx
Finally, we need to check if the conf files are correct then reload Nginx.
Test your nginx syntax with:
nginx -t
If there are no errors present, reload nginx with the following command:
gp ngx reload
PHP Notice
If WebP images still aren't being served as you expected, please double check your PHP version. If you're still on 7.2, upgrading to 7.3 is both a good idea and may help resolve this issue for you.