Redis full page caching & webp conditional image serving

[Dereksmith590]

Latest Pagespeed (Lighthouse) tool's update, suggests webp content type to be served onto supported browsers.

Since major browsers like Safari are not supporting webp yet, a conditional cached version is required both for webp supporting browsers and a second for non-webp supporting ones.

Are there any solutions for this problem yet? If a page is cached from a webp supporting browser, non-webp browsers will see this cached version aswell.

[ggloveswp]

Mapping useragent in nginx an appending the variable to cache key, after conditionally checking the variable, might do the trick.

IE:

http config:

map $http_user_agent $webpsupport {
    default 0;
    "~MSIE" 1;
    "~IEMobile" 1;
    "~Safari" 1;
}

server config:

if ($webpsupport != '0') {

location ~* ^/wp-content/.+\.(png|jpg)$ {
  add_header Vary Accept;
...

}

}

Then, just append $nowebpsupport in your cache key, depending on the config you are using ( /etc/nginx/common/redis-php73.conf for Redis/PHP7.3 ):

location ~ \.php$ {
  set $key "nginx-cache:$scheme$request_method$host$request_uri--webp$webpsupport";
...

@VirtuBox or @jeroenlaylo might have better answers for this. Just sharing the first workaround came in mind.

[VirtuBox]

Hello @Dereksmith590,

WebP images support is already implemented in WordOps :

• WebP mapping with Nginx :

  WordOps/wo/cli/templates/webp.mustache

  Line 1 in ad95054

  # WEBP NGINX CONFIGURATION - WO v3.9.5

• Conditional try_files with Nginx :

  WordOps/wo/cli/templates/wpcommon.mustache

  Line 28 in ad95054

  location /wp-content/uploads {

It work properly with full page caching, as we are not serving images with the .webp extension, but directly with their original extension and the proper content-type header depending on the browser request headers.

[andremacola]

This configuration do not work with Cloudflare.

You can use the approach below to customize the thumbnail output.

Recommend to use some plugin like EWWW Image optimizer

<picture class=''>
	<source type='image/webp' srcset='image.webp'>
	<img src='image.jpg' title='' alt='' class=''> 
</picture>

[rsmith4321]

I think it's great that the webp is served if the image is available. However this will cause serious problems if someone is using cloudflare or any kind of cdn. The cdn will cache the webp version of the .jpeg and serve it to non compatible browsers. So I don't know if this should be on by default, it should be an installation choice.

[andremacola]

@VirtuBox The webp.conf file needs to be optional. I have to disable to work with cloudflare.
Because the common configuration uses try_files $uri$webp_suffix $uri =404; the nginx fail to start if we delete or comment the content from webp.conf.

[VirtuBox]

@andremacola I will add an additional directive to set webp_suffix variable empty if Cloudflare header is passed to Nginx