Issues with WebP Image Generation in Yootheme Pro Due to Litespeed Cache

G

godweb

Active Member
#1
#1
Hello LiteSpeed Support Team,

I am encountering a challenging issue with the LiteSpeed Cache on my Joomla 4.3.4 website, running PHP 8.1.22. The problem revolves around the caching behavior during the process of transforming images from JPG to WebP format, which is managed by Yootheme Pro. The problem goes away if I turn off the Litespeed cache plugin.

Description of the Issue:
When a page is loaded for the first time, the JPG images are converted to WebP format through a PHP function. The initially served image URL looks like this:

Code: 
<picture>
<source type="image/webp" srcset="/component/ajax/?p=image&amp;src=%7B%22file%22%3A%22images%2Ftour%2Fcastello-di-windsor-guardie-a-cavallo.jpg%22%2C%22type%22%3A%22webp%2C85%22%2C%22thumbnail%22%3A%22%2C300%2C%22%7D&amp;hash=d5a409d9 363w, /component/ajax/?p=image&amp;src=%7B%22file%22%3A%22images%2Ftour%2Fcastello-di-windsor-guardie-a-cavallo.jpg%22%2C%22type%22%3A%22webp%2C85%22%2C%22thumbnail%22%3A%22726%2C600%2C%22%7D&amp;hash=e7d8d296 726w" sizes="(max-aspect-ratio: 363/300) 121vh">
<img src="/component/ajax/?p=image&amp;src=%7B%22file%22%3A%22images%2Ftour%2Fcastello-di-windsor-guardie-a-cavallo.jpg%22%2C%22thumbnail%22%3A%22%2C300%2C%22%7D&amp;hash=616074df" width="363" height="300" alt="" class="el-image uk-transition-opaque" uk-cover="">
</picture>

After this initial load, the generated WebP image is saved in a path like this: /templates/yootheme/cache/8e/myimagexxx-208CL-2-8e58d6ca.webp, ready to be "served" in subsequent page renders.

However, upon refreshing the page, the displayed image does not switch to the new WebP version. Instead, the same image continues to be shown (/component/ajax/?p=image&src=%7B"file"%3A"images%2Ftour%2Fwindsor-castle-horseguards. jpg"%2C"type"%3A"webp%2C85"%2C"thumbnail"%3A"726%2C600%2C"%7D&hash=e7d8d296).

It's only after manually clearing the LiteSpeed cache that the correct WebP image is displayed:

/templates/yootheme/cache/e0/castello-di-windsor-guardie-a-cavallo-e09bf50c.webp


Attempts to Resolve:
I have tried to exclude certain URLs from being cached by adding the following patterns to the 'Exclude URLs' section in LiteSpeed Cache settings, but this has not resolved the issue:

Code: 
?p=image&src=
/component/ajax.html.*
/component/ajax.*
This issue is causing significant page load delays, as the correct WebP images are not being displayed until the cache is manually cleared. I am seeking guidance on how to configure LiteSpeed Cache properly to handle this scenario.

Thanks and regards
 
serpent_driver

serpent_driver

Well-Known Member
#2
#2
Code: 
?p=image&src=/component/ajax.html.*/component/ajax.*
This URL you are trying to exclude from caching is not a URL. These are URL fragments with wildcards that are not supported. To exclude a URL from caching, you must enter either a full URL (without hostname) or a beginning part of a URL. GET parameters are also not supported by the Joomla Cache Plugin.

Try this:
Code: 
/component/ajax/?p=image
If that doesn't work, put this code at the top of the .htaccess.
Code: 
RewriteCond %{REQUEST_URI} ^/component\/ajax\/ [NC]
RewriteCond %{QUERY_STRING} ^p=image [NC]
RewriteRule .* - [E=Cache-Control:no-cache]
**********************************************************************************************************************************************************************************
Join https://www.cachecrawler.com - Lightning fast Cache Warmup Crawler for Wordpress, OpenCart, PrestaShop, W3 Total Cache, WP Rocket, Shopware and Magento.
 
Last edited:
G

godweb

Active Member
#3
#3
Hi Serpent_driver

Thank you for your help. Despite following your suggestions, I'm still facing challenges with the image transformation from JPG to WebP format.

To recap, I have implemented the exclusion rules in the LiteSpeed Cache settings as advised, using /component/ajax/?p=image and /component/ajax.html?p=image. Additionally, I have updated the .htaccess file with the following rules:

Code: 
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/component\/ajax\/ [NC]
RewriteCond %{QUERY_STRING} ^p=image [NC]
RewriteRule .* - [E=Cache-Control:no-cache]

RewriteCond %{REQUEST_URI} ^/component/ajax(/|\.html) [NC]
RewriteCond %{QUERY_STRING} p=image [NC]
RewriteRule .* - [E=Cache-Control:no-cache]
However, the issue remains unresolved. The site continues to call the URL https://www.mydomain.com/component/ajax/?p=image&src={"file"%3A"images%2Fcrociere-capodanno%2Fcrociera-capodanno.jpg"%2C"type"%3A"webp%2C85"%2C"thumbnail"%3A"815%2C485"%2C"%7D&hash=ad0803b1. This URL is redirected to the image https://www.mydomain.com/component/ajax.html?p=image&src={"file"%3A"images%2Fcrociere-capodanno%2Fcrociera-capodanno.jpg"%2C"type"%3A"webp%2C85"%2C"thumbnail"%3A"815%2C485"%2C"%7D&hash=ad0803b1, which continues to be displayed instead of the final, correct WebP image located at https://mydomain-8806.kxcdn.com/templates/yootheme/cache/d9/crociera-capodanno-d93e779c.webp

