WebP & Safari Browsers - any suggestions?

Hi everyone, I hope everyone is doing good!

First of all, let me share some facts about my setup:

Wordpress
Website: www.pd-photostories.de
Host: Siteground
Theme: Fiji II by Flothemes
Cloudflare: free version that is part of my Siteground package

Since a few weeks, I’m experiencing a major issue with my site. Not one that is obvious for every visitor, and not one that seems to exist 24/7. But, after lots and lots of troubleshooting, many try and errors and a lot of research, I’m sure I figured out what the problem is. That’s why I landed in this forum :slight_smile:

I have activated the WebP feature in my Siteground account (before I was using EWWW for the same reason, same issues btw) and I can clearly see that these files are not handled correctly by Cloudflares CDN / Caching service.

I have been checking my site over and over again and it’s a fact, that Cloudflare is serving WebP images to Safari Browsers that do not support these kind of files. This leads to blank fields when someone is visiting my site which is a pretty bad thing as my site is a photography website and images are key content.

This problem is not affecting every single picture, mostly logos and pictures in my slideshows, but it is pretty annoying anyways, as the only non-permanent solution is to purge the Cloudflare cache.

Isn’t there a proper solution, any rules or plug in recommendations that get rid of this issue? Unfortunately Cloudflare isn’t responding to my ticket and similar threads in this forum have been closed without any successful solutions.

Would be great if someone could help me here.

Thank you very much, stay save and have a good day

Best regards

Patrick

You need to disable webp conversion done on your web server origin side and only let cloudflare do the webp conversion on the fly because cloudflare cache ignores the Vary HTTP header sent from your origin webp served files. So if a visitor requests a webp file from supported browser the webp file is cached with the non-webp extension. Subsequent visitors on safari then request the same non-webp extension cached file in unsupported webp browser will get that cached file but it’s mime type converted by cloudflare cache is webp.

I ran into this issue with one of my LEMP stack users so I changed the Nginx configuration to disable server side webp if Cloudflare is detected on Nginx domain so as to allow cloudflare to handle webp instead. You can see how I did that for my users at https://community.centminmod.com/threads/playing-with-ewww-image-optimizer-wordpress-plugin.12573/page-3#post-82300

1 Like