Ashutosh Sharma

@objektivdigital happy to help! ??

@objektivdigital – you can create a custom plugin which copies the service worker JS file to WP root and inserts the inline-JS required using wp_head hook. You wouldn’t have to worry about anything, just ask your employees to install that plugin and activate it. Personally I don’t think there are many options for you other than that. You would still have to support old browser versions even if browsers (Safari) adds WebP support in their latest versions.

@objektivdigital – just wondering, did it work for you?

Hi @makobaby01

My previous comment in under moderation. Long story short:

I would recommend you to read my other comment. I think you can use the service worker approach here for best results. That way, you don’t have to worry about Cloudflare edge cache rules, modifying HTML code or anything like that.

Hi @makobaby01

but how would I do it in code?

If you are talking about templates, you don’t have to if you continue using WebP express with alter HTML option enabled. It will automatically update the HTML for you.

Like using imagemagik (I can’t remember the name) which is a conversion via php to webp, would that also change for the case of cloudflare?

It is (in a way) the same functionality this plugin offers if you are talking about creating a PHP script to dynamically return image (or convert if WebP does not exist) based on browser support. The only advantage that I can think of is that you can actually create a page rule and exclude that script from server cache. But this would mean that you have to manage the conversion and basically update image URLs using filters. It is possible but then you also have to consider CSS & JS.

I would recommend you to read my other comment. I think you can use the service worker approach here for best results. That way, you don’t have to worry about Cloudflare edge cache rules, modifying HTML code or anything like that.

Hi @objektivdigital,

Also, are you directing image traffic through your .htaccess/nginx.conf, or are you using different settings?

No, I am not using Apache or nginx rules to server WebP because Cloudflare only supports varied response in the business plan (as far as I remember but could be wrong.)

WebP Express:
Operation Mode: CDN Friendly
Destination folder: Mingled (required to use Cache Enabler)
File ext: Append

Cache Enabler:
Under Cache Behavior > Variants > [Enable] Create an additional cached version for WebP image support

And in case I need support for external CSS files I install Fast Velocity Minify to inline the CSS so that Cache Enabler can update URLs. I understand that is not always possible specially if you have a lot of CSS on a large website, so that leaves us with 2 options:

1. Either we use FVM filter to update URLs in CSS – but then we will have to create 2 files for WebP supported and non-supported browsers.
2. Use service worker to return WebP whenever JPG/PNG is requested – service workers do not work in Firefox Private window.

If you are looking for the quickest method and you can not use inline CSS option:
1. Uninstall FVM (you don’t need it) – you can still keep Cache Enabler to replace some URLs in cached file or not.
2. Create a service worker in the WP root/installation directory – here is an example
3. Add following to your functions.php:

add_action('wp_head', function() {
	?>
<script>
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    	console.log('ServiceWorker registration successful with scope: ', registration.scope);
	}).catch(function(err) {
    	console.log('ServiceWorker registration failed: ', err);
	});
}
</script>
<?php
});

Where /service-worker.js is the file that you created in step 2 in the WP root directory.

Note: You can use the exact service worker from the example but you need to replace line 20 with this: let url = new URL(request.url + '.webp')

That’s because we need to append .webp to the original file name instead of replacing .jpg or .png.

If you are just curious or want to use a non-JS based solution:

– You can use FVM to create different files for webp and non-webp browsers
– Take a look at fast-velocity-minify/fvm.php and fast-velocity-minify/functions.php
– Filter to modify code: fvm_after_download_and_minify_code

You will have to modify stylesheet handlers in order to generate separate cache files. So, it is possible to use Cache Enabler + FVM + external CSS setup as well but that is a bit complex and takes more time.

I hope this is helpful.

@samtyurenkov – alter HTML is not always an option for all websites, that’s why it is an option and not the default behavior ??

Hi @makobaby01 – please check my recent comment related to Cloudflare and WebP. Basically, if you are using the edge cache page rule, you should not use WebP express.

P.S. I am not related to dev, just sharing my own experience.

Hi @nomadandinlove – you should not use WebP Express if you are going to cache everything on edge servers.

Let’s suppose that you are using CDN Friendly mode, which basically alters the HTML output based on visitor’s browser string (UA), now think what would happen if the first visitor that comes to the page uses a browser that supports WebP. Well, plugin will work and it will alter HTML to use WebP, but now Cloudflare will cache that modified content on their servers. So, now if someone access the website with a browser that does not support WebP, they will still get WebP images because that request never makes to the server.

The only scenario where you can get this setup working is if you use HTTP vary-headers but you will need to upgrade your Cloudflare account.

Hi @objektivdigital – I usually use Cache Enabler in my setup for CloudFlare + WebP. Give it a try.

@ebarboza – I have seen some plugins that have not been updated for years and still work with latest WP. I think the more important thing is that we appreciate the work and hope for the best ??

BTW, you can drop them a message if you are worried

Hi @coreyk, thanks for considering it! Previously I have had to edit code to add more tags, so hopefully I will no longer have to go down that road ??

Hi @optimizingmatters, thanks for pointing out the GitHub repo! I will submit a PR on Monday hopefully ??

Hi @christineskyverge – thanks for your reply, hope to see a fix soon.

Hi @christineskyverge,

Could you please confirm if the refunds are still successful once you dismiss the error alert?

Yes, refunds go through. I have created a separate topic about this issue with screenshots.

• This reply was modified 4 years, 5 months ago by Ashutosh Sharma.