In many cases, even clearing the cache for the individual page does not resolve the issue. I find it necessary to completely disable the LiteSpeed plugin to finally display the correct WebP image.

Could you please provide further assistance or insights into why these measures are not effectively addressing the problem? It seems that the caching mechanism is not properly recognizing or respecting the exclusion rules, and this is impacting the correct display of WebP images on my site.

Many thanks and regards
 
serpent_driver

serpent_driver

Well-Known Member
#4
#4
godweb said:
Could you please provide further assistance or insights into why these measures are not effectively addressing the problem? It seems that the caching mechanism is not properly recognizing or respecting the exclusion rules, and this is impacting the correct display of WebP images on my site.
Click to expand...
If you provide me the url to your page I can check it. You can send the URL by PM.

**********************************************************************************************************************************************************************************
Join https://www.cachecrawler.com - Lightning fast Cache Warmup Crawler for Wordpress, OpenCart, PrestaShop, W3 Total Cache, WP Rocket, Shopware and Magento.
 
Last edited:
serpent_driver

serpent_driver

Well-Known Member
#6
#6
I can't detect any malfunction. Regardless of whether a page is cached or not, web images are always displayed, which you can check yourself via the Browser Dev Console. However, this plugin, which generates the webp images, works incorrectly. Webp images are loaded even if the browser does not support webp images. You can remove the cache exclusions in the cache plugin settings and in .htaccess because the request is not cached at all.

webp.png

**********************************************************************************************************************************************************************************
Join https://www.cachecrawler.com - Lightning fast Cache Warmup Crawler for Wordpress, OpenCart, PrestaShop, W3 Total Cache, WP Rocket, Shopware and Magento.
 
Last edited:
serpent_driver

serpent_driver

Well-Known Member
#8
#8
The URL doesn't matter, the result matters and the result is loaded webp images. The loaded webp images in the network tab of your browser doesn't lie. ;)

**********************************************************************************************************************************************************************************
Join https://www.cachecrawler.com - Lightning fast Cache Warmup Crawler for Wordpress, OpenCart, PrestaShop, W3 Total Cache, WP Rocket, Shopware and Magento.
 
Last edited:
G

godweb

Active Member
#9
#9
The loaded webp images in the network tab of your browser doesn't lie.
Click to expand...
This is the list of images that appear in the Network tab upon first loading and until I manually delete Litespeed cache

Capture.PNG

Below is the list of images that appear in the Network tab after having manually deleted Litespeed cache.

Capture2.PNG
I should get this result without having to manually clear the caches. The list you sent is like the latter and probabily does not refer to the images called when the page is first loaded
 
G

godweb

Active Member
#11
#11
I don't want to seem annoying, I think I probably have difficulty explaining myself well in English, which is not my language, so I ask you as a final courtesy to look now that I have deleted the entire cache of the site, including that of Yootheme, with the images webp to be completely regenerated. Any pages of the site you view now, should be "virgin" and the problems encounter should be more noticeable with a little browsing around the site.

I appreciate your patience ;)
 
serpent_driver

serpent_driver

Well-Known Member
#12
#12
You're not annoying! :)

You don't have to purge the cache. It is sufficient if you append a changing GET parameter to the URL currently being accessed.

?test=10 or ?test=11 etc.

However, I think I understand what you mean. The request to /component/ajax.html generates a 301 redirect with every request for an image, which inevitably delays the parsing of the page and thus the loading time of the page. That's why the images are displayed or loaded with a long delay. But I don't see a cache problem because the /component/ajax.html request is not cached. The problem seems to have something to do with this image plugin and your nginx proxy.

What happens if you deactivate the cache plugin?
 
G

godweb

Active Member
#13
#13
Thank you very much. As i said, if I turn off the Litespeed plugin everything works fine. If you can still check, you can see now with the plugin turned off
 
G

godweb

Active Member
#15
#15
You're right, but what you say is true the first time that a page is load. Just reload the page again and see that the redirects disappear and the images have a stable url like this /templates/yootheme/cache/d7/castello-di-windsor-d73226f9.webp. Yootheme works in this way to generate webp images
 
serpent_driver

serpent_driver

Well-Known Member
#16
#16
You're right. I just checked again. However, I can't offer you a solution for this. All I can say is that this image plugin is not cache friendly. You will therefore have the same problem with any other page cache. You could ask the plugin author if he/she has a solution for this, because the problem is not limited to the LiteSpeed Cache plugin.
 
G

godweb

Active Member
#18
#18
500 errors occur with the cache turned off and the image regeneration process is in progress on multiple pages because the server cannot handle the load.

In any case, I'm glad you were able to see what I meant. The plugin you are talking about is part of Yootheme core, so I will open a request to their support, but if any suggestion comes to your mind, it will be welcome

I really appreciate the time you gave me, thank you
 
serpent_driver

serpent_driver

Well-Known Member
#19
#19
If the plugin support can explain which request executes the webp image conversion, then you can exclude the cache for this request. However, you should have to see this request in the browser's network console and that makes me a bit suspicious. This request can also run in the background if it is an HTTP request and only a HTTP request to a dynamic source is cached.

btw. Do you have LiteSpeed Enterprise or OpenLiteSpeed?
 
You must log in or register to reply here.
Top