Giters

rosell-dk / webp-express

Wordpress plugin for serving autogenerated WebP images instead of jpeg/png to browsers that supports WebP

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A great configuration not yet reported (LiteSpeed Cache + BunnyCDN)

ribeiroeder opened this issue · comments

commented

Hello @rosell-dk

I would like to share a new (and great) configuration that deserves a review of the plugin usage explanations.

I'm using LiteSpeed Cache + BunnyCDN together with the configuration of your plugin in "Replace image URLs" and "Only do the replacements in webp enabled browsers" mode.

So far I have not identified any BUG, LiteSpeed Cache can work with separate caches for browsers without WebP support. You need to enable an option below.

LiteSpeed

And on bunnyCDN just check an option that also allows you to separate cache requests for browsers with and without WebP support.

Cache-bunnyCDN

This makes the part that explains that: "this way of working the plugin is not compatible with cache" becomes partially incorrect. In addition to mentioning the Cache Enabler Plugin, it is worth mentioning LiteSpeed Cache. And for CDN's I don't know any options like the one offered by bunnyCDN.

Thanks for this great plugin!

commented

Some more important notes:

  • As far as I could see LiteSpeed Cache just adds those lines to the .htaccess

htaccess

  • LiteSpeed Cache has an option to generate webp files on demand when uploading. This option should not be checked, it is not very functional and is not suitable for images cropped on the fly, theme images and plugins images.

So, I used what each one does best:

  • Webp-Express was responsible for generating the images and replacing them, avoiding the use of the tag picture mode (which is not compatible with AMP pages).

  • LiteSpeed Cache for generating separate caches.

  • BunnyCDN for distributing and handling requests separately.

commented

More info about liteSpeed Cache option "Image WebP Replacement"

https://docs.litespeedtech.com/lscache/lscwp/imageopt/#image-webp-replacement

commented

OptionsLiteSpeed

^ Print of LiteSpeed Cache complete Config:

  1. Create WebP Versions = OFF
    After all, the one who will take care of this is Webp-Express.

  2. Image WebP Replacement = ON
    This option enables the cache separations of browsers with and without WebP support.

  3. WebP Attribute To Replace.
    Just leave a meaningless value for your pages, this prevents both plugins from working on rewriting the same html.

  4. WebP For Extra srcset = OFF
    Again this function is also with Webp-Express.

commented

Ok, thanks for sharing! I shall look at it more closely and add it to the FAQ

commented

@ribeiroeder, I'm about to add this to the FAQ: Do you have any comments?

I am on a Litespeed server

You do not have to do anything special for it to work on a Litespeed server. You should be able to use WebP Express in any operation mode (1).

For best performance, I however recommend that you choose CDN friendly mode and use the LiteSpeed Cache plugin for page caching. LiteSpeed Cache can be set up to maintain separate page caches for browsers that supports webp and browsers that don't. The setup was kindly shared and explained in detail by ribeiroeder here: #433

(1) It is a while since I last checked if the .htaccess rules in the "Varied image responses" operation mode works on Litespeed so I am not 100% certain that they still do. I hope to get around to test again soon and have Litespeed added to the test setup.

commented

@rosell-dk I always used the option "Varied image responses" with Litespeed + Litespeed Cache Plugin, and I never had any problems, not even when I activated bunnyCDN.

commented

I am on a Litespeed server

You do not have to do anything special for it to work on a Litespeed server. You should be able to use WebP Express in any operation mode. For best performance, I however recommend that use the LiteSpeed Cache plugin for page caching.

LiteSpeed Cache can be set up to maintain separate page caches for browsers that supports webp and browsers that don't. Through this functionality it is possible to use "Alter HTML" with the option "Replace image URLs" and "Only do the replacements in webp enabled browsers" mode.

The setup was kindly shared and explained in detail by @ribeiroeder here: #433

commented

its published

commented

@rosell-dk If you need access to a test setup on a litespeed + litespeed cache server, return it to me. I can create a clean installation in my test domain, in a sub directory that only you will have access to.

Thanks!

commented

@ribeiroeder That would be much appreciated. Thanks! You can write to me at it@rosell.dk

commented

Hi @ribeiroeder ,
very interesting....one question....how do you connect to bunny cdn? using their plugin or through litespeed cahe?

thanks

commented

hi @lippopippo

I connected bunnyCDN directly from Litespeed Cache:

1 - CDN Settings > Use CDN Mapping > ON

1

2 - CDN URL > Include https://yourPullZone.b-cdn.net/

2

3 - Include File Types > Include .webp

3

4 - Original URLs > Include //yourdomain.com/

5

5 - In the Web Express plugin config > CDN hostname(s) / hostname alias(es) > Include yourPullZone.b-cdn.net/

commented

Wow, thank you......i'll try it asap......thanks again

commented

@ribeiroeder Thanks for sharing! Could you please update your answer for the newest plugin version v6.1? Some options are added and some are removed since.
Also, can you recommend the setup without BunnyCDN? Specifically LiteSpeed cache plugin + webp-express + Cloudflare (free). Thanks.